开发学院,分享开发教程和最新动态

Three.js 创建场景

Three.js 创建场景

  本节的目标是简要介绍three.js。我们将从设置场景开始,并使用旋转立方体。页面底部提供了一个工作示例,以防您陷入困境并需要帮助。

我们开始之前

  在使用 three.js之前,需要在某个地方显示它。将以下HTML与js /目录中的 three. js副本一起保存到计算机上的文件中,然后在浏览器中打开它。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// Our Javascript will go here.
</script>
</body>
</html>

  就这样。下面的所有代码都进入< script >标记中。

创建场景

  要使用 three.js实际显示任何内容,我们需要三个东西:场景、相机和渲染器,这样我们就可以使用相机渲染场景。

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

  让我们花一些时间理解一下做了什么,我们先设置了一个场景、相机和渲染器。

  相机中有three.js有几种不同的类型。现在,让我们使用透视相机。

  第一个属性是视图。FOV是在指定时刻在显示器上看到的场景的范围,数值以度为单位。

  第二个是长宽比,您几乎总是希望使用元素的宽度除以高度,否则您将获得与在宽屏电视上播放旧电影时的结果:图像看起来有点变形。

  接下来的两个属性是近裁剪平面和远裁剪平面。这意味着,距离摄像机较远或较近的对象不会被渲染。您现在不必为此担心,但您可能希望在应用程序中使用其他值来获得更好的性能。

  下一步是渲染器。这就是神奇的地方。除了我们这里使用的WebGLRenderer之外,three. js还附带了其他几个,通常用于使用较旧浏览器的用户或由于某种原因而不支持WebGL的用户。

  除了创建渲染器实例之外,我们还需要设置渲染应用程序所需的大小。使用应用程序填充区域的宽度和高度是一个好主意,在本例中是浏览器窗口的宽度和高度。对于性能密集型应用程序,还可以为setSize提供较小的值,如window.innerWidth/2 and window.innerHeight/2,,这将使应用程序渲染为一半大小。

  如果您希望保持应用程序的大小,但以较低的分辨率呈现它,则可以在调用setSize的时候通过设置updateStyle为false (第三个参数)来实现。例如,setSize ( windows.innerwidth/2,windows.innerheight/2,false )将以半分辨率渲染应用程序,前提是<canvas>具有100 %的宽度和高度。

  最后,我们将渲染器元素添加到HTML文档中。这是渲染器用来向我们显示场景的<canvas>元素。

  “这一切都很好,但你答应的那个立方体在哪儿?“我们现在就补充一下。

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;

  要创建立方体,我们需要一个长方体几何。这是一个包含立方体的所有顶点和填充(面)的对象。我们将在今后进一步探讨这一点。

  除了几何图形,我们还需要材质来给它上色。three.js有几种材质,但我们暂时使用MeshBasicMaterial 。所有材质都具有将应用于它们的属性对象。为了简单起见,我们只提供0x00ff00的颜色属性,它是绿色的。这与CSS或Photoshop (十六进制颜色)中的颜色工作方式相同。

  我们需要的第三件事是Mesh(网格)。网格是一个对象,它采用一个几何图形,并向其应用一种材质,然后我们可以将该材质插入到场景中,并自由移动。

  默认情况下,当我们调用scene.add()时,我们添加的对象将添加到坐标(0,0,0)中。这将导致照相机和立方体都在彼此内部。为了避免这种情况,我们将相机移出一点点。

渲染场景

  如果您将上面的代码复制到我们之前创建的HTML文件中,您将看不到任何内容。这是因为我们实际上还没有渲染任何内容。为此,我们需要所谓的渲染或动画循环。

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

 这个方法将创建一个循环,使渲染器在每次刷新屏幕时绘制场景(一般每秒刷新60次)。如果你还不熟悉在浏览器中编写游戏,你可能会问“为什么我们不使用setInterval ?”,如果你愿意当然可以,但是requestAnimationFrame有很多优点,最重要的一点是,当用户导航到另一个浏览器选项卡时,它会暂停,因此不会浪费他们宝贵的处理能力和电池寿命。

让立方体动起来

  如果您将上述所有代码插入到我们开始之前创建的文件中,您将看到一个绿色的盒子。让我们旋转它,让它变得有趣一点。

  在renderer.render正上方添加以下内容,在animate方法中进行渲染调用:

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

  这将逐帧执行,并给立方体一个的旋转动画。基本上,当应用程序运行时,您想要移动或更改的任何内容都必须经过animation的循环。当然,您可以从那里调用其他函数,这样您就不会得到一个数百p的动画函数

结果

  恭喜!您现在已经完成了第一个three. js应用程序。虽然它很简单,但是这将是你迈出的一大步。

  下面提供了完整的代码。好好利用它,更好地了解它的工作原理。

<html>
   	<head>
   	<title>My first three.js app</title>
   	<style>
   	body { margin: 0; }
   	canvas { width: 100%; height: 100% }
   	</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 );

   	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.1;
   	cube.rotation.y += 0.1;

   	renderer.render(scene, camera);
   	};

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