Question

我使用：

创建了一个天空盒

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);

这很好用，但我现在希望在动画循环中旋转天空盒。

如果我使用：

skybox.rotation.x += 0.01;

在渲染循环中，天空盒立方体旋转，但纹理不会。随着立方体的移动，我得到了一个非常有趣且富有洞察力的效果，但纹理仍然是固定的，但这不是我想要的效果，我喜欢纹理随立方体移动。

Answer 1

我找到了解决方案，如果我们想在没有异常透视效果的情况下设置其方向的动画，我在创建天空盒的问题中发布的方法需要更改。

创建一个可以旋转它的天空盒的方法如下：

    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中旋转天空盒

1 个答案: