开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十三天，点击查看活动详情

Three.js入门小白版(第一天)

下载three.js

threejs.org/build/three…

建立基本场景

在Three.js中有三要素：场景、摄像机和渲染器，只有以上三者结合才能渲染出可见的内容。

场景 Scene

如果学过3D的同学或许都知道Scene的作用,没有学过的就可以将其比作于我们编程语言中的main函数一样,除了摄像机以外基本上所有的东西都需要添加到这个Scene(main函数)中,不然你无法调用这些东西

摄像机 PerspectiveCamera

相机决定了场景中那个角度的景色会显示出来，Threejs中有多种相机

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

两种照相机中透视相机用的相对多一点

渲染器

渲染器决定了渲染的结果应该画在页面的什么元素上，并且以怎样的方式来绘制.

三者之间的关系

Three.js中的场景是一个物体的容器，开发者可以将需要的角色放入场景中；相机的作用就是面对场景，在场景中取一个合适的景，把它拍下来；渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示，其关系如下：

简单的demo

了解完三大要素后,接下来我们就需要给场景添加几何体

几何体

three.js自带几个常见几何体

立方体 BoxGeometry
圆 CircleGeometry
圆锥 ConeGeometry
圆柱 CylinderGeometry
平面 PlaneGeometry
球 SphereGeometry
管道 TubeGeometry

添加立方体

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

Three.js自带了几种材质，在这里我们使用的是MeshBasicMaterial。所有的材质都存有应用于他们的属性的对象。在这里为了简单起见，我们只设置一个color属性，值为0x00ff00，也就是绿色。

第三步，我们需要一个Mesh（网格）。网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。

默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。

完整代码

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-11-23 11:28:25
 * @LastEditors: solid
 * @LastEditTime: 2022-11-29 15:52:22
-->
<html>

<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body {
			margin: 0;
		}
	</style>
</head>

<body>
	<script src="js/three.js"></script>
	<script>
		// 场景
		var scene = new THREE.Scene();
 
		// 摄像机
		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		camera.position.z = 5;
		
		// 渲染器
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );
		// 渲染器 end
		
		// 物体
		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 );
		renderer.render(scene, camera);
	</script>
</body>

</html>

我们可以发现当你运行这个代码时,网页感觉像是2D并不是3D效果,这时需要用到requestAnimationFrame让物体动起来

function animate() {
			//循环渲染
			requestAnimationFrame(animate);
			//让几何体动起来
			cube.rotation.x += 0.01;
			cube.rotation.y += 0.01;
			renderer.render(scene, camera);
		}
animate();

requestAnimationFrame requestAnimationFrame重要主要是不断渲染页面,可能有人会好奇为什么不用定时器,可以用但是requestAnimationFrame有一个很好的功能就是页面切换会暂停