Three.js 是一种流行的基于 WebGL 的 3D 图形库,可简化使用 WebGL 创建 Web 页面上的 3D 内容的过程。它提供了许多内置功能和高性能,但文档较少,中文资源有限。它不是游戏引擎,但可以用于创建复杂的 3D 场景和动画。Three.js 具有强大的渲染能力,可以通过硬件加速实现流畅的渲染,并且可以在所有现代浏览器上运行。它可用于创建各种 3D 效果,例如旋转的 3D 模型,交互式场景和游戏等。
【Three.JS】 Three.JS 是基于 WebGL 的 Javascript 开源框架,简言之,就是能够实现 3D 效果的 JS 库。
【WebGL】 WebGL 是一种 Javascript 的 3D 图形接口,把 JavaScript 和 OpenGL ES 2.0 结合在一起。
【OpenGL】 OpenGL 是开放式图形标准,跨编程语言、跨平台,Javascript、Java 、C、C++ 、 python 等都能支持 OpenG ,OpenGL 的 Javascript 实现就是 WebGL,另外很多 CAD 制图软件都采用这种标准。OpenGL ES 2.0 是 OpenGL 的子集,针对手机、游戏主机等嵌入式设备而设计。
【Canvas】 Canvas 是 HTML5 的画布元素,在使用 Canvas 时,需要用到 Canvas 的上下文,可以用 2D 上下文绘制二维的图像,也可以使用 3D 上下文绘制三维的图像,其中 3D 上下文就是指 WebGL
three 可以直接在 html 里引用,也可以在 vue/react 框架里使用
1.直接引用
<script src="https://threejs.org/build/three.js"></script>
2.vue/react 里使用
npm install three --save
项目里使用
import * as THREE from 'three';
了解 threejs 的场景 Scene、相机 Camera、渲染器 Renderer 概念
相当于一个 3D 虚拟世界容器,所有的人,物,灯光都在这个场景容器里
import { Scene } from 'three';
const scene = new Scene();
// 伪代码
scene.add('物体', '灯光', '环境', '...');
threejs 提供了各种 3D 图形几何体的基本元素,表示 3D 物体的形状和大小。
//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(width, height, depth );
更多几何体元素参考官网:https://threejs-docs.netlify.app/manual/#zh/primitives
定义物体的外观效果,比如颜色,不同的材质会有不同的渲染效果
//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,//0xff0000设置材质颜色为红色
});
网格是用来将几何体和材质结合起来形成可视的 3D 物体,由几何体和材质两部分组成,可以被添加到场景中展示出来
// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标,默认是坐标原点
mesh.position.set(0,10,0);