2012-12-03 39 views
0

通過使用Skybox立方體/環境貼圖,我能夠製作出一些漂亮的金屬和玻璃材料。如何在相機旋轉時改變反射材料

我已經做了我自己的控制,它允許一個人像在FirstPersonControls一樣繞着軌道移動/環視。

問題是,當我四處走動時,反射看起來令人信服 - 我可以看到反射移動並相應地改變相機移動。然而,當我環顧四周(旋轉相機/改變它的目標)時,反射沒有改變,它們只是靜止的。

我可以在例如three.js/examples/webgl_materials_cubemap_escher.html中看到相同的行爲 - 如果我修改它以使用FirstPersonControls,則當我環顧四周時,材質看起來不會反光/折射。

下面是我如何設置立方體貼圖,說實話這是從一些例子複製,我不明白所有。但它的工作原理,除了這一個問題...

createSkyBox = function(urlPrefix) { 
var sceneCube = new THREE.Scene(); 
var path = urlPrefix; 
var format = '.jpg'; 
var urls = [ 
    path + 'px' + format, path + 'nx' + format, 
    path + 'py' + format, path + 'ny' + format, 
    path + 'pz' + format, path + 'nz' + format 
    ]; 

var reflectionCube = THREE.ImageUtils.loadTextureCube(urls); 
reflectionCube.format = THREE.RGBFormat; 

var refractionCube = new THREE.Texture(reflectionCube.image, new THREE.CubeRefractionMapping()); 
refractionCube.format = THREE.RGBFormat; 


// Skybox 

var shader = THREE.ShaderUtils.lib[ "cube" ]; 
shader.uniforms[ "tCube" ].value = reflectionCube; 

var material = new THREE.ShaderMaterial({ 

    fragmentShader: shader.fragmentShader, 
    vertexShader: shader.vertexShader, 
    uniforms: shader.uniforms, 
    depthWrite: false, 
    side: THREE.BackSide 

}); 
var size = 8000; 
mesh = new THREE.Mesh(new THREE.CubeGeometry(size, size, size), material); 
mesh.geometry.computeBoundingBox(); 
sceneCube.add(mesh); 

this._threejs_cube_scene = sceneCube; 
this._threejs_cube_mesh = mesh; 
this._threejs_envmap = reflectionCube; 
this._threejs_envmap_refraction = refractionCube; 

this._threejs_scene.add(sceneCube); 
} 

,這裏是我的方式創造物質:

var material = new THREE.MeshLambertMaterial({ color: 0xff00, ambient: 0xaaaaaa, envMap: this._threejs_envmap}); 

我然後使用renderer.overrideMaterial材料(我使用EffectComposer如果這有什麼差別)

編輯:現在,我想想,我不知道..我的大腦融化..這可能是現實生活中是如何工作的:)至少直覺當我看到代碼在行動中,旋轉相機時的靜態感覺不正確。但是,也許這是因爲在現實生活中,很難四處看看(eye.lookAt()),而沒有稍稍移動(eye.position = xyz)。

回答

1

你應該計算世界空間中的反射向量(在'fragmentShader'代碼中,你不會在這裏顯示)。如果它在物體空間或視圖(相機)空間中,它將不會自然移動。

是的,這可能意味着一些與表面法線的finagling。要將對象空間法線轉換爲世界空間法線,請使用世界矩陣的逆轉置。您還需要在世界空間座標中獲取視圖矢量以計算最終的世界空間反射矢量。

0

另一個需要考慮的事情是比改變着色器更簡單,如果你想讓它像人頭一樣旋轉,可能會給你的相機一個偏移量。將它添加到Object3d並將其設置爲從Object3d的位置偏移少量(相當於從人類中心到眼睛的距離的量),然後旋轉Object3d而不是相機。

雖然從描述中可以看出你想要什麼樣的效果,但因爲當你只是轉動你的眼球,反射不會改變。這是你的頭輕微傾斜,改變它。