用Webpack Three.js加载GLB模型

Webpack是一个现代化的静态模块打包工具，它可以将多个模块打包成一个或多个文件，以便在浏览器中加载。Three.js是一个用于创建和展示3D图形的JavaScript库，它提供了丰富的功能和API，可以轻松地在Web上创建交互式的3D场景。GLB是一种基于二进制的3D模型文件格式，它可以包含模型的几何信息、纹理、动画等。

使用Webpack加载GLB模型的步骤如下：

安装Webpack：首先，你需要在项目中安装Webpack。可以使用npm或者yarn进行安装。
配置Webpack：在项目根目录下创建一个webpack.config.js文件，并进行相应的配置。配置中需要指定入口文件、输出文件路径等。
安装Three.js和GLTFLoader：使用npm或者yarn安装Three.js和GLTFLoader。GLTFLoader是Three.js的一个插件，用于加载GLB模型。
创建HTML文件：在项目中创建一个HTML文件，用于展示加载后的模型。
创建JavaScript文件：在项目中创建一个JavaScript文件，用于编写加载模型的代码。
加载GLB模型：在JavaScript文件中，使用GLTFLoader加载GLB模型。可以通过指定模型文件的路径来加载模型。
渲染模型：使用Three.js提供的API，将加载后的模型渲染到HTML文件中。

以下是一个简单的示例代码：

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

// index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack Three.js GLB模型加载示例</title>
  </head>
  <body>
    <div id="canvas"></div>
    <script src="bundle.js"></script>
  </body>
</html>

// index.js

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

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas').appendChild(renderer.domElement);

const loader = new GLTFLoader();
loader.load('path/to/model.glb', (gltf) => {
  scene.add(gltf.scene);
}, undefined, (error) => {
  console.error(error);
});

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

在上述示例中，我们使用Webpack打包了JavaScript文件，并将打包后的文件命名为bundle.js。在HTML文件中引入了bundle.js，并创建了一个用于渲染模型的canvas元素。在JavaScript文件中，我们使用GLTFLoader加载了一个GLB模型，并将加载后的模型添加到场景中。最后，使用Three.js提供的API，将场景渲染到canvas元素中。

推荐的腾讯云相关产品和产品介绍链接地址：