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表示宽高比 nearfar表示近平面和远平面的距离。

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