在 three.js 中加载 "glb model" 时遇到问题

Question

我正在尝试将模型加载到我的场景中。不幸的是到目前为止没有成功。我看到一个空的场景，而不是模型。当我插入一个 boxgeometry 时，它也可以被看到，所以 three.js 工作没有任何问题。我尝试从示例文件“Stork.glb”加载模型。我已将所有内容减少到最低限度。我现在看不出它可能是什么。我必须以不同方式集成 GLTFLoader 吗？

index.js

import Main from "./main"; 
new Main();

main.js

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



class Main {
    constructor(){
        this.init();
        this.animate(); 
    }
    
    
    init(){
        this.renderer = new THREE.WebGLRenderer( { antialias: true } );
        this.renderer.setPixelRatio( window.devicePixelRatio ); 
        this.renderer.shadowMap.enabled = true; 
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.autoClear = false;
        
        this.container = document.getElementById('container');
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
        this.container.appendChild( this.renderer.domElement );

        this.aspect = this.container.clientWidth / this.container.clientHeight; 
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color( 0x555555 );
        
        this.camera = new THREE.PerspectiveCamera( 45, this.aspect, .1, 10000 );
        this.camera.position.set(0, 0, 300);
    
        this.controls = new OrbitControls( this.camera, this.renderer.domElement );
        this.controls.enableZoom = true;
        this.controls.enabled = true;
        this.controls.target.set(0, 0, 0);
    
    //-------------------------------------------------------------------------------------------------
        
        var light = new THREE.AmbientLight(0xffffff); 
        this.scene.add(light);
        
      
        const loader = new GLTFLoader();
        loader.load("models/Stork.glb", function(gltf){     
            this.scene.add(gltf.scene); 
        });
    
    
    }//end init
    
    
    animate(){
        requestAnimationFrame( this.animate.bind(this) );  
        this.render();
    }//end animate
    
    
    render(){
        
        this.controls.update();
        this.camera.updateMatrixWorld();
        this.camera.updateProjectionMatrix(); 
    
        this.renderer.render(this.scene, this.camera); 
    
    }//end render
    


}//end class


export default Main;

文件夹布局：

mainfolder
|
|-index.html
|-webpack.config.js
|-package.json
|-build
|-src
|   |-index.js
|   |-main.js
|
|-lib
|   |-three
|
|-models
    |
  Stork.glb

webpack.config.js

const path = require('path'); 

module.exports = { 
mode: 'development',
//devtool: "none",
//mode: 'production',
entry: './src/index.js', 
output: { 
path: path.resolve(__dirname, 'build'), 
filename: 'bundle.js' },

//plugins: [new HtmlWebpackPlugin()],

    module: {   
        rules: [        
            {   
                test: /\.(glb)$/i, 
                use: [ { loader: 'file-loader', options: { outputPath: 'models/' } } ]
                
            },              
        ],              
    },


};//end module.exports

Answer 1

只是一个猜测，但由于您在 class 中并使用 es5 匿名函数，您的 this 关键字可能不是您认为的那样。也许使用箭头函数的词法特性可以解决您的问题？

        loader.load("models/Stork.glb", gltf => {     
            this.scene.add(gltf.scene); 
        });

Answer 2

问题是我没有使用本地主机加载代码。我试着用浏览器打开它。如果我使用本地主机，它工作正常

在 three.js 中加载 "glb model" 时遇到问题

Trouble with loading a "glb model" in three.js

javascript

three.js