文档章节

three.js docs翻译

ClassLibry
 ClassLibry
发布于 2017/05/12 11:27
字数 1143
阅读 120
收藏 0

原地址:three.js docs

创建一个场景(Creating a scene)

我们将要创建一个three.js项目。

开始之前

把下面把three.js的源代码考到你的电脑上,然后在主页里写下面这段代码。

注:截止到这篇文章发布之日时,three.js的源代码数量为43684行,注意粘贴的时候别少粘了。

<!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标签里写。

创建场景

要在浏览器里边显示点啥玩意,必须要三样东西:场景,摄像机和渲染器。

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有好多摄像机,现在我们使用透视摄像机,(至于什么是透视相机,为什么使用透视相机,除了透视相机还有什么其他相机,官网只字未提)第一个属性叫做视图区域。(75到底是个什么单位,怎么计算,它没说。。。)

第二个参数是一个比例,写上这玩意,你创建的那玩意在宽屏电脑上不至于被压瘪。

接下来两个参数是“近”“远”剪裁画板,摄像机太近或者太远都不会被渲染在画板上,(0.1、1000到底是个什么单位,什么概念它没说),我们还有更吊的东西还增强性能。(什么是更吊的东西它也没说)

再接下来是渲染器,这玩意挺神奇,除了WebGLRenderer,three.js还带来了一些其他的东西(a few others),其他的东西是什么呢?那句话实在是太长了,大意就是那些电脑差的、浏览器不支持webGL的用户也能用。

除了设置渲染器,我们还需要给我们的应用设置大小,一个比较好的办法就是设置宽高,比如浏览器宽高的一半setSize(window.innerWidth/2, window.innerHeight/2, false),这样它就能在你的浏览器里边显示的小一点。

最后,添加渲染器到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,这个对象包含各个定点(vertices)和表面(faces),接下来我们会为它添加更多的东西。

除了几何关系,我们还为这个立方体加上了材质,所谓材质,其实就是颜色,three.js有很多材质,但是我们现在选择基本网状材质(MeshBasicMaterial),为了演示的简单一点,我们给它加上了0x00ff00,实际上就是绿色,使用它就跟CSS或者photoshop没什么区别。

默认的,我们写了scene.add()方法。

渲染场景

如果我们像上面那样写,我们啥也看不到,因为我们还没让渲染起作用,如果想要这样做的话,需要调用渲染循环(render loop)

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

这个渲染循环保证我们的渲染器每秒60次的绘制一次场景,如果你想写一个游戏,你可能会问:“为啥不写一个setInterval方法”,我们也可以这样做,但是请求动画框架requestAnimationFrame)有很多优势,其中最重要的一点是,如果你的用户想要暂停或者切换浏览器标签时,它(指的是使用setInterval方法)将浪费宝贵的处理能力和电池寿命。

接下来调用渲染器的渲染方法(renderer.render)在你的渲染(render)函数里。

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

我们给了一个酷毙的旋转动画,当然你也可以添加其他的方法。

结果

恭喜你,我们完成了第一个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 render = function () {
				requestAnimationFrame( render );

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

				renderer.render(scene, camera);
			};

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

最后说一点,我按照这个代码这样写了,结果也没出现那个旋转的绿色方块。这是我见过的最厉(dan)害(teng)的官方网站。

© 著作权归作者所有

共有 人打赏支持
ClassLibry
粉丝 1
博文 10
码字总数 13889
作品 0
天津
程序员
加载中

评论(1)

SwatNo27
SwatNo27
你没有指定camera的lookAt属性,所以没有方块
three js相关的文档

Three js相关教程[http://hewebgl.com/article/articledir/1][1]官方的文档(敷衍了事,内容太少,只有Reference这部分可看)[http://threejs.org/docs/][2]Three js+SketchUp[https://gith......

一曲忠臣的战歌
2015/01/25
343
0
3D WebGL入门之场景

这是3D WebGL入门的系列文章的第一部分。 场景 场景是一个3D空间用来放置物体,相机和灯光。这个空间可大可小,完全取决于你的需求。 Three.js创建场景 相机 相机模拟真实世界中拍电影的摄像...

缪宇
2017/11/28
0
0
微信小游戏three.js开发

如何用three.js开发微信小游戏 首先我们先用微信开发者工具创建一个模块,然后先将里面不需要的内容删除,将three.js放到我们的项目中,并且在main.js都将其引入: 这里我用一个3D游戏中比较...

yidboy
04/13
0
0
SegmentFault 技术周刊 Vol.35 - WebGL:打开网页看大片

WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一,它把 Web 带入了 3D 的时代。 初识 WebGL 先通过几个使用 WebGL 的网站来认识下 WebGL 的魅力吧~ 温馨提示:浏览以下网页需要浏览...

keke
2017/10/19
0
0
使用WebGL + Three.js制作动画场景

摘要:现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插件的情况下渲染浏览器中的3D图像-这让3D渲染操作变得异常简单。随着虚拟现实和增强现实应用的发展,大型厂商们开...

众成翻译
2017/12/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

GO冒泡,二分查找

package mainimport("fmt")func main() {var arr [5]int = [5]int{11,13,9,2,25}maopao(&arr)fmt.Println("arr = ", arr) //[2 9 11 13 25]findIndex := binaryFind(&arr, 0......

汤汤圆圆
18分钟前
1
0
工作2年半跳槽面试阿里,成功拿到offer,凭什么?

2015年刚毕业的我,进入了一家小小的公司实习工作,在学校学了三年软件开发的我,还是想去寻找一份互联网行业的工作,这样更能学以致用发挥自己的特长。一直到18年三月份,我辞掉已有的工作,...

java知识分子
22分钟前
1
0
讲述下:Linux的10个最危险的命令

导读 Linux命令行佷有用、很高效,也很有趣,但有时候也很危险,尤其是在你不确定你自己在正在做什么时候。这篇文章将会向你介绍十条命令,但你最好不要尝试着去使用。 当然,以下命令通常都...

问题终结者
27分钟前
1
0
分库分表后如何部署上线?

引言 我们先来讲一个段子 面试官:“有并发的经验没?” 应聘者:“有一点。” 面试官:“那你们为了处理并发,做了哪些优化?” 应聘者:“前后端分离啊,限流啊,分库分表啊。。” 面试官:...

Java烂猪皮
32分钟前
1
0
Redis源码阅读笔记-快速列表

快速列表 快速列表(quicklist)是由压缩列表(ziplist)组成的一个双向链表,链表中,每一个节点都是以压缩列表(ziplist)的结构保存。 在 Redis3.2 后加入的新数据结构,在列表键中取代了双向链...

Jian_Ming
50分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部