在threejs我想动态更改天空盒纹理,我在这里添加了2个场景,所以我将一个场景附加到我的天空盒,所以我决定在从纹理切换到另一个之前移除天空盒,并且天空盒纹理反映了环境贴图在对象上,如果我通过从给定列表中选择来更改纹理,我使用开关案例检查纹理并添加纹理,对象上的反射正在工作,但是如果我将skyBoxMaterial切换到所选纹理Enviromentmap已成功更改但反射在对象上没有更改为当前的环境地图
以下是我的代码:
function envmap(envmap)
{
switch(envmap)
{
case 'canary':
var urls = [
'textures/cube/canary/pos-x.png',
'textures/cube/canary/neg-x.png',
'textures/cube/canary/pos-y.png',
'textures/cube/canary/neg-y.png',
'textures/cube/canary/pos-z.png',
'textures/cube/canary/neg-z.png'
];
//var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
break;
case 'Park2':
var urls = [
'textures/cube/Park2/posx.jpg',
'textures/cube/Park2/negx.jpg',
'textures/cube/Park2/posy.jpg',
'textures/cube/Park2/negy.jpg',
'textures/cube/Park2/posz.jpg',
'textures/cube/Park2/negz.jpg'
];
//var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
break;
case 'Park3Med':
var urls = [
'textures/cube/Park3Med/px.jpg',
'textures/cube/Park3Med/nx.jpg',
'textures/cube/Park3Med/py.jpg',
'textures/cube/Park3Med/ny.jpg',
'textures/cube/Park3Med/pz.jpg',
'textures/cube/Park3Med/nz.jpg'
];
//var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
break;
case 'Bridge2':
var urls = [
'textures/cube/Bridge2/posx.jpg',
'textures/cube/Bridge2/negx.jpg',
'textures/cube/Bridge2/posy.jpg',
'textures/cube/Bridge2/negy.jpg',
'textures/cube/Bridge2/posz.jpg',
'textures/cube/Bridge2/negz.jpg'
];
//var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
break;
case 'pisa':
var urls = [
'textures/cube/pisa/px.png',
'textures/cube/pisa/nx.png',
'textures/cube/pisa/py.png',
'textures/cube/pisa/ny.png',
'textures/cube/pisa/pz.png',
'textures/cube/pisa/nz.png'
];
//var cubemap = THREE.ImageUtils.loadTextureCube(urls); // load textures
break;
default:
var urls = [
'textures/cube/canary/pos-x.png',
'textures/cube/canary/neg-x.png',
'textures/cube/canary/pos-y.png',
'textures/cube/canary/neg-y.png',
'textures/cube/canary/pos-z.png',
'textures/cube/canary/neg-z.png'
];
break;
}
var cubemap = THREE.ImageUtils.loadTextureCube(urls,undefined, render); // load textures
cubemap.needsUpdate = true;
cubemap.format = THREE.RGBFormat;
var shader = THREE.ShaderLib['cube']; // init cube shader from built-in lib
shader.uniforms['tCube'].value = cubemap; // apply textures to shader
// create shader material
var skyBoxMaterial = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
});
alert(skybox);
if (skybox)
{
sceneCube.remove(skybox);
}
skybox = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), skyBoxMaterial );
sceneCube.add( skybox );
var reflectionMaterial = new THREE.MeshBasicMaterial({
color: 0xcccccc,
envMap: cubemap
});
var object = scene.getObjectByName ("myname", true);
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh )
{
//child.geometry.computeFaceNormals();
var geometry = child.geometry;
//console.log(geometry);
material = child.material;
material.transparent = true;
child.material.needsUpdate = true;
child.material.map = reflectionMaterial;
mesh = new THREE.Mesh(geometry, reflectionMaterial);
scene.add(mesh);
}
});
}
答案 0 :(得分:0)
自己解决后自行修复
我使用了child.material=reflectionMaterial;
而不是child.material.map = reflectionMaterial;
,并且对对象素材进行了反思
现在,当从一个环境切换到另一个环境时,反射也应用于我的对象
并且无需在
下添加新网格 mesh = new THREE.Mesh(geometry, reflectionMaterial);
scene.add(mesh);