While experimenting with ThreeJS to create some animations, I encountered an error message that says "Uncaught TypeError: Cannot read properties of undefined (reading 'render')". I am completely lost on what this error means as this is my first time delving into the world of ThreeJS and I have limited knowledge about it.
<body>
<script src="main.js" type="module" defer></script>
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ce8f4eef9f9dcacb2adaea8b2ac">[email protected]</a>/build/three.module.js';
let scene, camera, renderer, starGeo, stars;
function init() {
//create scene object
const scene = new THREE.Scene();
//setup camera with facing upward
const camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 1;
camera.rotation.x = Math.PI/2;
//setup renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
starGeo = new THREE.Geometry();
for(let i=0;i<6000;i++) {
let star = new THREE.Vector3(
Math.random() * 600 - 300,
Math.random() * 600 - 300,
Math.random() * 600 - 300
);
star.velocity = 0;
star.acceleration = 0.02;
starGeo.vertices.push(star);
}
let sprite = new THREE.TextureLoader().load( 'star.png' );
let starMaterial = new THREE.PointsMaterial({
color: 0xaaaaaa,
size: 0.7,
map: sprite
});
stars = new THREE.Points(starGeo,starMaterial);
scene.add(stars);
animate();
}
//rendering loop
function animate() {
starGeo.vertices.forEach(p => {
p.velocity += p.acceleration
p.y -= p.velocity;
if (p.y < -200) {
p.y = 200;
p.velocity = 0;
}
});
starGeo.verticesNeedUpdate = true;
stars.rotation.y +=0.002;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
init();
</script>
Thank you!