初识three.js

这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

what is three.js

three.js文档

three.js是一个基于webgl的3D图形编程框架
three.js用简单，直观的方式封装了3D图形编程中的常用对象 three.js在创建一个程序时需要有三个基本对象：

场景（screen）
相机（camera）
渲染器（render）

拿电影来类比的话，场景对应整个布景空间，相机是摄像头，渲染器用来把拍摄好的场景转换成成品。场景和相机代表了数据模型和3D观察空间，渲染器则变化了webgl绘图上下文和着色器。

创建一个场景

我们先开始搭建一个场景，完成包含一个正在旋转的立方体来简单了解一下three.js。

首先先创建场景
先调用THREE.Scene构造函数就行了

var scene = new THREE.Scene();

接着就是创建相机相机有几种不同相机，一类是透视相机，一类叫正交相机。我们这里使用透视相机。

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

HREE.PerspectiveCamera构造函数有几个参数

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面
第一个属性是**视野角度（FOV）** 。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是一个角度。
第二个值是**长宽比（aspect ratio）** 。 也就是你用一个物体的宽除以它的高的比值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
接下来的两个值是**远剪切面**和**近剪切面**。 也就是说当物体所在的位置比摄像机的**远剪切面**远或者所在位置比**近剪切面**近的时候，该物体超出的部分将不会被渲染到场景中。

这些参数一起定义了摄像机的viewing frustum（视锥体）。

接下来就是创建渲染器

var renderer = new THREE.WebGLRenderer(); // 创建渲染器
renderer.setSize( window.innerWidth, window.innerHeight ); // 设置渲染器大小尺寸
document.body.appendChild( renderer.domElement ); // 将renderer这个元素添加到HTML文档中

创建几何体

var geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 创建立方体
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); // 添加颜色
var cube = new THREE.Mesh( geometry, material );// 添加网格
scene.add( cube ); //添加立方体
camera.position.z = 5; //移动摄像机

默认情况下，当我们调用scene.add() 的时候，物体将会被添加到坐标为 (0,0,0) 的位置。但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
5. 让立方体旋转移动

function animate() { 
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
}
animate();

效果图

全部代码

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="three.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			var animate = function () {
				requestAnimationFrame( animate );

				cube.rotation.x += 0.01;
				cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

three.js使用指南(1）

初识three.js

what is three.js

创建一个场景

全部代码