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"。如下所示: