So first I created the renderer with the
WebGLRenderer()
constructor and I try to add the renderer to the body tag in the DOM with
document.body.appendChild(renderer.domElement);
and I get this
error
and I don’t know what to do:
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at ebWYT.three (index.js:15:15)
at newRequire (index.739bf03c.js:71:24)
at index.739bf03c.js:122:5
at index.739bf03c.js:145:3
ebWYT.three @ index.js:15
newRequire @ index.739bf03c.js:71
(anonymous) @ index.739bf03c.js:122
(anonymous) @ index.739bf03c.js:145
I am using parcel as well and I deleted the .parcel-cache and dist folders and ran npx parcel ./src/index.html to bundle the app again and I am still getting this error. Please someone tell me what I am doing wrong. Here is my code:
index.html:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Solar System</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<script src="./js/index.js" type="module"></script>
</body>
</html>
index.js:
import * as THREE from 'three';
// initialize renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domELement);
index.css
body {
margin: 0;
Nevermind. It’s the ‘L’ in ‘domElement’. I have been stuck on this for an embarassing amount of time.
