three.js的学习_threejs学习

作者：喵喵爱编程 | 2024-08-17 15:59:21

踩

threejs学习

Threejs

1 前言

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

既然Threejs是一款WebGL三维引擎，那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用，以便大家了解。

参考资料：

官网Demo

官网 api 文档

Three.js入门教程

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
1
2

3.2 使用

在脚手架搭建的项目中使用
```
import Three from 'three'
1
```
在html 页面中使用
```
<script src='./three.js'></script>
1
```

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

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 - 语音
内置计算方法
- 数学库
- 路径创建
- 形状创建

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/喵喵爱编程/article/detail/993425