簡述
前面章節(jié)加載Three.js的方式很簡單罐脊，但不幸的是它有很多的限制。由于文件會變得很大蜕琴，那種方式里面沒有包含很多的Three.js類萍桌。但是還有一種其他的方式來加載隱藏的類。同樣需要服務(wù)器做一些加載凌简、控制圖片的是上炎。基于此号醉，需要運(yùn)行一個本地服務(wù)器反症。
有許多的方式來解決這類問題辛块，但是最簡單的就是使用打包器。
什么是打包器
它是一種工具铅碍，可以在其中放入JavaScript润绵，CSS，HTML胞谈，圖像尘盼，TypeScript，Stylus和其他語言等資產(chǎn)烦绳。打包程序?qū)⑻幚磉@些資源卿捎，應(yīng)用潛在的修改，并輸出一個Web可用的文件（如HTML径密，CSS午阵，圖像，JavaScript）組成的"包"享扔。
這就像一個處理流程底桂，向其中發(fā)送不能直接用于Web的資源，在流程的末尾惧眠，會得到Web可用的文件籽懦。
Webpack
Webpack是目前最受歡迎的打包器。它可以處理大部分需求氛魁，并具備廣泛的文檔和活躍的社區(qū)暮顺。
不幸的是，Webpack的配置非常有難度秀存。別擔(dān)心捶码，這里將為您提供一個簡單的模板，并解釋它的作用以及如何使用它应又。
Webpack非常受歡迎和有用宙项，對于Web開發(fā)人員來說乏苦，這是必須的株扛。
如何使用模板
安裝最新的LTS版Node.js。私信并索取示例文件汇荐。解壓示例文件后洞就，進(jìn)入相應(yīng)目錄，并打開終端掀淘，輸入
npm i
完成安裝后旬蟋，使用下方命令啟動本地服務(wù)器革娄。
npm run dev
然后瀏覽器會自動打開倾贰，并訪問http://你的IP：8080網(wǎng)址冕碟。
故障排除
如果您在Mac上，并且看到與Xcode相關(guān)的錯誤消息匆浙，則可以忽略它首尼。但是，如果您真的想擺脫該消息迎捺，則可以關(guān)注本文查排，但是如果您不想關(guān)注整篇文章跋核，只需從終端運(yùn)行
xcode-select --install
并按照說明進(jìn)行操作即可了罪。這應(yīng)該可以解決問題泊藕。
如果有其他問題，請關(guān)注并私信我。
找回場景
接下來就是簡單模式撩鹿，把場景加載到Webpack中节沦。
首先看蚜，需要在src/index.html文件中添加<canvas>標(biāo)簽
<!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>標(biāo)簽，Webpack會處理這部分內(nèi)容疾党。
現(xiàn)在需要將Javascript代碼放到/src/script.js文件中惨奕，和之前不同的是前兩行墓贿。
? ??import './style.css'用來加載CSS并應(yīng)用到頁面上
? ??import * as THREE from 'three'用于引入Three.js的全部類聋袋，并可通過THREE調(diào)用幽勒。
import './style.css'
import * as THREE from 'three'
// 創(chuàng)建場景
const scene = new THREE.Scene()
// 創(chuàng)建對象
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)
// 創(chuàng)建尺寸變量
const sizes = {
????width: 800,
????height: 600
}
// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)
// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer({
????canvas: document.querySelector('canvas.webgl')
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)
如果服務(wù)器已在運(yùn)行覆醇，請打開頁面（無需刷新）永脓。
如果沒有常摧，請從終端運(yùn)行落午，
npm run dev
頁面應(yīng)該會打開在跳。
