Recently, I have been working with three.js and wrote the following code. However, I encountered an error. Can anyone help me identify the part that needs to be changed to make the code error-free?
import * as THREE from "/assets/threejs/build/three.module.js"
class App {
// Initialization
constructor(){
const divContainer = document.querySelector("#webgl-container");
this._divContainer = divContainer;
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setPixelRatio(window.devicePixelRatio);
divContainer.appendChild(renderer.domElement);
this._renderer = renderer;
const scene = new THREE.Scene();
this._scene = scene;
this._setupCamera();
this._setupLight();
this._setupModel();
window.onresize = this.resize.bind(this);
this.resize();
requestAnimationFrame(this.render.bind(this));
}
// Camera setup
_setupCamera() {
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
const camera = new THREE.PerspectiveCamera(
75,
width / height,
0.1,
100,
)
camera.position.z = 2;
this._camera = camera;
}
// Lighting setup
_setupLight(){
const color = 0xffffff;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
this._scene.add(light);
}
// Model setup
_setupModel(){
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
this._scene.add(cube);
this._cube = cube;
}
// Resize window
resize(){
const width = this._divContainer.clientWidth;
const height = this._divContainer.clientHeight;
this._camera.aspect = width / height;
this._camera.updateProjectionMatrix();
this._renderer.setSize(width, height);
}
// Rendering
render(time){
this._renderer.render(this._scene, this._camera);
this.update(time);
requestAnimationFrame(this.render.bind(this));
}
// Update
update(time){
time *= 0.001;
this._cube.rotation.x = time;
this._cube.rotation.y = time;
}
}
window.onload = function(){
new App();
}
Here is the error code that was returned:
three.module.js:27904 Uncaught TypeError: Cannot read properties of undefined (reading 'matrixWorldAutoUpdate')
at WebGLRenderer.render (three.module.js:27904:14)
at App.render (main.js:72:24)
WebGLRenderer.render @ three.module.js:27904
render @ main.js:72
requestAnimationFrame (async)
App @ main.js:24
window.onload @ main.js:87
load (async)
(anonymous) @ main.js:86
temp:1 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I am looking to resolve the error in my code to run the example smoothly. Any assistance would be greatly appreciated.