I have a threejs scene, created in typescript in an Angular app. I have a light, camera, and a torus knot. The torus knot rotates.
I added a starfield with this function
private scene: THREE.Scene;
private stars: THREE.Group;
addStar = () => {
const geometry = new THREE.SphereGeometry(0.25, 24, 24);
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
emissive: 0xffffff,
emissiveIntensity: 1,
roughness: 0,
metalness: 0.5
});
const star = new THREE.Mesh(geometry, material);
const [x, y, z] = Array(3)
.fill(undefined)
.map(() => THREE.MathUtils.randFloatSpread(100));
star.position.set(x, y, z);
this.stars = new THREE.Group();
this.stars.add(star);
this.scene.add(this.stars);
};
Then, in my createScene function I call it
Array(200).fill(undefined).forEach(this.addStar);
and 200 stars are indeed added to my scene, at random locations as expected.
However, in my animate function I am trying to rotate the start group around its center
this.stars.rotation.y += 0.005;
but I only see 1 star moving. What did I miss?