ThreeJS Cannot set domElement of WebGLRenderer

user_14493187 0
Viewed 496

While building a ThreeJS project I encounter this error:

Uncaught TypeError: Cannot set property 'domElement' of undefined

The file before converting to normal js for browsers is:

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>

I'm using babel and browserify to convert the file.

solution: I solved the problem switching to webpack, and it actually works

browserify babeljs three.js javascript
1 Answers

import { Scene, WebGLRenderera} from 'three';

You have a typo in your code. It should be:

import { Scene, WebGLRenderer } from 'three';

Besides, please don't use the three-loaders npm package. You can import GLTFLoader like all other example files from the three npm package like so:

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