如何在three.js中加载glb文件答案

【问题标题】：How to load a glb file in three.js如何在three.js中加载glb文件
【发布时间】：2022-09-23 16:14:01
【问题描述】：

我的目标是在本地运行一个网站，后端写在flask中，前端使用three.js，一切正常，因为我在控制台（devtools）中看不到任何错误，但由于某种原因它没有显示模型，我有相机，场景和渲染，我还加载了模型并添加到场景中

<body>
    <script src=\"https://threejs.org/build/three.js\"  >
        import * as THREE from \'three\';
        let scene, camera, renderer, stats, model;
        const loader;
        camera = new THREE.PerspectiveCamera(75, window.Width / window.Height, 0.1, 1000);
        
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.Width, window.Height);

        document.body.appendChild(renderer.domElement);
        loader = new GLTFLoader();
        loader.load( \"{{ url_for(\'static\', filename=\'free_1975_porsche_911_930_turbo.glb\') }}\", 
        function ( gltf ) {
            scene.add( gltf.scene );
            gltf.animations; // Array<THREE.AnimationClip>
            gltf.scene; // THREE.Group
            gltf.scenes; // Array<THREE.Group>
            gltf.cameras; // Array<THREE.Camera>
            gltf.asset;
        },
        function ( xhr ) {
            console.log( ( xhr.loaded / xhr.total * 100 ) + \'% loaded\' );
        },
        function ( error ) {
            console.error( error );
        } 
        );
        function animate()
        {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
        };
        animate();
    </script>
</body>

为什么这段代码不在浏览器中显示模型

来自sketchfab的模型

标签： three.js

【解决方案1】：

您是否尝试更改相机在 Z 轴上的位置？

camera.position.z = 4;(or even further away)

默认情况下，摄像机位于 X、Y、Z 上的 0、0、0 位置，即在场景的中间，如果您的模型恰好很大，则摄像机在其中，您看不到它。

您还可以启用Orbit Controls，这样您就可以围绕场景旋转，也许您会发现您的模型。

【讨论】：