在 WebGL 中使用 Three.js 探索模型和动画

一、介绍Three.js

Three.js是一个JavaScript库，它允许您在WebGL上创建和显示3D图形。 它在3D图形渲染中使用的模块化方法极大地简化了设置和维护3D场景的过程，它是创建高质量3D动画和交互式3D应用程序的理想选择。在Web上提供了很多有趣的方式来探索3D世界的机会。

二、在WebGL中探索三维模型

1. Three.js基础

在我们开始使用Three.js之前，让我们先了解一些基本概念。 Three.js主要由Scene、Mesh、Material和Light组成。 Scene包含着所有我们需要渲染的3D对象，Mesh 定义了各个3D对象， Material用于确定物体的表面和颜色，而 Light 用于在场景中照亮这些物体。通过创建这些元素，我们可以构建自己独特的3D场景。

下面的代码片段用最简单的代码来创建一个场景，并在其中创建一个立方体：

//创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//创建场景
const scene = new THREE.Scene();
//创建立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
//渲染
renderer.render( scene, camera );

这段代码首先通过Three.js中的WebGLRenderer创建了一个渲染器实例。 然后，它创建了一个场景的实例并在其中放置一个立方体。最后，场景和摄影机一起渲染了这个立方体。

2. 导入模型

导入一个模型可以更快速、方便的将您的创意想法转化成现实。 Three.js提供了一些支持从多种文件格式导入的工具，其中包括OBJ、STL、Collada，FBX等。

例如，下面的代码允许我们从OBJ文件中导入一个模型，然后在我们的场景中显示出来：

//导入模型
const loader = new THREE.OBJLoader();
loader.load( 'path/to/model.obj', function ( object ) {
  scene.add( object );
} );

这个代码片段中，我们先创建了一个OBJLoader实例，然后使用它来加载指定路径的OBJ模型。 在加载完成之后，我们通过将它添加到我们的场景中来呈现它。

3. 添加动画

Three.js让你可以创建各种3D动画来使你的场景更加生动。 通过使用 JavaScript，您可以编写动画代码控制对象的运动和形态。

例如，下面的代码将创建一个旋转动画并将其应用于立方体对象：

// 创建一个动画函数
function rotateCube() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
}
// 添加到animation loop,维持动画进行
function animate() {
  requestAnimationFrame( animate );
  rotateCube();
  renderer.render( scene, camera );
}
animate();

这里我们定义了一个名为rotateCube()的函数，并将其应用于立方体。当被渲染循环调用时，该函数调整立方体的方向。 通过将animate()函数添加到requestAnimationFrame()函数中，我们实现了每帧调用一次来维持动画的循环运行。然后通过调用render()函数渲染到画布上，从而实现了动画的附着。

三、使用 Three.js 的实例

随着 Three.js 的普及，现在越来越多的客户端使用 Three.js 来实现他们的 3D 创意。 下面是一个 Three.js 实现例子：

1.我们创建一个3D场景，加入几个物品（这里我们加入的是一个特殊的地球）

const shape = new THREE.SphereGeometry(100, 50, 50);
const shapeMaterial = new THREE.MeshStandardMaterial({color: 0xffffff})
const sphere = new THREE.Mesh(shape, shapeMaterial);
scene.add(sphere);

2.我们添加一些基本光源

function addLights() {
  const light = new THREE.PointLight(0xe3e3e3);
  light.position.set(250, 250, 250);
  scene.add(light);
  const ambientLight = new THREE.AmbientLight(0x585858);
  scene.add(ambientLight);
}
addLights();

3.创建照相机,以及前、后裁剪平面

function initCameras() {
  const aspectRatio = window.innerWidth / window.innerHeight;
  const cameraWidth = 350;
  const cameraHeight = cameraWidth / aspectRatio;
  const ortographicCamera = new THREE.OrthographicCamera(
      cameraWidth / -2,
      cameraWidth / 2,
      cameraHeight / 2,
      cameraHeight / -2,
      -10,
      5000
  );
  ortographicCamera.position.set(0, 0, 200);//远离地球一定距离
  camera = ortographicCamera;
  scene.add(camera);
}
initCameras ();

4.加入渲染器，并设置其应用的位置

const orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.enableDamping = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

5.然后添加动画。这里我们定义一个 animate()函数来监听位移，按帧渲染

const animate = function() {
  requestAnimationFrame( animate );
  sphere.rotation.y += 0.005;
  renderer.render( scene, camera );
};
animate();

6.最后完整代码如下：

var scene = new THREE.Scene(),
    camera,
    renderer = new THREE.WebGLRenderer(),
    orbitControls,
    cameraControls;
function addLights() {
  const light = new THREE.PointLight(0xe3e3e3);
  light.position.set(250, 250, 250);
  scene.add(light);
  const ambientLight = new THREE.AmbientLight(0x585858);
  scene.add(ambientLight);
}
function initCameras() {
  const aspectRatio = window.innerWidth / window.innerHeight;
  const cameraWidth = 350;
  const cameraHeight = cameraWidth / aspectRatio;
  const ortographicCamera = new THREE.OrthographicCamera(
      cameraWidth / -2,
      cameraWidth / 2,
      cameraHeight / 2,
      cameraHeight / -2,
      -10,
      5000
  );
  ortographicCamera.position.set(0, 0, 200);//远离地球一定距离
  camera = ortographicCamera;
  scene.add(camera);
}
function addEarth() {
  const shape = new THREE.SphereGeometry(100, 50, 50);
  const shapeMaterial = new THREE.MeshStandardMaterial({color: 0xffffff})
  const sphere = new THREE.Mesh(shape, shapeMaterial);
  scene.add(sphere);
}
function init() {
  addEarth();
  addLights();
  initCameras();
  orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
  orbitControls.enableDamping = true;
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  const animate = function() {
    requestAnimationFrame( animate );
    sphere.rotation.y += 0.005;
    renderer.render( scene, camera );
  };
  animate();
}
init();

这样我们就完成了一个较为简单的 Three.js 应用。您可以在这个基础上增加您自己的创意，仿照这个步骤添加更多的3D物件、灯光和动画。

四、结论

Three.js 已经为我们提供了非常直观的控制界面，我们只需要做的就是使用这些工具来创造自己的3D应用程序。使用 Three.js，我们可以创建出更加逼真的模型和视觉效果，甚至可以探索3D世界的秘密。