旋转在three.js所

一个天空盒我有使用创造了一个天空盒：旋转在three.js所

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;

渲染循环中，天空盒立方体旋转，但纹理没有。我在移动立方体的同时获得了一个非常有趣且富有洞察力的效果，但纹理保持不变，但这不是我想要的效果，我希望纹理随立方体移动。

来源

2015-11-18 Single Entity

我发现了这个解决方案，如果我们想在没有不寻常的透视效果的情况下为其方向制作动画，那么我在创建天空盒的问题中发布的方法需要更改。

创建空中包厢这使得它旋转是如下的方法：

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

这解决了我的问题。

来源

2015-11-18 21:59:31

你好，我很欣赏这个问题，因为我正在做同样的事情。为了提高我的表现，我从这个答案转到了着色器。他们没有其他办法做到这一点吗？我更喜欢使用着色器并将所有内容保留在GPU上。 –

嗨，最好在SE上直接问你自己的问题。我讨厌这样说，但是我发现Three.js支持在我用它开发的时候缺乏支持，所以我暂时使用OpenGL进入了其他项目。 –

该死的。是的，像这样的六个人经常回答这些问题，就是这样。感谢您的高举。 –

旋转在three.js所

回答

相关问题