Can't add canvas inside a div using three.js - three.js

Question

Hello I'm trying to add canvas with a sense using three.js I have
<div id="earth3D" bind:this={earth3DCanvas} />
and in order to add canvase in my js section, I do
let earth3DCanvas;
onMount(() => {
const child = document.createElement(renderer.domElement);
earth3DCanvas.appendChild(child);
});
but for some reason I'm getting this error and I have no idea what it means.
VM2002:1 Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('[object HTMLCanvasElement]') is not a valid name.
at HTMLDocument.createElement (<anonymous>:1:1536)
at http://localhost:5000/build/bundle.js:51519:30
at run (http://localhost:5000/build/bundle.js:14:16)
at Array.map (<anonymous>)
at http://localhost:5000/build/bundle.js:430:49
at flush (http://localhost:5000/build/bundle.js:245:21)
at init (http://localhost:5000/build/bundle.js:520:13)
at new App (http://localhost:5000/build/bundle.js:51598:7)
at http://localhost:5000/build/bundle.js:51609:17
at http://localhost:5000/build/bundle.js:51618:3

Answer 1

Bind a container first then onMount add the renderer to this container
<script>
import { onMount } from 'svelte';
let container;
onMount(async () => {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement);
});
</script>
<div id="container" bind:this={container} />
Here is a working repl
https://svelte.dev/repl/446c6476fc0444b19ec95c0044564b96?version=3.44.2
here is the fix if you want to use a conditional statement
<script>
const initContainer = (node) => {
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
node.appendChild(renderer.domElement);
}
</script>
{#if condition}
<div id="container" use:initContainer />
{/if}
here is a working repl using this approach
https://svelte.dev/repl/446c6476fc0444b19ec95c0044564b96?version=3.44.2

Answer 2

Document.createElement() expects a tag name as parameter (so a string like 'canvas' or 'div'), but you're passing it an HTMLCanvasElement object instead.
It's like you were attempting to recreate an already existing canvas.
I am not sure what your actual goal is, but if you want to create and append a brand new canvas, then you would do:
onMount(() => {
const child = document.createElement('canvas');
earth3DCanvas.appendChild(child);
});
If you instead want to append the canvas referred to by renderer.domElement to your container div:
onMount(() => {
earth3DCanvas.appendChild(renderer.domElement);
});
Note that if the canvas was already part of the DOM (which seems to be the case given the renderer.domElement name?), then it will be moved, not duplicated.