Flask+Three.js本地网站GLB模型不显示问题排查

以下是你的代码中导致模型不显示的几个关键问题及修复方案：

1. 脚本加载与依赖缺失 #

• 你在同一个<script>标签中同时使用src属性和内部代码，会导致内部代码被忽略；且GLTFLoader未单独引入（它是Three.js的附加加载器，不属于核心库）。
• 修复：分开引入Three.js核心和GLTFLoader：

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script>
// 你的Three.js逻辑代码放在这里
</script>

2. 窗口尺寸属性错误 #

• 代码中使用了不存在的window.Width/window.Height，正确属性为window.innerWidth/window.innerHeight，错误属性会导致相机宽高比和渲染器尺寸异常。
• 修复：

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer.setSize(window.innerWidth, window.innerHeight);

3. 相机未设置位置 #

• 默认相机位于场景原点(0,0,0)，与模型位置重叠，导致无法观测到模型。需要将相机向后移动，让模型进入视野范围。
• 修复：

camera.position.z = 10; // 可根据模型尺寸调整数值

4. 变量声明语法错误 #

• const loader;属于无效声明（const变量必须初始化），应改为let loader;。

5. 模型缩放适配（可选） #

• Sketchfab下载的模型通常尺寸较大，加载后可能超出相机视野，需调整缩放比例：

function ( gltf ) {
    model = gltf.scene;
    model.scale.set(0.05, 0.05, 0.05); // 针对保时捷模型的适配缩放值
    scene.add( model );
}

修复后的完整代码示例 #

<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
    <script>
        let scene, camera, renderer, model;
        let loader;
        
        // 初始化相机
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 10;
        
        // 初始化场景与渲染器
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        
        // 加载GLB模型
        loader = new GLTFLoader();
        loader.load( "{{ url_for('static', filename='free_1975_porsche_911_930_turbo.glb') }}", 
        function ( gltf ) {
            model = gltf.scene;
            model.scale.set(0.05, 0.05, 0.05);
            scene.add( model );
        },
        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>

内容的提问来源于stack exchange，提问作者binary_psychic