2014-02-13 65 views
0

我從Three.js示例創建了3D線框立方體,但我想更改立方體的角度。更改使用Three.js創建的3D「立方體」的角度

目前,它看起來像這樣:
enter image description here

但我希望它看起來像這樣:
enter image description here

這裏是我的代碼:

HTML

<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script> 
<div id="container"></div> 

JS

// revolutions per second 
var angularSpeed = 0.2; 
var lastTime = 0; 

// this function is executed on each animation frame 
function animate(){ 
    // update 
    var time = (new Date()).getTime(); 
    var timeDiff = time - lastTime; 
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI/1000; 
    cube.y += angleChange; 
    lastTime = time; 

    // render 
    renderer.render(scene, camera); 

    // request new frame 
    requestAnimationFrame(function(){ 
     animate(); 
    }); 
} 

// renderer 
var container = document.getElementById("container"); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(container.offsetWidth, container.offsetHeight); 
container.appendChild(renderer.domElement); 

// camera 
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
camera.position.z = 700; 

// scene 
var scene = new THREE.Scene(); 

// cube Length, Height, Width 
var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 100, 200), new THREE.MeshBasicMaterial({ 
    wireframe: true, 
    color: '#ff0000' 
})); 
cube.rotation.x = Math.PI * 0.1; 
scene.add(cube); 

// start animation 
animate(); 

讓我知道如果你需要的任何其他信息。

請建議。

回答

2
cube.rotation.x = Math.PI * 0.1; 

這一行,你是0.1 *在其X軸PI傾斜立方體(水平)。我不確定您需要什麼值,但您可以使用yz而不是x來調整每個軸上的旋轉。只是玩弄這些價值觀,直到它看起來你希望它看起來如何。

粗略的猜測,我要說你想在Y軸上旋轉約70度(轉換爲弧度),在Z軸上旋轉約20度。

現在,如果你想要它看起來剛好像你的照片,那麼另一個人的答案就是你要找的。你需要一個正交投影。

+0

感謝它的工作,我只是改變「cube.rotation.x = Math.PI * 0.1;」 >>> >>>「cube.rotation.x = Math.PI * 0.1; cube.rotation.y = Math.PI * 0.3;」它的工作! – UID

2

第一個圖像是透視投影,第二個圖像是正投影。

有一個SO線程在這裏,介紹瞭如何建立一個正交相機:
https://stackoverflow.com/a/17567292/2941902

+0

感謝您的關注,我閱讀了您提到的SO鏈接,當我進行相機更改,我的腳本停止工作,我確定我做了一些錯誤的更改或缺少某些東西。但我只是嘗試使用由SirBraneDamuj建議的「X」和「Y」在cube.rotation中進行更改,並且它工作正常! – UID

相關問題