文档章节

three.js docs翻译

ClassLibry
 ClassLibry
发布于 2017/05/12 11:27
字数 1143
阅读 112
收藏 0
点赞 0
评论 1

原地址: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
win7下安装node.js,包括npm 之后将coffeescript格式文件编译成js文件

这是我为什么去下node.js的原因以及经过。您也可以点击我列出的官网,自己尝试一下。(这个安装过程是傻瓜式的,至少我没有碰到问题) 我呢,在做一个毕设,用到了three.js,想实现物体的布尔...

騡月
2016/04/02
165
1
three.js简介 —— 3D框架

threejs 随着HTML5的普及,网页的表现能力越来越强大,浏览器提供了WebGL接口,可以通过调用对应API进行3D图形的绘制,Three.js在这些基础接口之上又做了一层封装。 原文链接 特点 Three.js...

bestvist
2017/12/26
0
0
Three.js使用与踩坑(动画制作导出,Three.js加载模型与动画)

最近比较忙,公司有项目要求要搞WebAR,各种google后,得到结果是ARToolkit库加Three.js库,ARToolkit在这里就不说了,有兴趣的自己百度,或者这里了解一下,WEBAR已经有大牛实现了框架,可以...

AngerCow
2017/12/11
0
0
three.js基础几何体:立方体,球,圆柱的绘制

作为three.js的学习入门,一直在思考要怎样写才可以更符合初学者,对于我自己来说,本身也不是资深的玩家,也是入门不久的菜鸟,但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性...

qq_37338983
2017/11/18
0
0
whs.js 2.0.0 发布, 基于 three.js 的超快 3D 框架

whs.js 2.0.0 已发布,whs.js(也称 WhitestormJS)是适用于 Web 应用和游戏的超快 3D 框架,基于Three.js 。 更新内容: Three.js 版本从 r85 更新至 r86 新增 新增 使用 physics 的旋转模型...

王练
2017/07/03
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

rabbitmq学习记录(六)交换机Exchange-direct

实现功能:一条消息发送给多个消费者 交换机模式:direct 相比于之前的fanout模式,可以进一步的筛选获取消息的消费者。 fanout模式下,只要消费者监听的队列,已经与接收生产者消息的交换机...

人觉非常君
17分钟前
0
0
Java 之 枚举

Java 中声明的枚举类,均是 java.lang.Enum 类的子类,Enun 类中的常用方法有: name() 返回枚举对象名称 ordinal() 返回枚举对象下标 valueOf(Class enumType, String name) 转换枚举对象 ...

绝世武神
26分钟前
0
0
使用爬虫实现代理IP池之放弃篇

啥叫代理IP以及代理IP池 概念上的东西网上搜索一下就好了,这里简单科普一下(大部分会读这篇文章的人,基本是不需要我来科普的),白话说就是能联网并提供代理访问互联网的服务器,它提供的...

一别丶经年
42分钟前
0
0
sqoop导入数据到Base并同步hive与impala

使用Sqoop从MySQL导入数据到Hive和HBase 及近期感悟 基础环境 Sqool和Hive、HBase简介 Sqoop Hive HBase 测试Sqoop 使用Sqoop从MySQL导入数据到Hive 使用复杂SQL 调整Hive数据类型 不断更新 ...

hblt-j
今天
0
0
Dart 服务端开发 文件上传

clent端使用angular组件 upload_component.html form id="myForm" method="POST" enctype="multipart/form-data"> <input type="file" name="fileData"> <!-- file field --></form>......

scooplol
今天
0
0
apache和tomcat同时开启,乱码问题

tomcat和apache同时开启,会走apache的转发,执行的是AJP/1.3协议。所以在tomcat的配置文件server中, <Connector port="8009" protocol="AJP/1.3" redirectPort="8443" useBodyEncodingForU......

Kefy
今天
0
0
使用ssh-keygen和ssh-copy-id三步实现SSH无密码登录 和ssh常用命令

ssh-keygen 产生公钥与私钥对. ssh-copy-id 将本机的公钥复制到远程机器的authorized_keys文件中,ssh-copy-id也能让你有到远程机器的home, ~./ssh , 和 ~/.ssh/authorized_keys的权利 第一步...

xtof
今天
0
0
orcale 查询表结构

SELECT t.table_name, t.colUMN_NAME, t.DATA_TYPE || '(' || t.DATA_LENGTH || ')', t1.COMMENTS FROM User_Tab_Cols t, User_Col_Comments t1WHERE t.table_name......

wertwang
今天
0
0
华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大

华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大!华为nova3超级慢动作酷玩抖音,没有办法我就是这么强大! 在华为最新发布的nova 3手机上,抖音通过华为himedia SDK集成了60fps、超级...

华为终端开放实验室
今天
0
0
多 SSH Key 实现同一台服务器部署多 Git 仓库

本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 SSH Key 进行 gi...

yeahlife
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部