通過使用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)。