如何使用three.js在空氣中翻轉立方體

Question

我正在使用three.js框架並使用physi.js獲取力和重力。我的問題是，我已經在飛機上對某個骰子給予了某種位置，並且想要通過點擊它來吊起它或者以某個角度從它的位置翻轉它，使得它在空中旋轉並由于飛機的重力落在飛機上。 我有關於onclickevent方法的想法，但我不知道如何設置骰子以90度的某個高度跳轉，並且只需點擊一次就可以以某個角度旋轉它。

如果你有一些建議，請給我的方法來設置了骰子 謝謝

Answer 1

我有physi.js沒有經驗，對物理學我使用cannon.js的，所以我有物理的一些經驗。我可以告訴你它是如何完成的，但我還不能提供一個例子。你需要做的第一件事是從相機到骰子的cast a ray。這告訴你，如果對象被點擊。從那裏你施加一個力量到對象被點擊的地方。我希望這有幫助。

編輯/跟進： 我一直在尋找physi.js，它看起來很像cannon.js。此外，你所問的問題有很多方面，但我會盡可能地全面。

首先要做的是設置重力。在這些例子中它被完成：

var scene = new Physijs.Scene({ fixedTimeStep: 1/120 }); 
scene.setGravity(new THREE.Vector3(0, -30, 0)); 

接下來要做的事情就是確定骰子是坐在一個剛體的平面，骰子爲剛性體。

var dice = new Physijs.BoxMesh(
    new THREE.CubeGeometry(5, 5, 5), //the collision geometry 
    new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture('images/dicetexture.jpg')});, // material of the dice 
    5, // mass, for the plane use 0, meaning it doesnt move. 
    { restitution: .2, friction: .8 } //contact material 
); 

最後，你需要施加一個力，我找不到它的一個例子，但會在source真正的快，我發現：

// Physijs.Mesh.applyForce 
Physijs.Mesh.prototype.applyForce = function (force, offset) { 
    if (this.world) { 
     this.world.execute('applyForce', { id: this._physijs.id, force_x: force.x, force_y : force.y, force_z : force.z, x: offset.x, y: offset.y, z: offset.z }); 
    } 
}; 

兩個force和offset應該是向量。 force是方向和大小，offset是起點。

我會試試更多的與physi.js它似乎已經解決了一些問題，我一直在琢磨着。如果這仍然不能解決問題。我會舉一個例子。

爲讓它旋轉的次在預定高度的一組數字，我覺得這是一個很大的價值觀實驗的......

編輯2：

在撥弄你的貼你解釋的問題是一個未定義的變量，effect。

if (intersects.length > 0) { 
    intersects[ 0 ].applyImpulse(effect, offset); 
} 

更改爲：

if (intersects.length > 0) { 
    var effect = new THREE.Vector3(0, 100, 0); 
    var offset = new THREE.Vector3(0, 0, 0); 
    intersects[ 0 ].object.applyImpulse(effect, offset); 
} 

值的定義，但您在不同的功能定義它們。

function apply_force(){ 
    var effect = new THREE.Vector3(0, 100, 0); 
    var offset = new THREE.Vector3(0, 0, 0); 
    object.applyImpulse(effect, offset); 
} 

此功能將不會再使用，所以您不妨將其刪除。

CLICK TIMER：

if(canClick == true){ 
    //process click 
    canClick = false; 
    setTimeout(function(){canClick = true}, 5000)//5 seconds before the user can click again. 
}