类型错误：“domElement”是只读的 |三.WebGL渲染器

Question

我在尝试初始化 WebGLRenderer 时遇到错误：
（我删除了一些不必要的行）

import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module.js";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js";


async function load() {
    // THREE JS
    window.scene = new THREE.Scene();
    window.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // Loader
    window.loader = new GLTFLoader();
    window.loader.load(
        "/assets/shotgun/scene.gltf",
        function (gltf) {
            const model = gltf.scene;
            scene.add(model);
            window.shotgun = model;
        },
        function (xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        function (error) {
            console.error(error);
        }
    );

    // Renderer   Getting error here
    window.renderer = THREE.WebGLRenderer({
        canvas: document.getElementById("shotgun"),
        antialias: true,
        alpha: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    camera.position.set( 10, 0, 0 );

    // Light
    var light = new THREE.PointLight(0xffffff);
    light.position.set(-5, 10, 10);
    scene.add(light);

    // Help
    window.ctrl = new OrbitControls(camera, renderer.domElement);
    scene.add(new THREE.PointLightHelper(light), new THREE.GridHelper(200, 50));

}

load().then(() => {
    document.getElementById("loading").animate({ opacity: 0 }, { fill: "forwards", duration: 1000 });
    render();
});

DevTools 说此行发生错误：

function WebGLRenderer(parameters) {
  parameters = parameters || {};
  const _canvas2 = parameters.canvas !== void 0 ? parameters.canvas : createCanvasElement() // ...
  let currentRenderList = null;
  let currentRenderState = null;
  const renderListStack = [];
  const renderStateStack = [];
  this.domElement = _canvas2; // <----
  this.debug = {
    checkShaderErrors: true
  };
  this.autoClear = true;
  this.autoClearColor = true;
  this.autoClearDepth = true;
  ...
}

另外，如何在模型加载时暂停代码执行？ （不将其放入loader的函数中）

“看来您的帖子主要是代码；请添加更多详细信息。”
比如我还可以添加什么？

Answer 1

您只是缺少

new

关键字：

// window.renderer = THREE.WebGLRenderer({
   window.renderer = new THREE.WebGLRenderer({