Blender创建的Mesh在Three.js中加载后无法显示的问题求助

以下是针对你代码中存在的问题及对应修复方案：

• 修复Canvas选择器错误
  原代码中document.querySelector("\".webgl\"")的选择器写法错误，多余的转义引号会导致无法找到目标canvas元素，应改为document.querySelector(".webgl")。

• 添加持续渲染循环
  模型是异步加载的，原代码仅执行一次renderer.render()，此时模型尚未加载完成，后续模型加载后无法自动触发渲染。需要通过requestAnimationFrame创建渲染循环，确保画面实时更新。

• 让相机对准模型区域
  相机设置了位置，但默认朝向为-z轴方向，若模型不在该视野范围内则无法被看到。添加camera.lookAt(scene.position)让相机看向场景中心（若模型位于中心），或根据模型实际位置调整目标点。

• 补充环境光增强照明
  仅使用点光源可能导致模型部分区域光照不足，添加环境光可确保模型各个面都能被照亮。

• 可选：检查模型缩放与位置
  Blender导出的模型可能存在缩放比例过大或位置偏移的情况，加载后可通过打印日志确认，必要时手动调整模型的缩放或位置。

修改后的完整代码：

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene  = new THREE.Scene();
const loader = new GLTFLoader();

loader.load(
    'scene.glb',
    function ( gltf ) {
        scene.add( gltf.scene );
        // 可选：打印模型位置和缩放，按需调整
        console.log('模型位置:', gltf.scene.position);
        console.log('模型缩放:', gltf.scene.scale);
        // 示例：若模型过大，缩小至1/10
        // gltf.scene.scale.set(0.1, 0.1, 0.1);
    },
    function ( xhr ) {
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    function ( error ) {
        console.log( '加载错误:', error );
    }
);

// 点光源
const light = new THREE.PointLight(0xffffff, 9, 100, 1.7);
light.position.set(1.53, 2.627, 1.217);
scene.add(light);

// 环境光补充照明
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
 
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight);
camera.position.set(-4.288, 24.327, 24.327);
// 让相机看向场景中心
camera.lookAt(scene.position);
scene.add(camera);

// 修复Canvas选择器
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGL1Renderer({canvas});
renderer.setSize(window.innerWidth, window.innerHeight);

// 窗口大小适配
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

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