Threejs 适合初学者的教程 ( 1 ) - 基础

千度麒麟
72 阅读5分钟

1.Threejs 简介：

Threejs官网：threejs.org/

Threejs中文文档：threejs.org/docs/index.…

1.Three.js简介

three.js是一个基于JavaScript编写的开源3D图形库，利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能，如几何体、纹理、光照、阴影等，以便开发者能够快速地创建复杂且逼真的3D场景。同时，Three.js还具有很好的跨平台和跨浏览器兼容性，让用户无需安装任何插件就可以在现代浏览器上观看3D内容。

2.Three.js的应用

a. 互动式可视化：  借助Three.js可以创建各种复杂的3D可视化效果，如数据可视化、产品展示等，从而提高用户体验和交互性。

image.png b. 游戏开发：  Three.js非常适合用于开发基于浏览器的3D游戏，因为它提供了丰富的API和高级功能，使得开发者可以专注于游戏逻辑而无需过多关注底层实现。

image.png

c. 虚拟现实和增强现实：  Three.js可以与WebVR和WebAR等技术结合，帮助开发者快速构建虚拟现实和增强现实应用。虚拟展厅，如美术馆，熊猫馆，博物馆等

image.png

d. 在线教育：  Three.js在在线教育领域具有广泛的应用前景，如创建生动的3D模型以辅助教学，让学生更好地理解抽象概念和复杂过程。

image.png

e. 影视动画：  Three.js可以用于制作简单的3D动画，甚至是基于Web的实时渲染电影。开发者可以利用Three.js的强大功能和灵活性，将其应用于短片、广告和其他视觉项目中。

image.png

f. 建筑可视化：  通过Three.js，建筑师和设计师可以在网页上呈现出逼真的建筑模型，帮助客户更好地理解设计方案。如智慧城市，智慧交通，智慧运输等

image.png

g. 艺术装置与展览：  Three.js也被广泛用于艺术领域，如数字艺术装置、互动展览等，使观众能够在虚拟空间中感受艺术家的创意和灵感。

3.Three.js 基础知识

学习Threejs需要掌握了解关于场景、相机、渲染器、几何体、材质和光源等概念知识

image.png

3.1 场景（Scene）

场景是Three.js中的一个核心概念。场景代表了一个3D空间，其中包含了所有要渲染的物体。创建一个场景非常简单：

const scene = new THREE.Scene();

3.2 相机（Camera）

相机定义了场景中的观察点，决定了哪些部分会被渲染。Three.js提供了多种类型的相机，其中最常用的是透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。透视相机适用于大多数场景，具有透视投影效果。创建一个透视相机如下所示：

const w = window.innerWidth;
const h = window.innerHeight;

const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);

fov表示视场角度 aspect表示宽高比 near和far表示近平面和远平面的距离。

3.3 渲染器（Renderer）

渲染器负责将场景和相机的信息渲染到屏幕上。Three.js提供了多种渲染器，其中最常用的是WebGL渲染器。创建一个WebGL渲染器如下所示：

const w = window.innerWidth;
const h = window.innerHeight;

const renderer = new THREE.WebGLRenderer();

renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);

3.4 几何体（Geometry）

几何体定义了3D物体的形状。Three.js内置了许多常用的几何体，如立方体、球体、圆柱体等。创建一个立方体几何体的示例如下：

const geoBox = new THREE.BoxGeometry(width, height, depth);

3.5 材质（Material）

材质决定了物体的外观，如颜色、纹理、透明度等。Three.js提供了多种材质类型，如基本材质（MeshBasicMaterial）、光照材质（MeshLambertMaterial）、Phong材质（MeshPhongMaterial）等。创建一个绿色基本材质的示例如下：

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  wireframe: false,
  metalness: 0.5,
  roughness: 0.5,
});

3.6 网格（Mesh）

网格是由几何体和材质组成的3D物体，它将几何体的形状和材质的外观组合在一起。创建一个由立方体几何体和绿色基本材质组成的网格如下所示：

const box = new THREE.Mesh(geoBox, material);

scene.add(box); // 构建Object到场景中

3.7 光源（Light）

光源为场景提供了光照，使物体具有明暗、阴影等效果。Three.js提供了多种类型的光源，如环境光（AmbientLight）、点光源（PointLight）、平行光（DirectionalLight）等。创建一个白色点光源的示例如下：

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(x, y, z);

scene.add(directionalLight);

4.总结：

加载器（Loader）：

Three.js支持加载多种3D模型格式，如OBJ、FBX、GLTF等。学习如何加载外部3D模型将让你能够为场景添加更丰富的内容。

纹理（Texture）：

纹理贴图可以让你为物体添加更复杂的外观。学习如何加载和使用纹理贴图将使你的场景更加真实和有趣。

阴影（Shadow）：

为场景添加阴影效果可以增强真实感。学习如何设置光源和物体以生成阴影是创建高质量3D渲染的关键。

动画（Animation）：

Three.js提供了多种动画方法，如关键帧动画、骨骼动画等。学习如何为物体添加动画效果将使你的场景更加生动。

性能优化：

创建高性能的3D应用需要掌握许多性能优化技巧，如减少绘制调用、使用LOD技术等。优化性能是任何3D项目的重要组成部分。

物理引擎：

为场景添加物理引擎（如Ammo.js、Cannon.js等）可以让物体具有真实的碰撞和运动效果。学习如何使用物理引擎将为你的项目增加更多的可能性。

2.开始工作：

在桌面新建文件夹，如名字叫 three3d，拖入vscode中，打开控制台输入：

npm init -y

生成一个 package.json 文件

安装parcel以用来启动项目

npm install parcel --save-dev

或者全局安装parcel，以便于我们可以在多个地方全局使用它

npm install parcel -g

在文件夹根目录新建src文件夹并且新建index.html和新建文件夹js并且在js文件文件夹里新建script.js

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      background-color: #000;
    }
  </style>
</head>
<body>
  <script src="./js/script.js"  type="module"></script>
</body>
</html>

3.script.js：

npm 安装 three

npm install three
avatar
文章
阅读
粉丝