在 Three.js 中旋转天空盒
我使用以下方法创建了一个天空盒:
I have a skybox created using:
skybox_path = 'images/skybox_images/';
skybox_name = 'Stars_2';
var urls = [
skybox_path + skybox_name + '_right1.png',
skybox_path + skybox_name + '_left2.png',
skybox_path + skybox_name + '_top3.png',
skybox_path + skybox_name + '_bottom4.png',
skybox_path + skybox_name + '_front5.png',
skybox_path + skybox_name + '_back6.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
});
// create skybox mesh
var skybox = new THREE.Mesh(
new THREE.CubeGeometry(1000, 1000, 1000),
skyBoxMaterial
);
scene.add(skybox);
这很好用,但是我现在希望在动画循环中旋转天空盒.
This works fine, however I now wish to rotate the skybox within the animation loop.
如果我使用:
skybox.rotation.x += 0.01;
在渲染循环中,天空盒立方体会旋转,但纹理不会.立方体移动时,我得到了一个非常有趣且富有洞察力的效果,但纹理保持固定,但这不是我想要的效果,我希望纹理与立方体一起移动.
within a render loop, the skybox cube rotates, but the textures don't. I get a very interesting and insightful effect with the cube moving but the textures remaining fixed, but this isn't my desired effect, I'd like the textures to move with the cube.
我找到了解决方案,如果我们想在没有异常透视效果的情况下为其方向设置动画,则需要更改我在问题中发布的创建天空盒的方法.
I found the solution, the method I posted in my question for creating the skybox needs to be changed if we want to animate its orientation without unusual perspective effects.
创建一个可以旋转的天空盒的方法如下:
The method to create a skybox which enables it to be rotated is as follows:
var urls = [
skybox_path + skybox_name + '_right1.png',
skybox_path + skybox_name + '_left2.png',
skybox_path + skybox_name + '_top3.png',
skybox_path + skybox_name + '_bottom4.png',
skybox_path + skybox_name + '_front5.png',
skybox_path + skybox_name + '_back6.png'
];
var materialArray = [];
for (var i = 0; i < 6; i++)
materialArray.push( new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( urls[i] ),
side: THREE.BackSide
}));
var skyGeometry = new THREE.CubeGeometry( 5000, 5000, 5000 );
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skybox = new THREE.Mesh( skyGeometry, skyMaterial );
这解决了我的问题.