How to add reflectionMaterial for an object in threejs

问题

How to add reflectionMaterial with environment map, am using two cameras and two scene in order to achieve it, based on the webgl_materials_cubemap

and am using Object that is loaded using OBJMTLLoder, i can see the both Environment map, and Object on my scene, but the reflection of environment is not working on the object..

find my code below :

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


}
});

Here am just changing the scene.add(mesh); to sceneCube.add(mesh); the reflection worked but the camera doesn't ..

you can see the differences here

Example 1 Example 2

In the first demo you can see that the scene working fine with the environment and without Object reflection

In the second you can see that the Reflection working fine but the camera behavior gets wired

回答1:

i fixed it myself by adding following line inside the Object traverse

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

However i don't know am doing is correct or not but it is worked as like expected,

来源：https://stackoverflow.com/questions/24512312/how-to-add-reflectionmaterial-for-an-object-in-threejs

标签

three.js