介绍

是一种使得浏览器能够支持3D图形渲染的技术。它的实现，依托于openGL ES规范。

openGL ES衍生于openGL,是openGL功能弱化版本，目的是尽早让浏览器支持openGL

安装

为了能够单纯学习threejs而不是在框架(例如vue/react)中使用，所以这里的threejs需要通过官网下载到本地。

threejs.org

一些概念

• 场景

可以想象成一种容器，里面存放的是各种3D模型。

一个页面中可以有多个场景。就像一个饭店可能有多个不同装修风格的主题包间。

THREE.Scene = function();

• 相机

为了能够看到场景，我们需要通过相机这个"眼睛"帮助我们看到电子世界中的物体。类似于摄像头，我们是在监控室里，看到的是摄像头拍摄所传输来的画面。

相机又分为正交相机和透视相机。正交相机忽视透视关系(近大远小，近实远虚)。

// 这里的Perspective是透视的意思，所以这里的相机是透视相机
const camera = THREE.PerspectiveCamera(fov, aspect, near, far);

// fov, 视野角度，是观察者向外观察的角度，可近似认为是一个圆锥体的横截面的角度
// aspect，长宽比，是物体宽度除以它的高的值，假设有图片是1:1，如果长宽比变化图像也会发生变化
// near，近截面，指摄像机最近的渲染距离，再小于这个距离的物体将不渲染
// far，远截面，指摄像机最远的渲染距离，超出这个距离的物体将不渲染

// 这里的Orthographic就是正交的意思，所以这里的相机是正交相机
const camera = new THREE.OrthographicCamera(left,right,top,bottom,near,far);
// 近似的说，正交相机能够看到的其实是一个盒子里的景象。这里的left等，实际上就是界定这个盒子的左边界、右边界等

• 渲染器

渲染器，用来给画面添加各种效果。这部分内容比较复杂，会在专门小节进行说明。

• 图像/几何体

图像/几何体，是通过人工标点或三维建模软件生成的，能够被用户观察到的2D图像或3D模型。

第一个案例

// 首先，导入threejs
import * as THREE from 'three';

// 设置场景
const scene = new THREE.Scene();

// 设置相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

// 渲染器，这部分比较复杂，以后会详细介绍
const renderer = new THREE.WebGLRenderer();

// 设置渲染尺寸
renderer.setSize( window.innerWidth, window.innerHeight );

// 将渲染好的内容挂载到网页的dom元素中
// 好比画师画完了画，你来看画
document.body.appendChild( renderer.domElement );

载入模型

尽管threejs可以支持FBX、OBJ等格式，但是官方推荐的格式是glTF(gl传输格式)。

.GLB和.GLTF是这种格式的两种版本。

threejs仅内置一部分加载器(如ObjectLoader)，其他的需要在应用中单独引入。

// 注意，该方法仅适用于通过nodejs安装的threejs
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// 添加模型
const loader = new GLTFLoader();

loader.load( 'path/to/model.glb', function ( gltf ) {

	scene.add( gltf.scene );

}, undefined, function ( error ) {

	console.error( error );

} );