2014-07-01 48 views
0

如何添加reflectionMaterial與環境的地圖,我使用兩個攝像頭和兩個場景,以實現它的基礎上,webgl_materials_cubemap如何添加reflectionMaterial爲對象threejs

和我使用利用OBJMTLLoder加載對象,我可以看到兩個環境地圖,並在我的場景對象,但環境的反映是不工作的對象..

在下面找到我的代碼:

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

的差異在第一個演示中,你可以看到現場工作的罰款與環境和沒有物體反射

在第二個你可以看到,反射工作正常,但相機的行爲變得有線

回答

0

我固定它自己通過添加以下行對象內部的橫向

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

但是我不知道我做的是正確與否,但它的工作像預期,