如何将threeJS对象附加到另一个对象?

时间:2018-05-16 10:34:57

标签: javascript three.js

所以,我一直在使用threeJS进行3自由度直升机模拟(https://www.quanser.com/products/3-dof-helicopter/),但是我被困在一个简单的事情上,这是我到目前为止所做的:

enter image description here

我想将前部连接到杆上,以便当杆旋转时,围绕x或y或z轴,前部随之旋转。但是前部也应该能够在自己的轴上旋转。

这是我提出的代码:

function threedof(scene) {
    motor = new THREE.CylinderGeometry( 2, 2, 2, 64);
    var material = new THREE.MeshPhongMaterial({color: 0xFF0000});
    mfM = new THREE.Mesh( motor );
    //scene.add( mfM );
    mfM.position.x = 10;
    mfM.rotation.x = PI/2;
    mbM = new THREE.Mesh( motor );
    //scene.add( mbM );
    mbM.position.x = 10;
    mbM.position.y = 10;
    mbM.rotation.x = PI/2;
    rod = new THREE.CylinderGeometry(0.5, 0.5, 10, 64);
    motorRod = new THREE.Mesh( rod );
    //scene.add( motorRod );
    motorRod.position.x = 10;
    motorRod.position.y = 5;
    motorRod.rotation.z =  2*PI;
    bodyRod = new THREE.CylinderGeometry( 0.5, 0.5, 25, 3);
    bodyRod.center();
    var frontGeo = new THREE.Geometry();
    mfM.updateMatrix();
    frontGeo.merge(mfM.geometry, mfM.matrix);
    mbM.updateMatrix();
    frontGeo.merge(mbM.geometry, mbM.matrix);
    motorRod.updateMatrix();
    frontGeo.merge(motorRod.geometry, motorRod.matrix);
    frontGeo.center();
    this.front = new THREE.Mesh(frontGeo, material);
    scene.add(this.front);
    this.rod = new THREE.Mesh(bodyRod, material);
    this.rod.rotation.z = PI/2;
    this.rod.position.x = -12;
    this.rod.position.y = 0;
    this.rod.updateMatrixWorld(true);
    scene.add(this.rod);
    this.rodEnd = new THREE.Vector3( 0, 0, 0 );
    //scene.add(this.rodEnd);
    this.rotateRODy = function(angle) {
        this.rod.rotation.y = angle;
        this.rod.updateMatrix();
        this.rod.updateMatrixWorld();
        position = new THREE.Vector3();
        position.setFromMatrixPosition(this.rod.matrix);
        position = this.rod.localToWorld(position);
        this.front.position.x = position.x;
        this.front.position.y = position.y;
        this.front.position.z = position.z;
    }
}

在animate中调用函数rotateRODy:

function animate() {

    requestAnimationFrame( animate );
    threeDOF.front.rotation.x += 0.01;
    threeDOF.rotateRODy(threeDOF.rod.rotation.y + 0.01);
    renderer.render( scene, camera );

}

但它不起作用。任何帮助将不胜感激。

0 个答案:

没有答案