Threejs
1 前言
Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。
既然Threejs是一款WebGL三维引擎,那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用,以便大家了解。
参考资料:
2 three 核心概念
1.1 场景
3d 世界的容器,可以在容器中,添加 地面、天空、光照、人、动物等等。
1.2 相机
用来拍摄场景中的画面,相机在场景中的位置不同,角度不同,拍摄出来的画面就不一样。
1.3 渲染器
用于将相机拍摄出来的画面,绘制到画布上。
1.4 物体
3D世界是由一个个物体组合而成的。人、车、楼等等都是一个个的物体。
1.5 光线
有了光线你看到的物体才会有各种各样的颜色,并且随着光线的反射与折射产生出更加真实的感觉。
3 安装及使用three
3.1 安装
# three的版本指定好,新版有时更新了api,可能导致之前使用的方法不起作用
npm i three@0.100.0
3.2 使用
-
在脚手架搭建的项目中使用
import Three from 'three'
-
在html 页面中使用
<script src='./three.js'></script>
4 threejs 初探
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>three-demo</title>
<script src="./libs/three.min.js"></script>
<style>
html,
body {
height: 100vh;
width: 100vw;
padding: 0;
margin: 0;
border: 0;
}
#demo {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="demo"></div>
<script>
const { THREE } = window;
const {
// 核心三件套
Scene, // 场景
WebGLRenderer, // 渲染器
PerspectiveCamera, // 透视相机
BoxGeometry, // 正方体几何体
Mesh, // 网格 -- 物体
PointLight, // 点光源
AmbientLight, // 环境光
} = THREE;
// 用于绘制3D图像的dom
const renderDom = document.getElementById("demo");
const width = renderDom.clientWidth; //窗口宽度
const height = renderDom.clientHeight; //窗口高度
const k = width / height; //窗口宽高比
const s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
// 创建场景
const scene = new Scene();
// 物体的形状 -- 创建一个立方体几何对象
const geometry = new BoxGeometry(100, 100, 100);
// 物体材质 -- 铜、铁、颜色
const material = new MeshLambertMaterial({
color: 0x0000ff,
});
// 通过几何形状和材质创建出一个 立方体
const mesh = new Mesh(geometry, material); //网格模型对象Mesh
// 将物体加入到场景中
scene.add(mesh); //网格模型添加到场景中
// 添加点光源
const point = new PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
// 添加环境光
const ambient = new AmbientLight(0xfbea94);
scene.add(ambient);
// 创建相机
const camera = new PerspectiveCamera();
camera.fov = 35; // 视角度数
camera.near = 1; // 设置相机最小拍摄距离
camera.far = 1000; // 设置相机最大拍摄距离
camera.position.set(350, 290, 220); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
// 创建渲染器
const renderer = new WebGLRenderer({
precision: "lowp",
alpha: true,
antialias: true,
logarithmicDepthBuffer: true,
});
renderer.setSize(width, height); // 设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
// 在 demo dom 中插入渲染器
renderDom.appendChild(renderer.domElement);
// 将相机拍摄到的画面渲染出来
renderer.render(scene, camera);
</script>
</body>
</html>
three 核心概念示例图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zrNrYOL-1687830109752)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YHszuf74-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs2.png)]
透视相机图解
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zSBWKOE-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\14238c00f908461ba7007348de2bc604.png)]
5 threejs 全景学习曲线
- Scene - 场景
- Camera - 相机
- 透视相机
- 正交相机
- WebGLRenderer - 渲染器
- 物体
- Points - 点
- Line - 线
- Mesh - 多边形网格
- Geometry - 几何体
- Skeleton - 骨架
- Bone - 骨骼
- Sprite - 精灵
- Group - 分组
- Light - 光
- 环境光
- 平行光
- 点光源
- 聚光灯
- 半球光
- Texture - 纹理贴图
- VideoTexture - 视频纹理
- DepthTexture - 深度纹理
- CubeTexture - 立方纹理
- Canvas纹理
- Material - 材质
- 线材质
- 点材质
- 网格材质
- 着色器材质
- 阴影材质
- 精灵材质
- Loader - 加载器
- 加载模型文件
- 加载文字
- 加载图片
- 加载音频
- 加载视频
- 加载纹理
- Animation - 动画
- 帧动画
- 轨道动画
- 骨骼动画
- 变形动画
- Audio - 语音
- 内置计算方法
- 数学库
- 路径创建
- 形状创建