CODEWITHSUNDEEP
javascriptthree.js
KikoPayet
KikoPayet

Reputation: 11

How to create random objects pointing to many directions in three.js

I need to create a sphere by creating several cylinders and then rotating them into different directions using Three.js library. I have tried looping over 2 pie that changes the settings of the rotation axis but it didn't work. What should I do ?

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 );

Upvotes: 0

Views: 122

Answers (1)

Craig.Li
Craig.Li

Reputation: 1366

You should add cylinder.setRotationFromMatrix(cylinder.matrix); behind cylinder.matrix.makeRotationAxis( rotationAxis, theta );

Upvotes: 1

Related Questions