ThreeJS无法设置WebGLRenderer的domElement

编程问答 2022-06-07

问题描述

在构建ThreeJS项目时，我遇到此错误：

未捕获的TypeError：无法设置未定义的属性'domElement'

在将浏览器转换为普通js之前的文件是：

index.js 

import { Scene,Webglrenderer} from 'three';
import { THREEGLTFLoader } from 'three-loaders';

var scene = new Scene();
var loader = new THREEGLTFLoader();
var renderer = Webglrenderer({antialias: true});
loader.load(
    "/models/cube.glb",function (gltf) {
        scene.add(boat)
    }
);

index.html 

<!DOCTYPE html>
<html lang="en">
    <head>
        <Meta charset="UTF-8">
        <Meta name="viewport" content="width=device-width,initial-scale=1.0"></Meta>
        <title>ThreeJS Webglrenderer</title>
    </head>
    <body>
        <div style="height: 100%; width:100%">
            <noscript>
                The page cannot be loaded because javascript is disabled...
            </noscript>
            <canvas id="container"></canvas>
        </div>
        <script src="build.js" async defer></script>
    </body>
</html>

我正在使用babel和browserify来转换文件。

解决方案： 我解决了切换到webpack的问题，并且确实有效

解决方法

从“三个”导入{Scene，WebGLRenderera}；

您的代码中有错字。应该是：

import { Scene,WebGLRenderer } from 'three';

此外，请不要使用three-loaders npm软件包。您可以像从GLTFLoader npm包中导入所有其他示例文件一样，three，如下所示：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
babeljsbrowserifybrowserifybrowserifyjavascriptthree.js