Threejs 三维开发系列之Threejs基础概念

• Threejs简介
• (是什么)Threejs是一个web端的3D图形引擎，能利用js创建和控制各种三维模型和场景
• (能用来做什么)可以用js开发各种复杂的三维场景、空间模型动画展示、各种三维小游戏(比如微信跳一跳就是Threejs开发)。
• (优势) 传统三维开发一般是c++ openGl，开发成本大效率低，threejs封装了大量底层图形计算，在js应用层能以很高的效率完成各种三维产品开发。
• (劣势) 学习曲线比较陡峭，需要掌握一定图形和数学知识，大模型3D场景对设备性能有一定的要求，小型场景问题不大。

---

基础坐标系概念

• 不同于常规前端开发只有xy两个坐标系，threejs多了一个z坐标轴，因此开发场景从二维的平面转换为了三维的立体空间，z轴是往屏幕外面朝向
• Threejs坐标系采用的是右手坐标系

Threejs安装

• npm模式安装：npm install three

// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';

const scene = new THREE.Scene();


// 方式 2: 仅导入你所需要的部分
import { Scene } from 'three';

const scene = new Scene();

• cdn模式安装，由于 three.js 依赖于ES module，因此任何引用它的script标签必须使用type="module"。如下所示：