属性envMap在THREE.JS r146中从着色器立方体中删除

Question

envMap属性现在在3 .js rel 146的立方体着色器库中完全消失了。我想问一下是否有解决办法?由于

Answer 1

用tCube试试。查看下面的实时演示，了解更多细节。

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/three@0.148/build/three.min.js"></script>