javascript – 分配给相机的three.js天空盒

我正在尝试将天空盒分配给播放器相机.
当相机移动时(天空箱随之移动),纹理会变得拉长.
如何摆脱这个？

码：

var textureCube = THREE.ImageUtils.loadTextureCube( urls );
textureCube.format = THREE.RGBFormat;
var shader = THREE.ShaderUtils.lib[ "cube" ];
shader.uniforms[ "tCube" ].value = textureCube;

cubematerial = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthWrite: false,
    side: THREE.BackSide
});
skyBox = new THREE.Mesh(new THREE.CubeGeometry(1000,1000,1000), cubematerial);
camera.add(skyBox);

解决方法:

因此,在深入研究Three.js示例之后,我找到了一种方法. http://learningthreejs.com/blog/2011/08/15/lets-do-a-sky/已经过时了.示例中使用的方法是使用固定摄像头将天空盒添加到第二个场景中,并渲染两个场景.查看webgl_materials_cars.html示例.

另外因为我使用分配给角色的第三人称相机,我必须从角色相机到天空盒相机进行世界旋转.这可以在渲染时完成：

function render(){
<...>
    skyboxCamera.rotation.setEulerFromRotationMatrix( new THREE.Matrix4().extractRotation( camera.matrixWorld ), skyboxCamera.eulerOrder );
    renderer.render(skyboxScene, skyboxCamera);
    renderer.render(scene, camera);
<...>
}

标签：javascript,three-js,webgl,skybox
来源： https://codeday.me/bug/20190704/1372854.html