three.js文档翻译-----第一篇场景scene

fqg05

浏览: 55671 次
性别:
来自: 海南

最近访客更多访客>>

qqggcc

BuFanQi_Info

wu1g119

lp151709

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

文档

本人英语水平有限，只限个人兴趣爱好翻译此文档，欢迎各位网友拍砖和指点，本翻译未经雕琢，仅凭感觉弄出第一稿，可以肯定这不会是第一稿，如需了解three.js的HTML5 3D类库的资料文档，大家可以到git去下载，地址是https://github.com/mrdoob/three.js

1.创建一个场景（scene）

本节的目的是为了给Three.js简要介绍。我们将建一个旋转立方体的场景。如果你被还不明白，我们将提供了一个的例子以供你参考；

Three.js是什么？

如果你正在读这篇文章，估计你之前对Three.js有一些了解还有它能帮助你做些什么，但还是让我们简单介绍一下它。

Three.js是一个库，使得WebGL-3D在浏览器中展示非常容易。举个例子，我们使用原生态的WebGL语法来描述一个立方体，我们需要写几百行Javascript和着色器代码，但是如果用

three.js的话，我们只需要很小部分就可以达到这种效果，因为这个类库已经帮你封装好了函数。

(1)开始之前

在开始学习之前，你可以把下面这段代码保存起来并且运行它

************************

<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<body>
		<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

************************

我们添加的代码都放在script标签里面

(2)建立一个场景（scene）

为了能够使用tree.js来展示效果，我们需要做三件事情：创建场景（scene），视角（camera），渲染器（renderer）；

********************************

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

********************************

让我们来看这段代码，我们已经建立场景，视角，渲染器，在我们的类库中有几种不同的视角cameras，我们将在后面章节里面讲解；现在我们就以其中的一个类

perspectiveCamera作为我们的camera视角，它的第一个属性是视角，第二个是宽高比；很多时候我们都使用元素的宽度除以高度；最后的两个属性是near和far对页面裁剪的属

性，如果一个对象远离视角比这个far值还大，或者比near值还小就可能不会被显示，不过你不用担心，你也可以使用其他值从而获得更好的展示效果；

下一步是展示，这是奇迹发生的地方，此外还有一点要说的是我们除了创建渲染器实例，还要设置我们应用程序的大小，我们使用浏览器的宽和高来填充我们游戏屏幕的宽和高，

但是对于性能要求紧张的游戏，你可能需要设置小一点的值，比如1/2的高度和宽度，还有减少一部分分辨率，但这并不表示你的游戏只能填满窗口的一半，只是看起来模糊了一点

；

接下来我们要在HTML里面展示我们的元素，<canvas>元素将通过场景进行渲染；

好了，我们一切都准备好了，那么我们的立方体在哪里呢？好，现在让我们把他给加上去

***************************

var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

*************************************

为了建立一个立体型我们需要一个cubeGeometry 这个对象包含所有点(vertices)和面(fill), 我们将在后面章节中更详细描述；

除了几何图形我们还需要材质颜色，three.js为我们配备几种材质，但我们这里使用MeshBasicMaterial ，所有的材质都

应用到一个对象的属性，为了使事情变得简单，我们只用到颜色的属性0x00ff00 它表示绿色，同样的方式我们也在css和photoshop里面使用。

第三件事我们需要网格Mesh 一个网格对象是一个场景包含着材质的几何图形并且能够进行移动；

默认情况下，我们会调用scene.add()方法，我们添加的东西将被添加到coordinates(0,0,0)坐标上去，这可能会使相机camera和立方体相互覆盖，为了避免

这种情况发生，我们需要移动我们camera视角；

(3)渲染场景

如果你拷贝之前的代码，你看不到任何效果，这是因为我们没有渲染任何东西，为此，我们需要调用render循环渲染

******************

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

*******************

这将创建一个循环来渲染场景(每分钟六十次)，如果你是第一次写浏览端网页游戏的话，你可能会问为什么不用setInterval函数呢

这函数也可以实现，但是使用requestAnimationFrame 有很多好处；但是最重要的是，它会停止资源占用，当用户导航到另一个浏览器“选项卡的时候，因此不会浪费CUP处理能力和相关资源。

立方体动画

如果你将上面代码插入之前的HTML文件，你可以看到一个绿色盒子，现在我们使立方体运转起来；

在render函数的render调用添加以下代码

******************

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

******************

他将运转每帧一分钟六十次，这就产生一个漂亮的旋转立方体动画；通常上来说，你都需要通过render渲染循环调用来实现游戏和应用程序的

运转动作，比如改变移动；当然你也可以调用其他函数。

运行结果

恭喜你，你可以完成你第一个trhee.js的应用程序，非常简单，你可以运行在任何地方，全部完整代码都在下面，运行它并且了解他的工作

原理；

*******************************

<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<body>
		<script src="three.min.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.CubeGeometry(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 render = function () {
				requestAnimationFrame(render);

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

				renderer.render(scene, camera);
			};

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

********************************

分享到：

three.js------视角篇（camera） | 关于iframe的自适应高度问题

2013-09-24 14:25
浏览 948
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论