【暑期实训】2021-7-5 three.js学习（一）

本文链接：https://blog.csdn.net/weixin_44179269/article/details/118544445

文章目录

Three.js基础学习

在Three.js中，要渲染物体到网页中，需要3个基本对象：

场景（scene）
相机（camera）
渲染器（renderer）
场景对应于整个布景空间，相机是拍摄镜头，渲染器用来把拍摄好的场景转换成胶卷。

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 );

1、场景（scene）

var scene = new THREE.Scene();

场景对应于整个布景空间，在Threejs中场景就只有一种，用THREE.Scene来表示。

2、相机（camera）

在Threejs中最常用的相机有两种

正投影相机THREE.OrthographicCamera
透视投影相机THREE.PerspectiveCamera

(1) 正投影相机THREE.OrthographicCamera

 var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );

函数构造：OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
参考
正交投影相机示意图如下：
在这里插入图片描述
(2) 透视投影相机THREE.PerspectiveCamera

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );

函数构造：PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
参考
透视投影相机示意图如下：
在这里插入图片描述

3、渲染器（renderer）

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

除了创建renderer实例，还需要设置渲染空间的尺寸，一般使用目标屏幕的宽高（window.innerWidth和window.innerHeight），也可以给定一个尺寸。
渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。

4、添加对象

现在的场景中是空的，我们向场景中加入最简单的立方体。

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

camera.position.z = 5;

创建几何体，创建材质，利用几何体和材质创建对象，将对象加入场景scene中。
默认情况下，当我们调用scene.add()的时候，物体将会被添加到坐标为(0,0,0)的位置。但这可能会使得摄像机的位置和立方体相互重叠（摄像机位于立方体中）。为了防止这种情况的发生，需要将摄像机稍微向外移动一些。

5、渲染场景

function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();

在这里我们创建了一个循环——这使得渲染器能够在每次屏幕刷新时对场景进行绘制（在大多数屏幕上，刷新率一般是60次/秒）。
requestAnimationFrame函数就是让浏览器去执行一次参数中的函数，这样通过上面render中调用requestAnimationFrame()函数，requestAnimationFrame()函数又让rander()再执行一次，就形成了我们通常所说的游戏循环了。

6、使立方体动起来

在animate()函数中添加

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

这一段代码将在每一帧时被渲染时调用（正常情况下是60次/秒），这就让立方体有了一个看起来很不错的旋转动画。
除了改变立方体的旋转角度、位置，也可以通过改变相机位置角度达到同样动起来的效果。

完整代码（附详细备注）：

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="build/three.js"></script>
		<script>
		    // 场景（scene）
			var scene = new THREE.Scene();
			// 相机（camera）
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
			// 渲染器（renderer）
			var renderer = new THREE.WebGLRenderer(); // 创建renderer实例
			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: 0x4ca7c1 } ); //创建材质
			var cube = new THREE.Mesh( geometry, material ); // 用几何体和材质创建对象
			scene.add( cube ); // 对象加入场景scene中

			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>