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

Posted 2021-04-25 AngryRED

前段时间，由于项目的需要，学习了一下用javascript实现的WebGL开源框架three.js。看到官网上非常酷炫的3D演示，着实让人心动不已！

从Hello World说起

还是依旧，我们通过一段小小的示例，来看看怎么使用three.js框架。

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）。

renderer.render(scene, camera);

二. 场景（Scene）

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

三. 相机（Camera）

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

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

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

另外，Camera中的坐标系统也与我们平时编程中的屏幕坐标系统不一样，它用的是右手坐标系统（几何中的坐标系）。

四. 光源（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的人，肯定会被里面的各种概念搅的天翻地覆。只要理清楚了上面所说的这些基本概念，我相信你也能很快入门。