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可视化效果,如数据可视化、产品展示等,从而提高用户体验和交互性。
b. 游戏开发:
Three.js非常适合用于开发基于浏览器的3D游戏,因为它提供了丰富的API和高级功能,使得开发者可以专注于游戏逻辑而无需过多关注底层实现。
c. 虚拟现实和增强现实:
Three.js可以与WebVR和WebAR等技术结合,帮助开发者快速构建虚拟现实和增强现实应用。虚拟展厅,如美术馆,熊猫馆,博物馆等
d. 在线教育:
Three.js在在线教育领域具有广泛的应用前景,如创建生动的3D模型以辅助教学,让学生更好地理解抽象概念和复杂过程。
e. 影视动画:
Three.js可以用于制作简单的3D动画,甚至是基于Web的实时渲染电影。开发者可以利用Three.js的强大功能和灵活性,将其应用于短片、广告和其他视觉项目中。
f. 建筑可视化:
通过Three.js,建筑师和设计师可以在网页上呈现出逼真的建筑模型,帮助客户更好地理解设计方案。如智慧城市,智慧交通,智慧运输等
g. 艺术装置与展览:
Three.js也被广泛用于艺术领域,如数字艺术装置、互动展览等,使观众能够在虚拟空间中感受艺术家的创意和灵感。
3.Three.js 基础知识
学习Threejs需要掌握了解关于场景、相机、渲染器、几何体、材质和光源等概念知识
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