1.概况

之前粗略入门了一下计算机图形学和webgl，还有很多很多概念都没有涉及到，不过不影响学习新的工具threejs。它是一个帮助你绘制图像的工具库，封装了底层的webgl操作。学习的时候还是要谨记，threejs只是工具，真正的基础还是计算机图形学的东西。

threejs官网

discoverthreejs教程网站

2. 关于这个专栏

由于我之前浅浅得学习了一下 webgl，所以有的概念不会再次解释。这个专栏也就是我个人的学习总结。

3. 初识threejs

构建第一个例子很简单，安装、引入、官网例子。

import * as THREE from 'three';

// 创建一个场景
const scene = new THREE.Scene();
// 设置透视摄像机
const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 1000 );

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 800 );
document.body.appendChild( renderer.domElement );

// 创建一个几何图形
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

// 不停渲染这个图像
function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

上面的的代码都是复制的官网的，具体什么含义先不用管，执行之后会出现一个绿色额方块。

这个看起来是二维的，实际上它是立体的，只是我们相机的位置不对，正对着这个立方体看起来就像是平面的。

4. 轨道控制器OrbitControls

顾名思义，就像电影拍摄中，将相机放到固定的轨道上就能实现视角的变动。

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerHeight /window.innerHeight, 0.1, 1000 );
// 添加一个坐标轴
const axesHelper = new THREE.AxesHelper( 2 );
scene.add( axesHelper );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x881a1a } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;



const renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 800 );
document.body.appendChild( renderer.domElement );
// 控制器
const controls = new OrbitControls( camera, renderer.domElement );
function animate() {
  requestAnimationFrame( animate );
  // 如果使用了自动旋转什么的，就需要不停更新控制器状态
  controls.update();
  renderer.render( scene, camera );
}
animate();

这样就可以自由转动视角了

还可以给控制器加上一点阻尼效果

controls.enableDamping = true;

5.物体运动

设置物体运动也很简单

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x881a1a } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
// 平移
cube.position.set(2, 0, 0)
// 某一项平移
cube.position.setX(2)
// 直接设置也可以
cube.position.x = 2
// 缩放
cube.scale.set(2, 1, 1)
// 旋转，注意是弧度
cube.rotation.set(Math.PI / 4, 0 ,0)

6. 总结

可以看出，比起自己手动用webgl写代码简单了很多，连着色器都省略了。要我运用之前学的知识实现这个阻尼效果那都要费劲半天。

不过计算机图形的基础仍然是最重要的，对于优化和理解一些效果很有帮助。