分类
Javascript

使用webpack模板开发Three.js

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/')
}

完整脚手架代码可参考git代码

二、开发步骤

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

1、创建场景对象Scene

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

2、创建网格模型

// 创建一个球体几何对象
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);

3、设置光源(可选)

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

4、设置相机

// 窗口宽度
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);

5、创建渲染器对象

// 设置渲染
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);

6、循环动画(可选)

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

7、视口自适应处理(可选)

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

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

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

详细代码可参考main.js

😎Happy coding!