如何在three.js中创建指向多个方向的随机对象

时间:2017-02-25 23:39:22

标签: javascript three.js

我需要通过创建几个圆柱创建一个球体,然后使用Three.js库将它们旋转到不同的方向。我试过循环2饼,改变旋转轴的设置,但它不起作用。我该怎么办?

var cylinder;

var cylinderMaterial    = new THREE.MeshPhongMaterial(
    { color: 0x5500DD,
        specular: 0xD1F5FD,
        shininess: 100 } );

var cylinderGeo = new THREE.CylinderGeometry( 3, 3, 500, 32 );

var cylinder = new THREE.Mesh( cylinderGeo, cylinderMaterial );


var untransformedCylinder = cylinder.clone();
console.log("Untransformed cylinder matrix:")
console.log(untransformedCylinder.matrix); 
scene.add(untransformedCylinder);


var maxCorner = new THREE.Vector3(  1, 1, 1 );
var minCorner = new THREE.Vector3( -1, -1, -1 );

var cylAxis = new THREE.Vector3().subVectors( maxCorner, minCorner );


cylAxis.normalize();

var theta = Math.acos( cylAxis.y );

var rotationAxis = new THREE.Vector3(1, 0, 0);

rotationAxis.normalize();

cylinder.matrixAutoUpdate = false;

cylinder.matrix.makeRotationAxis( rotationAxis, theta );

console.log("Theta: " + theta);
console.log("  cos: " + Math.cos(theta));
console.log("  sin: " + Math.sin(theta));

console.log("Transformed cylinder matrix:")
console.log(cylinder.matrix); 

scene.add( cylinder );

1 个答案:

答案 0 :(得分:1)

您应该在cylinder.setRotationFromMatrix(cylinder.matrix);

后面添加cylinder.matrix.makeRotationAxis( rotationAxis, theta );