How to load this model correctly

Questions
1

I get a model from https://sketchfab.com/3d-models/ftm-0970f30574d047b1976ba0aa6f2ef855.But I fail to load it,though console doesn’t show any error. I test it on chrome with VSCode plugin Live Server. Here is console output.

2
21886×127 37.7 KB

My questions are

  • I wonder what went wrong.

  • How to use MongoDB to store 3D model? Is there a tutorial?

My code is below. GLTFLoader.js is from https://github.com/mrdoob/three.js/blob/be0a6d6e55692360a39d038fd32d6800531a26b1/examples/js/loaders/GLTFLoader.js

 <script src="three.js"></script>
        <script src="GLTFLoader.js"></script>
        <script>
            let scene = new THREE.Scene();
            let camera = new THREE.PerspectiveCamera(
                75,
                window.innerWidth / window.innerHeight,
                10,
                5000
            );
            var loader = new THREE.GLTFLoader();
            loader.load(
                'scene.gltf',
                function (gltf) {
                    console.log(gltf.scene);
                    console.log(gltf.scenes);
                    // I think problem is here.
                    scene.add(gltf.scene);
                },
                undefined,
                function (error) {
                    console.error(error);
                }
            );
            camera.position.z = 100;
        </script>
2

But I fail to load it,though console doesn’t show any error.

You may need to share more details here, the model works fine. If you log something after adding the model to the scene does it get printed? Are there any errors in the browser’s network tools or JS console?

How to use MongoDB to store 3D model? Is there a tutorial?

You’ll need to find a MongoDB tutorial showing how to store binary or JSON data, and load it with whatever kind of server you are using. JavaScript running in a web browser, like three.js, cannot access any database directly, so if you have a database you need a web server. If that sounds intimidating, something like S3, Firebase, or Cloud Storage might be easier.

4

edition updated. Console log model’s scene details.

5

Your code doesn’t create a renderer or lights, and doesn’t render the scene. So the model is added to the scene, but that’s all that happens, and the scene is never displayed. You may want to review https://threejs.org/docs/#manual/en/introduction/Creating-a-scene or some of the examples.