文档章节

three.js docs翻译

ClassLibry
 ClassLibry
发布于 2017/05/12 11:27
字数 1143
阅读 128
收藏 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
381
0
3D WebGL入门之场景

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

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

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

yidboy
2018/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

没有更多内容

加载失败,请刷新页面

加载更多

如何有效地计算JavaScript中对象的键/属性数量?

计算对象的键/属性数的最快方法是什么? 是否可以在不迭代对象的情况下执行此操作? 即不做 var count = 0;for (k in myobj) if (myobj.hasOwnProperty(k)) count++; (Firefox确实提供了一...

技术盛宴
20分钟前
2
0
百度网址安全中心拦截解除的办法分享

临近2019年底,客户的公司网站被百度网址安全中心拦截了,公司网站彻底打不开了,影响范围很大,于是通过朋友介绍找到我们SINE安全公司寻求帮忙解封,关于如何解除百度的安全拦截提示,下面就...

网站安全
31分钟前
3
0
Tomcat8源码分析-启动流程-start方法

上一篇:Tomcat8源码分析-启动流程-load方法 前面讲了启动流程中的Catalina.load,进一步调用绝大部分组建的init操作,主要完成对server.xml解析,并根据解析的结果结合设置的Rule(规则)构造...

特拉仔
40分钟前
6
0
Xamarin.FormsShell基础教程(7)Shell项目关于页面的介绍

Xamarin.FormsShell基础教程(7)Shell项目关于页面的介绍 轻拍标签栏中的About标签,进入关于页面,如图1.8和图1.9所示。它是对应用程序介绍的页面。 该页面源自Views文件夹中的AboutPage.x...

大学霸
46分钟前
3
0
一步一步理解Impala query profile(一)

很多Impala用户不知道如何阅读Impala query profile来了解一个查询背后正在执行的操作,从而在此基础上对查询进行调优以充分发挥查询的性能。因此我想写一篇简单的文章来分享我的经验,并希望...

九州暮云
47分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部