简述
前面章节加载Three.js的方式很简单，但不幸的是它有很多的限制。由于文件会变得很大，那种方式里面没有包含很多的Three.js类。但是还有一种其他的方式来加载隐藏的类。同样需要服务器做一些加载、控制图片的是。基于此，需要运行一个本地服务器。
有许多的方式来解决这类问题，但是最简单的就是使用打包器。
什么是打包器
它是一种工具，可以在其中放入JavaScript，CSS，HTML，图像，TypeScript，Stylus和其他语言等资产。打包程序将处理这些资源，应用潜在的修改，并输出一个Web可用的文件（如HTML，CSS，图像，JavaScript）组成的"包"。
这就像一个处理流程，向其中发送不能直接用于Web的资源，在流程的末尾，会得到Web可用的文件。
Webpack
Webpack是目前最受欢迎的打包器。它可以处理大部分需求，并具备广泛的文档和活跃的社区。
不幸的是，Webpack的配置非常有难度。别担心，这里将为您提供一个简单的模板，并解释它的作用以及如何使用它。
Webpack非常受欢迎和有用，对于Web开发人员来说，这是必须的。
如何使用模板
安装最新的LTS版Node.js。私信并索取示例文件。解压示例文件后，进入相应目录，并打开终端，输入
npm i
完成安装后，使用下方命令启动本地服务器。
npm run dev
然后浏览器会自动打开，并访问http://你的IP：8080网址。
故障排除
如果您在Mac上，并且看到与Xcode相关的错误消息，则可以忽略它。但是，如果您真的想摆脱该消息，则可以关注本文，但是如果您不想关注整篇文章，只需从终端运行
xcode-select --install
并按照说明进行操作即可。这应该可以解决问题。
如果有其他问题，请关注并私信我。
找回场景
接下来就是简单模式，把场景加载到Webpack中。
首先，需要在src/index.html文件中添加<canvas>标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04 - Webpack</title>
</head>
<body>
<canvas class="webgl"></canvas>
</body>
</html>
不能在此处添加<script>标签，Webpack会处理这部分内容。
现在需要将Javascript代码放到/src/script.js文件中，和之前不同的是前两行。
import './style.css'用来加载CSS并应用到页面上
import * as THREE from 'three'用于引入Three.js的全部类，并可通过THREE调用。
import './style.css'
import * as THREE from 'three'
// 创建场景
const scene = new THREE.Scene()
// 创建对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// 创建尺寸变量
const sizes = {
width: 800,
height: 600
}
// 创建相机
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)
// 创建渲染器
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('canvas.webgl')
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)
如果服务器已在运行，请打开页面（无需刷新）。
如果没有，请从终端运行，
npm run dev
页面应该会打开。
网友评论