property envMap removed from shader cube in THREE.JS r146

Question

the envMap property has now totally gone away in the cube shader lib in three.js rel 146. I'd like to ask if there is a workaround ? Thanks

Answer 1

Try it with tCube instead. Check out the following live demo for more details.

let camera, scene, renderer;

init().then( render );

async function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10000 );
    camera.position.z = 1;

    scene = new THREE.Scene();
    
    const path = 'https://threejs.org/examples/textures/cube/pisa/';
    const format = '.png';
    const urls = [
      path + 'px' + format, path + 'nx' + format,
      path + 'py' + format, path + 'ny' + format,
      path + 'pz' + format, path + 'nz' + format
    ];
    
    const loader = new THREE.CubeTextureLoader();
    const cubeMap = await loader.loadAsync( urls );

    const geometry = new THREE.BoxGeometry( 1000, 1000, 1000 );
    const material = new THREE.ShaderMaterial( {
      uniforms: THREE.UniformsUtils.clone( THREE.ShaderLib['cube'].uniforms ),
      vertexShader: THREE.ShaderLib['cube'].vertexShader,
      fragmentShader: THREE.ShaderLib['cube'].fragmentShader,
      side: THREE.BackSide,
      depthTest: false,
      depthWrite: false
    } );
    
    material.uniforms.tCube.value = cubeMap;

    const mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function render() {

    renderer.render( scene, camera );

}

body {
      margin: 0;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>