Three.js加载GLTF模型无法旋转且无报错问题求助

• 修复模型操作对象取值逻辑
  不要直接取gltf.scene.children[0]作为操作对象，部分glTF格式模型的根节点下首个子节点为空分组，直接操作整个加载完成的场景节点更稳妥。
• 移除重复的渲染循环调用
  你在全局init()执行后、以及glTF加载完成回调中各调用了一次animate()，会启动两个重复的渲染循环，删掉全局位置的animate()调用即可。
• 删除无效的控制事件绑定
  controls.addEventListener('change')未传入回调函数属于无效代码，你已配置持续运行的渲染循环，不需要额外绑定控制变更事件，直接删除该行即可。
• 调整环境光参数
  当前环境光强度设为0.001几乎没有照明效果，会导致模型视觉上不可见，调整为合理数值即可。
• 可选优化：在渲染循环开头添加controls.update()，保证轨道控制的操作能实时同步到渲染结果中。

修正后完整代码 #

let scene, camera, renderer, controls, car;

function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x000000);

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
    camera.rotation.y = 45 / 180 * Math.PI;
    camera.position.x = 40;
    camera.position.y = 0;
    camera.position.z = 40;

    const hlight = new THREE.AmbientLight(0x404040, 0.5);
    scene.add(hlight);

    const directionalLight = new THREE.DirectionalLight(0x333333, 10);
    directionalLight.position.set(1, 1, 0);
    directionalLight.castShadow = true;
    scene.add(directionalLight);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

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

    let loader = new THREE.GLTFLoader();
    loader.load('./5/3D_model.gltf', function (gltf) {
        car = gltf.scene;
        car.scale.set(10, 10, 10);
        scene.add(car);
        animate();
    });
}
function animate() {
    controls.update();
    if (car) car.rotation.y += 0.01; // 原数值0.3转速过快，可按需调整
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}
init();

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