分享每一天-Web3D｜基于WebGL的Three.js框架

Web3D｜基于WebGL的Three.js框架｜入门篇

前端技术 2080 0 创建时间：2020-10-29 14:17:32

Three.js

#### 从Hello World说起
![](http://www.seedblog.cn/uploads/article/2020-10-29/vEE3Dx5dD889ukMBbQ07pnZgUcWwxIPsU0zLRvzy.png)
通过一段小小的示例，来看看怎么使用three.js框架。
```javascript
var camera, scene, controls, renderer;
init();
animate();
function init() {
 // camera
 camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10000);
 camera.position.set(0, 50, 500);
 
 // scene
 scene = new THREE.Scene();
 scene.background = new THREE.Color(0xf0f0f0);
 
 // light
 var light = new THREE.DirectionalLight(0xffffff);
 light.position.set(0, 0, 1);
 scene.add(light);
 
 //Add a Cube
 var cube = new THREE.Mesh(new THREE.BoxGeometry(50, 100, 20), new THREE.MeshBasicMaterial({color: 0xff0000}));
 cube.name = "Cube";
 cube.rotation.y = Math.PI / 4;
 cube.rotation.z = Math.PI / 4;
 scene.add(cube);
 // renderer
 renderer = new THREE.WebGLRenderer({antialias: true});
 renderer.setPixelRatio(window.devicePixelRatio);
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
}
function animate() {
 renderer.render(scene, camera);
 requestAnimationFrame(animate);
}
```
#### 组件介绍
通过上面的Demo可以看到，three.js的创建有以下几部分组成：

- 渲染器（Renderer）
- 场景（Scene）
- 相机（Camera）
- 光源（Lights）
- 物体（Mesh）

##### 一. 渲染器（Renderer）

是一个HTML DOM元素，将会被嵌入到HTML页面中，它会通过循环调用animate()方法来渲染场景（Scene）和相机（Camera）。

```javascript
renderer.render(scene, camera);
```
##### 二. 场景（Scene）

场景（Scene）是所有渲染的3D元素的根元素，也就是一个三维空间，所有的图形，光源及辅助工具都需要加入其中。

##### 三. 相机（Camera）

相机（Camera）用来控制三维空间中物体的投影，以及我们在屏幕上看到的内容。一般情况下分为两种：

- 透视投影：THREE.PerspectiveCamera，遵循近大远小规则，跟现实生活中我们看物体的方式是一样的。

- 正投影：THREE.OrthographicCamera，不论远近，按照统一的大小进行投影。

另外，Camera中的坐标系统也与我们平时编程中的屏幕坐标系统不一样，它用的是右手坐标系统（几何中的坐标系）。
![](http://www.seedblog.cn/uploads/article/2020-10-29/7TveGj29XYRw21uPnoXsTCvCv5xE0cjvDZ4UtowP.png)

##### 四. 光源（Lights)

光源（Lights）是3D中一个很重要的概念，和现实世界一样，同样的物体，在不同的光源照射下，呈现的效果也不一样，比如自然光，灯泡，LED灯照射后物体的颜色也会有很大的不同。three.js中，光源大致分为8种：

- AmbientLight: 环境光 ；它的颜色会添加到整个场景和所有对象的当前颜色上
- PointLight: 点光源；空间中的一点，朝所有的方向发射光线
- SpotLight: 聚光灯光源；聚光灯是由点光源发出，这种类型的光也可以产生投影，有聚光的效果
- DirectionalLight:方向光，平行光；例如：太阳光
- HemisphereLight：半球光光源 ；可以为室内场景创建更加自然的光照效果，模拟反光面和光线微弱的天气
- AreaLight:面光源； 使用这种光源可以指定散发光线的平面，而不是空间的一个点
- RectAreaLight：矩形区域光源；这种光从一个矩形面均匀地发射，可以用来模拟明亮的窗户或者带状的照明；可以产生投影
- LensFlare：镜头炫光；这不是一种光源，但是通过该炫光可以为场景中的光源添加炫目的效果

##### 五. 物体（Mesh）

物体（Mesh）才是我们最终要展现给用户的3D形状，如长方体，球体等。它有两个重要的组成部分：

- 形状（Geometry）：3D的各种形状
- 材质（Material）：物体表面的渲染方式，包括颜色，与光源的交互等。

Three.js作为实现了WebGL的优秀的开源框架，其功能已经是比较丰富和完善了。但是对于一些初次接触3D的人，肯定会被里面的各种概念搅的天翻地覆。只要理清楚了上面所说的这些基本概念，我相信你也能很快入门。

#### 手册地址:
https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

#### 好玩的在线开发:
https://www.thingjs.com/guide/platform?m=sample&g=1

**喜欢的,对你有帮助的，可以点击一波关注哦！**

![](http://www.seedblog.cn/uploads/article/2020-10-29/2kFMKa4J7PMeIERwsFF4N6shuiuS9kLO9yMeQ2GC.png)

Web3D｜基于WebGL的Three.js框架｜入门篇

商品推荐

广告推荐

推荐文章