使用 GLTFLoader 加载的模型未正确渲染

Question

我已经使用 gtlf 加载器在 Threejs 中导入了我的测试模型，但结果完全是平的，而不是它应该的样子。它在 Threejs 编辑器中运行良好。请帮忙

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(70, innerHeight, innerWidth, 0.1, 1000);
camera.position.set = ( 0, 0, 0 );

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

const light = new THREE.DirectionalLight(0xffffff, 1);
    scene.add(light);

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


const loader = new GLTFLoader();
loader.load( './scene.glb' , function (gltf) {
    console.log(gltf);   
    const model = gltf.scene;
    scene.add( model );
}, function (xhr){
    console.log((xhr.loaded/xhr.total * 100) + "% loaded")
}, function (error){
    console.log('model not loaded')
}
);

function animate(){
    requestAnimationFrame( animate );
    controls.update();
    renderer.render(scene, camera);
}
animate();

Answer 1

const 相机 = new THREE.PerspectiveCamera(70,innerHeight,innerWidth,0.1,1000);

相机设置不正确。您应用五个参数而不是四个。像这样尝试一下：

const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);