导入GLTFLoader只显示白屏

Question

我已经开始为我的项目学习 Three.js，但似乎当我尝试导入我的 glb 模型（从搅拌机导出）时，按照 Threejs 文档中的说明使用 Vite 托管在本地主机中只会导致白屏。我将附上下面的代码。脚本文件与 3d 文件位于同一根目录中。我已经在 gtlf 查看器中测试了 3d 文件，它工作正常。任何帮助都感激不尽。 [![控制台日志][1]][1]

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

let scene;

const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set( 0, 0, 5)

const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xA3A3A3);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

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

const loader = new GLTFLoader();
loader.load( '/testmodel.glb', function ( gltf ) {
    const model = gltf.scene;
    scene.add( model );
    model.scale.set(100, 100, 100)

}, undefined, function ( error ) {

    console.error( error );

} ); ```


  [1]: https://i.stack.imgur.com/4qBM9.png

Answer 1

您没有初始化

scene

。也许这会解决您的问题。

请记住，即使您正确渲染了所有内容，您也可能看不到模型……因为它太大了。稍后尝试少玩

scale

。

const scene = new THREE.Scene();

https://thirdjs.org/docs/#manual/en/introduction/Creating-a-scene