CODEWITHSUNDEEP
javascriptthree.js
madol
madol

Reputation: 597

I don't know what the error in my three.js code means

I'm using three.js recently. I wrote the code as below, but it returns an error like this. What part should I change to make the code work without error?

  import * as THREE from "/assets/threejs/build/three.module.js"

class App {
    // 생성 초기화
    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._scens = scene;

        this._setupCamera();
        this._setupLight();
        this._setupModel();

        window.onresize = this.resize.bind(this);
        this.resize();

        requestAnimationFrame(this.render.bind(this));
    }
    
    // 카메라
    _setupCamera() {
        const width = this._divContainer.clientWidth;
        const hiehgt = this._divContainer.clientHeight;
        const camera = new THREE.PerspectiveCamera(
            75,
            width / hiehgt,
            0.1,
            100,
        )
        camera.position.z = 2
        this._camera = camera;
    }

    // 광원
    _setupLight(){
        const color = 0xffffff;
        const intensity = 1;
        const light = new THREE.DirectionalLight(color, intensity);
        light.position.set(-1, 2, 4);
        this._scens.add(light);
    }

    // 모델
    _setupModel(){
        const geometry = new THREE.BoxGeometry(1,1,1);
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );
        this._scens.add(cube);
        this._cube = cube;
    }

    // 창크기 번경
    resize(){
        const width = this._divContainer.clientWidth;
        const height = this._divContainer.clientHeight;

        this._camera.aspect = width / height;
        this._camera.updateProjectionMatrix();

        this._renderer.setSize(width, height);
    }

    // 랜더링
    render(time){
        this._renderer.render(this._scene, this._camera);
        this.update(time);
        requestAnimationFrame(this.render.bind(this));
    }

    // 업데이트
    update(time){
        time *= 0.001;
        this._cube.rotation.x = time;
        this._cube.rotation.y = time;
    }

}

window.onload = function(){
    new App(); 
}

Below is the error code 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 want to run the example without errors using the above code style, but I don't know how to solve the returned error code. Any help would be appreciated

Upvotes: 0

Views: 433

Answers (1)

M -
M -

Reputation: 28462

Cannot read properties of undefined means Three.js is trying to access a property from a variable that doesn't exist. For example:

const lala = undefined;

lala.matrixWorldAutoUpdate = true; // Error, because lala is undefined.

Make sure you check for typos. You're switching _scens with _scene and that's why one of those variables is undefined:

const scene = new THREE.Scene();
this._scens = scene;

// Error: this._scene doesn't exist.
this._renderer.render(this._scene, this._camera);

Upvotes: 1

Related Questions