package.json

{
  "name": "gltf-loader-code",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "three": "0.110.0"
  },
  "devDependencies": {
    "html-webpack-plugin": "4.5.0",
    "ts-loader": "6.2.2",
    "typescript": "4.3.5",
    "webpack": "4.42.1",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "3.11.2"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "noEmit": true,
        "module": "esnext",
        "target": "es6",
        "lib": ["ES2019","dom"],
        "sourceMap": true,
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "skipLibCheck": true,
        "suppressImplicitAnyIndexErrors": true,
        "experimentalDecorators": true,
        "noUnusedLocals": true,
        "downlevelIteration": true,
        "strict": true,
        "strictPropertyInitialization": false,
        "allowSyntheticDefaultImports": true,
        "skipDefaultLibCheck": true
    },
    "exclude": [
        "node_modules",
    ]
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');

module.exports = {
    devtool: 'source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve('./index.html')
        })
    ],
    resolve: {
        extensions: ['.ts', '.js']
    },
    module:{
            rules:[
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true,
                        experimentalWatchApi: true,
                    }
                },
            ],
        },
    devServer: {
        compress: true,
        stats: {
            assets: false,
            builtAt: true,
            modules: false,
            entrypoints: false,
            contentBase: resolve(__dirname, './'),
            /**
             * ts-node transpileOnly: true
             * if you enable this option, webpack 4 will give you "export not found" warnings any time you re-export a type:
             * The reason this happens is that when typescript doesn't do a full type check, 
             * it does not have enough information to determine whether an imported name is a type or not, 
             * so when the name is then exported, typescript has no choice but to emit the export. 
             * Fortunately, the extraneous export should not be harmful, so you can just suppress these warnings:
             */
            // warningsFilter: /export .* was not found in/
        },
    },
};

src/index.ts

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

// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 150;
camera.position.z = 50;
camera.position.y= 100;

// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xeaeaea);

// 添加燈光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambientLight);


// 添加控制器
new OrbitControls(camera, document.body);

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

const loader = new GLTFLoader();
loader.load('./t.glb', (gltf) => {
    scene.add(gltf.scene);
});