During the development of a ThreeJS project, I came across this particular error:
Uncaught TypeError: Cannot set property 'domElement' of undefined
The filename before being converted to regular 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 currently utilizing babel and browserify to convert the file.
solution: To resolve this issue, I switched over to webpack, and it proved to be effective