Gltf-loader no error but black screen

Questions
1

Hello, i have a probleme with a gltf file.
I can read it inside https://gltf-viewer.donmccurdy.com/

image
image407×533 74.3 KB

This file is build with BLENDER.

image
image880×609 174 KB

The export give a only file export.gltf
See the attached part
export_x3d.7z (3.1 MB)

I’m glad if you can help me with this mistake

2

Hi!
Do you have lights in your scene? Is your camera looking at the model? Any typos in your code?

1 Like
3

If the model works in https://gltf-viewer.donmccurdy.com/ then three.js supports it, and the problem is likely to be in your code. You’ll need to share your code and any errors you see in the JS console for us to help.

2 Likes
4

see my code

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>three.js  - GLTF loader</title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

        <link type="text/css" rel="stylesheet" href="/css/main.css">

    </head>

    <body>

        <script type="module">

            import * as THREE from '../build/three.module.js';

            import Stats from './jsm/libs/stats.module.js';

            import { OrbitControls } from './jsm/controls/OrbitControls.js';

            import { FBXLoader } from './jsm/loaders/FBXLoader.js';

            import dat from './jsm/libs/dat.gui.module.js';

            import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';

            var container, stats, controls;

            var camera, scene, renderer, light;

            var clock = new THREE.Clock();

            var mixer;

            init();

            animate();

            function init() {

                container = document.createElement( 'div' );

                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );

                camera.position.set( 100, 200, 300 );

                scene = new THREE.Scene();

                scene.background = new THREE.Color( 0xa0a0a0 );

                scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

                light = new THREE.HemisphereLight( 0xffffff, 0x444444 );

                light.position.set( 0, 200, 0 );

                scene.add( light );

                light = new THREE.DirectionalLight( 0xffffff );

                light.position.set( 0, 200, 100 );

                light.castShadow = true;

                light.shadow.camera.top = 180;

                light.shadow.camera.bottom = - 100;

                light.shadow.camera.left = - 120;

                light.shadow.camera.right = 120;

                scene.add( light );

                // scene.add( new CameraHelper( light.shadow.camera ) );

                // ground

                var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );

                mesh.rotation.x = - Math.PI / 2;

                mesh.receiveShadow = true;

                scene.add( mesh );

                var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );

                grid.material.opacity = 0.2;

                grid.material.transparent = true;

                scene.add( grid );

                //model GLTF

                var gltfLoader = new GLTFLoader();

                gltfLoader.load('/models/gltf/export_x3d.gltf', (gltf) => {

                var root = gltf.scene;

                console.log(gltf);

                scene.add(root);

                } );

                renderer = new THREE.WebGLRenderer( { antialias: true } );

                renderer.setPixelRatio( window.devicePixelRatio );

                renderer.setSize( window.innerWidth, window.innerHeight );

                renderer.shadowMap.enabled = true;

                container.appendChild( renderer.domElement );

                controls = new OrbitControls( camera, renderer.domElement );

                controls.target.set( 0, 100, 0 );

                controls.update();

                window.addEventListener( 'resize', onWindowResize, false );

                // stats

                stats = new Stats();

                container.appendChild( stats.dom );

            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;

                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                var delta = clock.getDelta();

                if ( mixer ) mixer.update( delta );

                renderer.render( scene, camera );

                stats.update();

            }

        </script>

    </body>

</html>
5

i see a strange thing:
the folder /models/ not appear in the source console.

image

6

ok i change some details in my code:

i replace
gltfLoader.load('models/gltf/export_x3d.gltf', (gltf) => {
by
gltfLoader.load('models/gltf/export_x3d.gltf', function (gltf) {

And the scale of the model is to small, i not ajust fit automatcaly, so a add a scale of 200% to see something.

//model GLTF

                var modelgl

                var gltfLoader = new GLTFLoader();

                gltfLoader.load('models/gltf/export_x3d.gltf', function (gltf) {

                    var modelgl = gltf.scene;

                    modelgl.scale.set(200,200,200)

                    console.log(modelgl);

                    scene.add(modelgl);

                } );

image
image453×512 65.9 KB