旋轉在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所

回答

相關問題