计算机图形学：（三）MVP变换扩展

Three.js

WebGL允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，同时需要相对较多的数学知识，对于前端开发者来说学习成本非常高。

Three.js是基于webGL的封装的一个易于使用且轻量级的3D库，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，极大地提高了性能，功能也非常强大。

官网：Three.js – JavaScript 3D Library (threejs.org)

# 下载

GitHub：GitHub - mrdoob/three.js: JavaScript 3D Library.

# 基础

基于Three.js写页面的三要素是：场景(Scene)、相机(Camera)、渲染器(Renderer)

场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。
摄像机对象，摄像机决定了能够在场景看到什么。
渲染器对象，该对象会基于摄像机的角度来计算场景对象在浏览器中会渲染成什么样子。

将一个Scene对象和Camera对象传递给一个Renderer，它将在相机视锥体内的3D场景的部分作为2D图像呈现(绘制)到Canvas。

SceneGraph是一个树状结构，由各种对象组成，如一个Scene对象、多个Mesh对象、Light对象、Group、Object3D和Camera对象；

在图中，Camera对象有一半是不在SceneGraph中的。这是为了表示在three.js中，不像其他对象，Camera不需要在场景中才能起作用。

每个添加到Three.js场景的对象，甚至包括THREE.Scene本身，都是继承自一个名为THREE.Object3D的对象。

# 入门

直接找了其他博主的教程：https://blog.csdn.net/sd1sd2/category_12898367.html

示例一：初始化

这里我们参照计算机图形学：（二）MVP变换示例用Three.js初始化一个立方体，相机看向它：

<html><head><title>视图变换基础案例</title><style>body {margin: 0;overflow: hidden;}canvas {width: 100%;height: 100%;}</style>
</head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script><script>// 【0】创建一个场景var scene = new THREE.Scene();// 【1】立方体几何var geometry = new THREE.BoxGeometry(4, 4, 2);// 渲染的基础材料var materialBasic = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe: true });// 这是一种简单的材质，根据物体表面的法向量计算颜色var materialNormal = new THREE.MeshNormalMaterial();// 创建多材料对象var cube = THREE.SceneUtils.createMultiMaterialObject(geometry, [materialBasic,materialNormal]);// 位置上添加渲染的东西scene.add(cube); // 默认情况下，使用 scene.add() 会将物体加载到（0，0，0） // 【2】做一个相机模拟真实人的视角// 注意，在three.js中的大多数角度都是弧度，但由于某些原因，透视相机需要角度。var camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 0, 20);// 观察位置camera.lookAt(cube.position);// 【3】渲染器var renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 【4】添加聚光灯并且添加到页面当中var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(0, 20, 20);spotLight.intensity = 5;scene.add(spotLight);// 【5】添加三维坐标系var axes = new THREE.AxisHelper(6);scene.add(axes);// 最终的渲染renderer.render(scene, camera);</script>
</body></html>

示例二：绕点旋转

① 以固定角度旋转相机

同计算机图形学：（二）MVP变换示例一样，我们需要通过计算相机旋转后的新位置来更新视图矩阵，从而达到让相机以一个固定的旋转度数绕立方体中心旋转的效果：

let angle = 0;
let radius = camera.position.z;
const rotationValue = 0.01;var tick = function () {angle += rotationValue;// 更新相机位置（圆形路径）camera.position.x = radius * Math.sin(angle);camera.position.z = radius * Math.cos(angle);camera.lookAt(cube.position); // 确保相机一直看向物体// 场景改变时，重新执行渲染操作渲染三维场景renderer.render(scene, camera);requestAnimationFrame(tick);
};
tick();

轨道控制器（OrbitControls）是 Three.js 中的一个常用工具，用于控制相机的运动。如果目标是实现“相机绕物体旋转”，直接使用 OrbitControls更简单：

注：这里为了导入OrbitControls模块，变更了有些API（下述代码删减了未做修改的部分）。

<script type="importmap">{"imports": {"three": "https://unpkg.com/three@0.148.0/build/three.module.js","three/examples/jsm/controls/OrbitControls": "https://unpkg.com/three@0.148.0/examples/jsm/controls/OrbitControls.js","three/examples/jsm/utils/SceneUtils": "https://unpkg.com/three@0.148.0/examples/jsm/utils/SceneUtils.js"}}
</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';import { createMultiMaterialObject } from 'three/examples/jsm/utils/SceneUtils';// 创建多材料对象var cube = createMultiMaterialObject(geometry, [ // 修改前：THREE.SceneUtils.createMultiMaterialObjectmaterialBasic,materialNormal]);// 添加三维坐标系var axes = new THREE.AxesHelper(6); // 修改前：THREE.AxisHelper// 添加轨道控制器const controls = new OrbitControls(camera, renderer.domElement);controls.target.set(cube.position.x, cube.position.y, cube.position.z); // 设置目标点为物体中心controls.autoRotate = true;   // 启用自动旋转controls.autoRotateSpeed = 1.0; // 旋转速度var tick = function () {controls.update();renderer.render(scene, camera);requestAnimationFrame(tick);};tick();</script>

其他：当对相机绕Y轴进行旋转时，看起来会是“物体绕相机旋转”：

var tick = function () {camera.rotateY(0.01);renderer.render(scene, camera);requestAnimationFrame(tick);
};
tick();

② 鼠标拖拽旋转相机

OrbitControls 会监听鼠标事件（如鼠标移动、鼠标滚轮滚动、鼠标按键点击等），根据用户的操作实时计算相机应该移动到的新位置和角度，然后更新相机的相关属性，从而改变相机在 3D 场景中的视角。

const controls = new OrbitControls(camera, renderer.domElement);// 监听控制器，每次拖动后重新渲染画面
controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作
});

比起之前做的简陋版，OrbitControls实现的效果更加丝滑了：