javascript 3d 脚本库 - three.js的进行简要介绍

1、简单用法

下载压缩版的库文件并将其包含在html中，或者将其作为模块安装并导入，或者参阅如何自己构建库。

<script src="js/three.min.js"></script>

下面这段代码创建一个场景，一个相机和一个几何立方体，并且将立方体添加到场景中。然后它WebGL为场景和相机创建一个渲染器，并将该视口添加到document.body元素。最后，它为场景中的立方体动画。

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 1;

	scene = new THREE.Scene();

	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshNormalMaterial();

	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );

	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;

	renderer.render( scene, camera );

}

如果一切正常和顺利，你应该看到这个代码案例效果。

2、创建一个新的场景案例

本文的目标是对three.js进行简要介绍。我们将从设置一个(案例)场景开始，使用一个旋转的立方体。在页面底部提供一个工作示例，以防您遇到困难，需要帮助。

在我们开始之前

在你使用 three.js 之前。你需要一个地方来展示它。将下列HTML保存到您的计算机上的一个文件，以及复制 three.js在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显示任何东西，我们需要三样东西：scene, camera 和 renderer，以便我们可以用camera渲染场景。

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有几个不同的相机。现在，让我们使用PerspectiveCamera。

第一个属性是视野。FOV是在任何给定时刻在显示器上看到的场景的范围。该值以度为单位。

第二个是宽高比。您几乎总是希望使用元素的宽度除以高度，否则将获得与在宽屏幕电视机上播放老电影时相同的结果 - 图像看起来很凹陷。

接下来的两个属性是近端和远端剪切平面。这也就意味着，是对象远离相机比的数值远或近于附近将不会被渲染。您现在不必担心这一点，但是您可能希望在应用中使用其他值来获得更好的性能。

接下来是渲染器。这是魔术发生的地方。除了我们在这里使用的WebGLRenderer之外，three.js还带有一些其他的功能，通常用于旧版浏览器的用户或者因为某些原因没有WebGL支持的用户。

除了创建渲染器实例外，我们还需要设置我们希望渲染我们的应用程序的大小。使用我们想要用我们的应用程序填充的区域的宽度和高度是一个好主意 - 在这种情况下，浏览器窗口的宽度和高度。对于性能密集型应用程序，还可以给setSize设置较小的值，如window.innerWidth / 2和window.innerHeight / 2，这将使应用程序呈现一半尺寸。

如果你想保持你的应用程序的大小，但是以较低的分辨率渲染它，你可以通过以false作为updateStyle（第三个参数）来调用setSize来实现。例如，setSize（window.innerWidth / 2，window.innerHeight / 2，false）将以半分辨率呈现您的应用程序，因为您的<canvas>具有100％的宽度和高度。

最后但并非最不重要的是，我们将renderer元素添加到我们的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;

要创建一个立方体，我们需要一个BoxGeometry。这是包含多维数据集的所有点（顶点）和填充（面）的对象。我们将来会更多地探讨这一点。
除了几何外，我们还需要一种材料来为它着色。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调用上方添加以下内容：

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

这将每帧运行（每秒60次），并给立方体一个不错的旋转动画。基本上，任何你想移动或更改，而应用程序正在运行必须通过animate循环。你当然可以从那里调用其他函数，这样你就不会得到一个有数百行的动画函数。

结果

恭喜！你现在已经完成了你的第一个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>

原文地址：github.com/mrdoob/three.js

链接: https://fly63.com/article/detial/216