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

Questions
, , ,
1

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 );

};

main();

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?

2

/cc

3

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.

4

Hey, here is my html-code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <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>

</body>
</html>
5

Can you share your glTF asset, too?

6

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.

Edit:
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)