在 Three.js 中旋转天空盒 [英] Rotating a skybox in 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 );

这解决了我的问题.

这篇关于在 Three.js 中旋转天空盒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！