前言
Three.js ( Javascript 3D library ) 是基于原生WebGL封装运行的三维引擎,WebGL可以看成是浏览器给我们提供的接口,在JavaScript中可以直接用这些API进行3D图形的绘制;而Three.js它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能,让你不必要再从底层WebGL开始写起。 Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。
Three.js开发3D应用,通常包括渲染器(Renderer)、场景(Scene)、照相机(Camera),以及在场景中创建的物体,光照等。
一、threejs的安装
1、NPM的安装
npm install --save three
2、组件内使用
import * as THREE from "three";
二、场景
1、场景(scene)介绍
它相当于一个容器,在3d场景中要展现的所有物体、灯光、摄像机等都必须添加到这个容器里面。
2、创建场景对象Scene
Var scene = new THREE.Scene();
3、设置场景的背景色
scene.background = new THREE.Color("#F7F7F7");
三、相机
在threejs中提供了一系列的相机,其中最常用到的是 PerspectiveCamera(透视相机) 和 OrthographicCamera(正交投影相机),它们之间的区别在于透视相机在观察场景中的物体时,呈现出来的物体近大远小,最接近自然的视图。正交投影相机无论从哪个角度观察物体,大小都是一样的。
1、PerspectiveCamera创建, 确定视野范围
let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
参数说明:
fov: 视场;垂直方向的观察角度,也就是眼睛上下俯视的观察角度。
aspect: (长宽比)是照相机水平方向和竖直方向长度的比值。
near: (近面距离)相机到视景体最近的距离。
far: (远面距离)相机到视景体最远的距离。
2、确定相机的位置
this.camera.position.set(0, 10, 20);
3、操作相机
在很多场景下,我们需要移动相机来观察物体的各个角度,这时需要相机操作控件来控制相机的位置。常用的控制器有:OrbitControls(轨道控制器)、TrackballControls(轨迹球控制器)
OrbitControls:可以使用鼠标控制场景中的对象围绕场景中心旋转和平移
TrackballControls:可以使用鼠标(或控制球)来轻松移动、平移和缩放场景
Pointerlockcontrols:第一人称控制器,以第一人称视角观察室内场景
1)添加控制器
controls = new OrbitControls(camera, canvas);
2)设置控制器聚焦点
controls.target.set(0, 5, 0);
四、光照
在场景中,如果没有光源,那所有的物体都将看不见。最常用的几种光源是AmbientLight、PointLight、SpotLight、DirectionalLight。
AmbientLight:环境光;全局均匀地照亮场景中的所有对象。
PointLight:点光源;从空间中的一点向所有方向发射光线。
SpotLight:聚光源;投射出的是类似圆锥形的光线。
DirectionalLight:平行光;比如太阳光。
例:
{
const color = 0xf1f1f1; //光的颜色
const intensity = 1; <