最一本正经的threejs开发入门介绍

4,652 阅读3分钟

threejs 是用来开发三维产品的一个库,它是基于 web 图形标准 api——WebGL 的上层库,用 threejs 可以开发多种三维项目,应用于各种场景。

应用场景

3D 游戏

3D模型

数据可视化

web vr

不管是前几年很火爆的跳一跳还是炫酷的3D模型展示,还有很多公司都在做的数据可视化,甚至说最近很火的web vr(实景全景vr、虚拟全景vr),都可以用threejs来实现。换句说,只要是做三维的东西,没有threejs实现不了的(不废话么,代码多少而已)。

既然threejs这么好玩,赶紧来上手做一个东西还练练手吧!

十分钟写一个三维应用

我直接上代码了,这是从官方文档中抄的一个例子,可以在本地跑起来试下,不过你可能要先下载一个three.js的脚本。

<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="./three.js"></script>
		<script>
                        // 创建场景
			const scene = new THREE.Scene();
                        // 创建摄像机(透视摄像机)
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
                        // 创建渲染器
			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
                        // 将渲染器添加到dom节点中
			document.body.appendChild( renderer.domElement );
                        // 创建一个立方几何体对象
			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
                        // 给上材质(颜色)
			const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
                        // 创建一个网格(立方几何体)并添加到场景中
			const cube = new THREE.Mesh( geometry, material );
			scene.add( cube );
                        // 给摄像机一个空间位置
			camera.position.z = 5;
                        // 给上动画效果
			function animate() {
				requestAnimationFrame( animate );

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

				renderer.render( scene, camera );
			};

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

我在代码里加上了注释,你可以结合官方文档(在哪儿呢,往下看)理解这些专属对象的含义。

threejs开发入门

这个例子里用到了比较常用的几个对象,比如场景(scene)、摄像机(camera)、渲染器(render)等,它们的关系可以通过这张图来理解。

简单来说,所谓3D开发,就是首先搭建一个3D场景,然后在场景中加入各种3D元素,然后通过一个摄像机作为你的视角来摄像这个场景,最后把你拍摄到的这个影像用渲染器去渲染到浏览器中去。说起来就像是在拍电影一样,其实你可以这么去理解的。

为了帮助你理解,这里说下threejs中的三维坐标是什么样的,方便你在开发过程中去理解图形的位置。

就像这个图表达的意思一样,这是右手坐标图,xy坐标轴跟我们初中数学是一样的,然后多了一个从纸面上穿出来的z轴。

如果不能理解,再看看上面这张图,z轴从纸面穿出来,我们的视线是逆着z轴方向看过去的。这个三维坐标系对我们后面的开发非常重要,因为三维场景中,你可能需要在某个位置加个物件,或者需要从一点到另一个点做一个动画,你如果不能理解它的三维坐标系统,你就无法准确定位,更无法做出想要的效果了。

其实入门讲到这里就差不多了,因为就是入个门就可以了嘛,如果把前面那张图中的对象全讲一遍,那就不是入门了,那是开发文档了是吧!而开发文档,人家本来就有了,轮不到我再复述一次,来,上官方文档

行了,入门后就关门学习吧,这里面的门道很多,慢慢玩吧!