自定义 Three.js Webpack 模板

Three.js 是基于原生 WebGL 封装运行的三维引擎，在所有 WebGL 引擎中，Three.js 是国内文资料最多 . 使用最广泛的三维引擎。不过我发现绝大多数资料的示例都是用的 CDN 方式引入的。CDN 的方式写代码无法触发 IDE 的代码提示，写起来好痛苦。于是我抽时间写了一个 Three.js Webpack 模板，现在你可以使用 npm 的方式在 Three.js 中使用 ed6 的语法。

一 . 搭建脚手架

其实就是在 Webpack + babel 脚手架脚手架上扩展的。我们以 Webpack v3 为例，结合 Three.js 对资源的特殊要求，需要在 webpack.config.js 中加如下 loader。

{
  test: /\.(jpe?g|png|gif|svg|tga|gltf|babylon|mtl|pcb|pcd|prwm|obj|mat|mp3|ogg)$/i,
  use: 'file-loader',
  exclude: path.resolve(__dirname, './node_modules/')
}, {
  test: /\.(vert|frag|glsl|shader|txt)$/i,
  use: 'raw-loader',
  exclude: path.resolve(__dirname, './node_modules/')
}

二 . 开发步骤

开发一个典型的 Three.js 应用，通常包含以下几个步骤：

创建场景对象 Scene

// 创建场景对象 Scene
const scene = new THREE.Scene();

创建网格模型

// 创建一个球体几何对象
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 创建材质对象
const material = new THREE.MeshLambertMaterial({
  color: 0x990000
});
// 创建 Mesh
const cube = new THREE.Mesh(geometry, material)
// 网格模型添加到场景中
scene.add(cube);

设置光源（可选）

// 点光源
const point = new THREE.PointLight(0xffffff);
// 点光源位置
point.position.set(400, 200, 300)
// 点光源添加到场景中
scene.add(point);
// 环境光
var ambient = new THREE.AmbientLight(0x444444);
// 环境光添加到场景中
scene.add(ambient);

设置相机

// 窗口宽度
const width = window.innerWidth;
// 窗口高度
const height = window.innerHeight;
// 窗口宽高比
const aspect = width / height;
// 三维场景显示范围控制系数，系数越大，显示的范围越大
const s = 200;
// 创建相机对象
var camera = new THREE.OrthographicCamera(-s * aspect, s * aspect, s, -s, 1, 1000);
// 设置相机位置
camera.position.set(200, 300, 200);
// 设置相机方向(指向的场景对象)
camera.lookAt(scene.position);

创建渲染器对象

// 设置渲染
const canvas = document.querySelector('canvas.webgl');
const renderer = new THREE.WebGLRenderer({
  canvas: canvas
})
// 设置渲染区域尺寸
renderer.setSize(width, height);
// 设置背景颜色
renderer.setClearColor(0xb9d3ff, 1);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
// 执行渲染操作 指定场景 . 相机作为参数
renderer.render(scene, camera);

循环动画（可选）

// 循环动画
const loop = () => {
  cube.rotation.z += 0.03;
  renderer.render(scene, camera);
  window.requestAnimationFrame(loop);
};
loop();

视口自适应处理（可选）

window.addEventListener("resize", () => {
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 更新相机
  camera.aspect = width / height;
  camera.updateProjectionMatrix();

  // 更新渲染
  renderer.setSize(width, height);
});