I have been working on a personal project of mine using Three JS as my main 3d object renderer and I wanted to randomly generate spheres at random x, y, and z coordinates with a specified range, I was able to do so, but now I need each of these randomly generated objects to have a randomly placed rotation speed along its x y and z from a range of 0.005 to -0.005. But no clue how to approach this and any help would be greatly appreciated, he is my random generation code, and also the code to animate 3d objects I have already dealt with:
function randomStar(){
const geometry = new THREE.SphereGeometry(0.25, 24, 24);
const starMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: false});
const star = new THREE.Mesh(geometry, starMaterial);
const [x,y,z] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(150));
star.position.set(x,y,z);
star.rotation.x += 0.01;
star.rotation.y += 0.01;
scene.add(star);
}
Array(350).fill().forEach(randomStar);
function animate() {
requestAnimationFrame( animate );
torus.rotation.y += 0.005;
torus.rotation.x += 0.005
torusOne.rotation.x += 0.002
torusOne.rotation.y += 0.005;
torusTwo.rotation.y+= 0.005;
torusTwo.rotation.x += 0.002
globe.rotation.y += 0.001
// controls.update();
renderer.render(scene, camera);
}
animate();
You could store the random value of rotation on creation and animate it on each render.
star.userData.rx = Math.random() * 0.01 - 0.005;
star.userData.ry = Math.random() * 0.01 - 0.005;
star.userData.rz = Math.random() * 0.01 - 0.005;
...
animate() {
star.rotation.x += star.userData.rx;
star.rotation.y += star.userData.ry;
star.rotation.z += star.userData.rz;
}
Made a codepen here:
https://codepen.io/cdeep/pen/OJjVXqW