Three.js代码报错：Cannot read properties of undefined(matrixWorldAutoUpdate)求助

使用Three.js开发时，编写代码后出现如下错误：

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.

需要在保留现有代码风格的前提下，修复错误使代码正常运行。

原始代码 #

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(); 
}

错误原因及修复方案 #

报错核心是变量名拼写错误：

• 构造函数中将场景实例赋值给了this._scens（多了一个s），但render方法调用渲染器时传入的是this._scene，导致this._scene未定义，触发读取matrixWorldAutoUpdate属性的错误。
• 另外_setupCamera方法中hiehgt是拼写错误，应为height，虽未直接引发报错，但会导致相机宽高比计算异常。

需要修改的4处代码：

1. 构造函数中修正场景变量名：

// 原代码
this._scens = scene;
// 修改为
this._scene = scene;

2. _setupLight方法中修正场景变量名：

// 原代码
this._scens.add(light);
// 修改为
this._scene.add(light);

3. _setupModel方法中修正场景变量名：

// 原代码
this._scens.add(cube);
// 修改为
this._scene.add(cube);

4. _setupCamera方法中修正高度变量名：

// 原代码
const hiehgt = this._divContainer.clientHeight;
// 修改为
const height = this._divContainer.clientHeight;

修复后的完整代码 #

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._scene = 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 height = this._divContainer.clientHeight;
        const camera = new THREE.PerspectiveCamera(
            75,
            width / height,
            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._scene.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._scene.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(); 
}

内容的提问来源于stack exchange，提问作者madol