Adding a star to the scene caused all objects in the scene to turn white and the perspective of the objects to glitch. Switching the materialStar
to new THREE.MeshBasicMaterial
fixed the rendering issue. It appears that the problem stems from having multiple and conflicting material types for the objects, even though the variables were initialized with different names.
// TORUS
const geometry = new THREE.TorusGeometry(10, 3, 16, 100);
const materialTorus = new THREE.MeshStandardMaterial({color: 0xFF6347}); // Setting material type for torus
const torus = new THREE.Mesh(geometry, materialTorus);
scene.add(torus);
...
function addStar() {
// STAR
const geometry = new THREE.SphereGeometry(0.25, 24, 24);
const materialStar = new THREE.MeshStandardMaterial({color: 0xffffff}); // Setting material type for star
const star = new THREE.Mesh(geometry, materialStar);
const [x, y, z] = Array(3).fill(null).map(() => THREE.MathUtils.randFloatSpread(100)); // Generating random star positions
star.position.set(x,y,z);
scene.add(star);
}
Array(200).fill(null).forEach(addStar); // Creating 200 stars