He estado trabajando en un proyecto personal mío usando Three JS como mi renderizador principal de objetos 3D y quería generar esferas aleatoriamente en coordenadas x, y y z aleatorias con un rango específico, pude hacerlo, pero ahora necesita que cada uno de estos objetos generados aleatoriamente tenga una velocidad de rotación colocada aleatoriamente a lo largo de sus ejes xy y z en un rango de 0,005 a -0,005. Pero no tengo idea de cómo abordar esto y cualquier ayuda sería muy apreciada, él es mi código de generación aleatoria y también el código para animar objetos 3D con los que ya he tratado:
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();Puede almacenar el valor aleatorio de rotación en la creación y animarlo en cada renderizado.
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; } Hice un codepen aquí:
https://codepen.io/cdeep/pen/OJjVXqW