THREEJS使用入门（Createing a scene）

BinParker

已于 2023-03-13 10:02:04 修改

阅读量476

点赞数 1

分类专栏： JavaScript 3D library 前端 JavaScript 文章标签： javascript 开发语言

于 2023-03-10 12:03:45 首次发布

本文链接：https://blog.csdn.net/BinParker/article/details/129437567

版权

JavaScript 3D library 同时被 3 个专栏收录

9 篇文章 2 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

前端

5 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了THREEJS的基本使用，从创建场景、相机、渲染器开始，逐步构建一个旋转的立方体。通过设置透视相机、渲染器尺寸，以及动画循环实现立方体的动态效果。文章适合初学者入门THREEJS。

摘要由CSDN通过智能技术生成

这一部分将对three.js来做一个简要的介绍

首先将开始搭建一个场景，其中包含一个正在旋转的立方体

梦开始的地方

在开始使用threeJS之前，我们需要创建一个HTML文件来显示它（将下列HTML代码保存为你电脑上的一个HTML文件然后在你的浏览器中打开这个HTML文件。）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module">
			import * as THREE from 'https://unpkg.com/three/build/three.module.js';

			// The Javascript will go here.
		</script>
	</body>
</html>

我们接下来的所有代码将会写入到空的<script>标签中。

第一步创建Scene、camera、renderer

为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。


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 );
document.body.appendChild( renderer.domElement );

在上面我们建立了场景、相机、渲染器。

three.js里面有几种不同的相机，在这里，我们使用的是PerspectiveCamera（透视摄像机）。

第一个参数是视野角度（FOV）。视野角度就是无论在上面时候，你所能在显示器上看到的场景范围。
它的单位是角度（与弧度分开）
第二个参数是长宽比（aspect ratio）
也就是你用一个物体的宽除以它的高的值（width ÷ height）。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
第三个参数和第四个参数是近截面（near）和远截面（far）。当物体某些部分比摄像机的远截面远或者比近截面近的时候，该部分将不会被渲染到场景中。
现在你不用担心这个值的影响，在未来我们为了获得更好的渲染性能，将会在我们的应用程序里去设置它

最后是渲染器（这里是我们施展magic的地方）
除了我们在这里用到的WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器。当我们使用的浏览器版本过低时，或者由于其他原因不支持WebGL时，可以使用其他几种渲染器进行降级处理。

在创建了一个渲染器的实例后，我们还需要在我们的应用程序里设置一个渲染器尺寸。
比如说：我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景Scene填充满我们的应用程序。因此，我们可以将渲染器宽高设置为浏览器窗口宽高。对应性能比较敏感的应用程序来说，你可以使用setSize时传入一个较小的值

例如：window.innerWidth / 2和window.innerHeight / 2

这将使得应用程序在渲染的时候，会以一半的分辨率来进行渲染。

在上面代码的最后一步非常重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。

“嗯，看起来很不错，那我们接下来就添加一个立方体试试手感如何！

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;

要创建一个立方体，我们需要一个BoxGeometry（立方体）的对象，这个对象包含了一个立方体所有的顶点（vertices）和面（faces）。未来我们将会在这方面进行更多的探索！
对于这个立方体我们需要给它一个材质，来让它有颜色。
在Three.js中，有几种自带的材质，在这里我们使用的是MeshBasicMaterial。所有的材质都存有应用于他们属性的对象。
在这里为了方便理解，我们只设置了一个简单的color属性，值为0x00ff00，也就是green绿色。
在这里所做的事情，和在CSS或者PhotoShop中使用十六进制（hex colors）颜色格式来设置颜色方式一致。
最后，我们需要一个Mesh（网格）。网格包含一个几何体以及作用在几何体上的材质，我们可以直接将网格对象放入我们的场景中，并且让它在场景中自由移动。

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

第二步渲染场景

现在，如果将之前写好的代码copy到HTML文件中，你将不会在页面看到任何东西。因为我们还没对它进行真正的渲染。为此，我们需要使用一个被叫做渲染循环（render loop）或者动画循环（animate loop）的东西。

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

这里我们创建看一个使得渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是每秒60次）。
有人或许会问"为什么我们不直接用setInterval来实现刷新功能呢？"
当然，我们确实可以用setInterval，但是requestAnimationFrame有更好更多的优点。最重要的一点或许就是当用户切换到其他标签的时候，它会自己暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗我们电池的使用寿命。

第三步立方体动起来

在开始之前，如果你已经将上面的代码写入到了你所创建的文件中，你就可以看到一个绿色的小方块。下面，让我们来对这个小方块施加一些魔方------让它旋转起来。

将下列代码添加到animation（）函数中 renderer.render调用的上方:

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

这段代码每帧都会执行（正常情况下是60次/秒），这就让立方体有了一个看起来很不错的旋转动画。基本上来说，当应用程序运行时，如果你想要移动或者改变任何场景中的东西，都必须要经过这个动画循环。当然，你可以在这个动画循环里调用别的函数，这样你就不会写出有上百行代码的animate函数。

总结

恭喜你！你现在已经成功完成了你的第一个Three.js应用程序。虽然它很简单，但现在你已经有了一个入门的起点。

以下是完整代码：（编辑、运行或者修改代码有助于你更好的理解它是如何工作的）

<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module">
			import * as THREE from 'https://unpkg.com/three/build/three.module.js';

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