Model is not added to the canvas or is it not displayed?

Hey there, I need your help. I’m trying to add my model to a canvas I’ve added to the html-document. But the following code doesn’t work:

function main() {
    const container = document.querySelector( "#machine-model" );
    let height = container.offsetHeight;                    // Offset height = element + padding + border + scrollbar
    let width = container.offsetWidth;

    const fov = 75;
    const aspect = width / height;
    const near = 0.1;
    const far = 5;
    const camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
    camera.position.x = 8.3;
    camera.position.y = 11.7;
    camera.position.z = -8;
    camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xFFFFFF );         // changes background color from black to white

    const ambiLight = new THREE.AmbientLight( 0xFFFFFF, 0.5 );
    scene.add( ambiLight );
    const spotLight = new THREE.SpotLight( 0xFFFFFF, 0.6 );
    spotLight.position.set( 13.6, 20.1, -13.9 );
    spotLight.castShadow = true;
    scene.add( spotLight );

    const gltfLoader = new THREE.GLTFLoader();
    gltfLoader.load( "model/M-62300-00-811-0_002.glb", function( gltf ) {

        const model = gltf.scene;
        model.rotateX( -Math.PI/2 );
        console.log( model );
        scene.add( model );

    const renderer = new THREE.WebGLRenderer( { canvas: container, antialias: true, alpha: true } );       // alpha = true -> alpha = 0
    renderer.setSize( width, height );

    function render() {

        renderer.render( scene, camera );

        requestAnimationFrame( render );


    requestAnimationFrame( render );



If I add the id of my canvas to the canvas parameter of the renderer, I don’t need to do it with appendChild, right?


When the canvas is already part of the DOM, then yes.

Is your element with ID machine-model really a canvas? Since you name it container, it’s maybe a div or something similar.

BTW: Ideally you demonstrate the issue with a live example. Without sharing the complete code (e.g. your imports are missing) as well as all assets it is not possible to properly investigate the issue.

Hey, here is my html-code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <canvas id="machine-model"></canvas>

    <script type="text/javascript" src="lib/three.min.js"></script>
    <script type="text/javascript" src="lib/GLTFLoader.js"></script>
    <script type="text/javascript" src="src/main.js"></script>


Can you share your glTF asset, too?

Like I said the last time on stackoverflow this isn’t possible. But what I can say is, that it worked without adding a canvas to the html document.

If I log the canvas i get: < canvas id=“machine-model” data-engine=“three.js r143” width=“1536” height=“722” style=“width: 1536px; height: 722px;”> (I added the whitespaces)