Question

如何使用环境贴图添加reflectionMaterial，使用两个摄像头和两个场景来实现它，基于webgl_materials_cubemap

并且正在使用使用OBJMTLLoder加载的Object，我可以在我的场景中看到环境贴图和对象，但是环境的反射不适用于该对象..

在下面找到我的代码：

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
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
});

skybox = new THREE.Mesh( new THREE.BoxGeometry( 1000, 1000, 1000 ), skyBoxMaterial );
scene.add( skybox );


var object = scene.getObjectByName ("myname", true);

object.traverse( function ( child ) {

if ( child instanceof THREE.Mesh )
{
//child.geometry.computeFaceNormals();
var  geometry = child.geometry;

var reflectionMaterial = new THREE.MeshBasicMaterial({
color: 0xcccccc,
envMap: cubemap
});

mesh = new THREE.Mesh(geometry, reflectionMaterial);
sceneCube.add(mesh);


}
});

我只是将scene.add(mesh);更改为sceneCube.add(mesh);反射效果，但相机并没有......

你可以在这里看到差异

Example 1 Example 2

在第一个演示中，您可以看到场景在环境中正常工作且没有对象反射

在第二个中，您可以看到反射工作正常但相机行为已连线

Answer 1

我通过在Object traverse

中添加以下行来自行修复它

child.material.map = reflectionMaterial;
child.material.needsUpdate = true;

但是，我不知道我做的是否正确，但它的工作方式与预期一致，

如何为三个js中的对象添加反射材质

1 个答案: