关于如何使用three.js的小教程<一>

昨天看了看three.js这个东西，身为一个3D引擎，他还是非常强大的。官网上有个tutorial讲的不甚具体。http://aerotwist.com/tutorials/getting-started-with-three-js/

扯淡的内容比較多，有个人做了翻译在这里http://blog.csdn.net/webgl_/article/details/6424749

有一个外国人的教程系列是这个http://www.smashinglabs.pl/three-js-tetris-tutorial粗略看了一下是好像做一个俄罗斯方块，代码比較多。

有一个中国人写的教程在这里http://www.html5china.com/HTML5features/WebGL/20111129_2989.html代码比較少，只是有非常多经典的图。

在github上面能够获取到three.js的源代码，直接下载ZIP即可了https://github.com/mrdoob/three.js/

眼下google chrome是不支持xp的webGL的，opera近期推出了一个实验版支持xp下的webGL，使用xp的用户能够搜一下。

文件夹大概是这个样子，build中装的是压缩好的js代码，使用Three.js的时候仅仅须要包括./build/Three.js就能够了。./build/custom 之中应该提供了一些供你自己定义使用的脚本。

./docs 下提供了一个很简陋的API文档，只是能够将就着看。

./examples 里面有许多的样例，这个很好。当中比較多的是webGL开头的和Canvas开头的文件，大概是提供了，两种技术实现的比較，webGL比Canvas快100倍(非官方统计)，毕竟webGL使用了硬件加速嘛，比較明显的看canvas_geometry_hierarchy.ht和webgl_geometry_hierarchy.html这两个样例。./examples 的子目录以下是一些元素的脚本比方 ./js/ShaderExtra.js
就是一些现成的shader代码，能够直接拿来用，或者一些字体和统计FPS的脚本，three.js里面用的是./js/stats.js这个脚本来做一些统计工作。还有就是一些models什么的。

./src 里面放的就是源代码了

./gui 里面应该是一些图形化的东西，没有细致研究。

./utils 里面是一些工具，应该是一些编译连接的脚本什么的。

three.js的使用比較简单，一个基本的camera ，一个基本的 scene ，一个render(这个东西翻译成渲染器，就是Canvas，WebGL，SVG什么的)，其他的light , materials,object,虾米的都是为了好看用的。

先说这个Camera ,three.js的camera有非常多种,最简单的叫做这个perspectiveCamera透视相机，或者这个远景相机，这样来新建一个实例。

var camera, scene, renderer;

var windowHalfX = window.innerWidth / 2;

var windowHalfY = window.innerHeight / 2;

camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 10000 );

camera.position.z = 1000;

四个属性各自是，摄像机的视锥角度，视口的长宽比，摄像机的近切面(Front Clipping Plane)和远切面(Back Clipping Plane)，这样就确定了摄像机的视锥。

position.z是垂直于屏幕，也就是近切面远切面的距离。

当然还能够通过camera.lookAt来调整camera的朝向，只是在这里不是必需。

以地球举例，如果地球垂直摆放，视锥角度非常小时，仅仅能看到赤道周围的图像，近切面远切面相距过近时仅仅能看到东半球或西半球，这个说也说不太清楚，自己改改參数试一试，即可。

scene的创建非常easy，直接new一下就好，然后就是把各种东西add到sence里面即可了，就像这样。

var camera, scene, renderer;

scene = new THREE.Scene();

scene.add( camera );

接下来就是加入一些object，这里我们使用一个叫做mesh的东西，使用这个网格模型，比較easy建立简单的几何体，球体啊，柱体啊，什么的，当然非常炫的modal还须要maya之类的专业工具。

mesh的结构是这种

var mesh;

mesh = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( './land_ocean_ice_cloud_2048.jpg' ), overdraw: true } ) );

scene.add( mesh );

创建一个球体的函数是这样

THERE.SphereGeomrtry(radius, segments, rings) 第一个參数是半径，后两个能够理解成球体的精细程度，数值越高球体就越圆，能够吧后两个參数调低自己体会一下。

THERE.MeshBasicMaterial() 就是材质了，假设想要一个单色材质的话能够这样

var sphereMaterial = new THREE.MeshLambertMaterial(

{

    color: 0xCC0000

});

使用自己定义图片的话是这样,overdraw是过度渲染的一个开关如今还不重要。

var sphereMaterial = new THREE.MeshBasicMaterial(

{

    map: THREE.ImageUtils.loadTexture( './land_ocean_ice_cloud_2048.jpg' ), overdraw: true

} ) );

最后设置一下mesh的位置，把它增加到scene中就能够了

mesh.position.y = - 250;

mesh.rotation.x = - 90 * Math.PI / 180;

scene.add( mesh );

渲染器的创建也非常easy，这里使用的是一个CanvasRenderer，最后须要把render的dom加到container的最后，简单点说就是，通过渲染器吧3D图像输出到页面上。

至于dom结构的介绍在这里http://www.w3school.com.cn/htmldom/是一个树形结构，appendChild方法，是把參数里的dom加入到指定节点，的最后一个节点。

var container = document.getElementById( 'container' );

renderer = new THREE.CanvasRenderer();

renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

循环渲染，实现3D图形的动态须要不断改变camera的位置，通过不断的渲染来达成动画的效果

render方法实现视角的转换，

animate方法实现循环渲染，

原理是无限递归调用，requestAnimationFrame这个函数非常牛逼，有兴趣能够看看源代码。

stats.update();是更新FPS的不用管。

function animate() {

		requestAnimationFrame( animate );

		render();

		stats.update();

	}

function render() {

		camera.position.x += ( mouseX - camera.position.x ) * 0.05;

		camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

		camera.lookAt( scene.position );

		mesh.rotation.y -= 0.005;

		renderer.render( scene, camera );

			}

最后把代码整合起来是这种，实现了一个，转动的地球。代码中用到的两张图片在exmples/textures中能够找到

<!doctype html>

<html lang="en">

	<head>

		<title>three.js canvas - geometry - earth</title>

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

		<style>

			body {

				color: #808080;

				font-family:Monospace;

				font-size:13px;

				text-align:center;

				background-color: #ffffff;

				margin: 0px;

				overflow: hidden;

			}

			#info {

				position: absolute;

				top: 0px; width: 100%;

				padding: 5px;

			}

			a {

				color: #0080ff;

			}

		</style>

	</head>

	<body>

		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div>

		<div id="container"></div>          //存放场景的块

		<script src="./Three.js"></script>    //直接把Three.js放在相同文件夹下就能够了

		<script src="./Stats.js"></script>	//这个是统计FPS的，没什么用，认为麻烦的话能够吧与Stats有关的代码删掉

		<script>

			var container, stats;

			var camera, scene, renderer;

			var mesh;

			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;

			var windowHalfY = window.innerHeight / 2;

			init();         //初始化

			animate();      //循环渲染

			function init() {

				container = document.getElementById( 'container' );

				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 100, 10000 );

				camera.position.z = 1000;

				scene.add( camera );

                               //创建球体

				mesh = new THREE.Mesh( new THREE.PlaneGeometry( 300, 300, 3, 3 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( './shadow.png' ), overdraw: true } ) );

				mesh.position.y = - 250;

				mesh.rotation.x = - 90 * Math.PI / 180;

				scene.add( mesh );

                                //创建阴影

				mesh = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( './land_ocean_ice_cloud_2048.jpg' ), overdraw: true } ) );

				scene.add( mesh );

				renderer = new THREE.CanvasRenderer();

				renderer.setSize( window.innerWidth, window.innerHeight );

				container.appendChild( renderer.domElement );

				stats = new Stats();

				stats.domElement.style.position = 'absolute';

				stats.domElement.style.top = '0px';

				container.appendChild( stats.domElement );

			}

			function animate() {

				requestAnimationFrame( animate );

				render();

				stats.update();

			}

			function render() {

				camera.position.x += ( mouseX - camera.position.x ) * 0.05;

				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

				camera.lookAt( scene.position );

				mesh.rotation.y -= 0.005;

				renderer.render( scene, camera );

			}

		</script>

	</body>

</html>

Deom的打包资源，能够在我的上传资源中下载。

http://download.csdn.net/detail/wangyi_lin/4164117

关于如何使用three.js的小教程<一>的更多相关文章

JS正则表达式完整教程
JS正则表达式完整教程(略长) 引言亲爱的读者朋友,如果你点开了这篇文章,说明你对正则很感兴趣. 想必你也了解正则的重要性,在我看来正则表达式是衡量程序员水平的一个侧面标准. 关于正则表达式的教程, ...
#1使用html+css+js制作网站教程准备
#1使用html+css+js制作网站教程准备本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...
JS处理事件小技巧
今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...
jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...
撸一个JS正则小工具
写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示项目地址代码部分首先把布局样式先写好. <!DOCTYPE html> ...
sea.js简单使用教程
sea.js简单使用教程下载sea.js, 并引入官网: http://seajs.org/ github : https://github.com/seajs/seajs 将sea.js导入项目 ...
1.1 vue.js devtools使用教程
1. vue.js devtools使用教程
js写插件教程深入
原文地址:https://github.com/lianxiaozhuang/blog 转载请注明出处 js 写插件教程深入 1.介绍具有安全作用域的构造函数 function Fn(name){ t ...
为帝国cms模板添加站内搜索小教程
由于客户的需要,最近都在整帝国cms,很多东西还是不熟悉,特别是帝国cms模板,以前用的那些网站模板一般是保存在ftp文件中,而帝国cms模板是直接保存在数据库中,修改是在网站后台的模板管理,得慢慢适 ...

随机推荐

poj 2274 The Race 最小堆
题目链接题目大意: 给n个小车, 每个小车有一个初始位置x和初始速度v, 保证x1 < x2..... <xn. 0<v<100. 然后问你一共会发生多少次超车, 以及前10 ...
[原创]使用GCC创建 Windows NT 下的内核DLL
原文链接:使用GCC创建 Windows NT 下的内核DLL 在温习<<Windows 2000 Driving>>分层驱动程序一章的时候,看到了关于紧耦合驱动连接方式,这种 ...
C语言实践——学生信息管理
这是本人做的第一个实践项目,用的知识都是书上有的,没有很多很复杂的知识同时因为没有学习 C语言图形方面的知识,所以界面做得很丑,暂时先这样吧源文件: #include <stdio.h&g ...
git忽略特殊文件
忽略特殊文件有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们,比如保存了数据库密码的配置文件啦,等等,每次git status都会显示Untracked files ...,有强迫症 ...
WISPr1.0
王桢珍王兵侯志强苑红中国移动研究院网络技术研究所, 北京100053 摘要本文详细介绍了WLAN国际漫游的WISPr1.0技术规范并探讨其具体实现,包括基于WISPr1.0的WLAN国 ...
Write operations are not allowed in read-only mode (FlushMode.MANUAL): Turn
这个异常我在网上查看了很多资料,一般都说是hibernate的session问题,让重新两个方法,但是我以前用的时候没问题啊,所以一直找问题,终于这个bug让我找到了,就是因为我插入操作的时候用的是别 ...
Holding Bin-Laden Captive!（母函数）
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
poj2486 Apple Tree （树形dp）
题意:有一颗苹果树,树上的u节点上有num[u]个苹果,树根为1号节点,囧king从根开始走,没走到一个节点就把接点上的苹果吃光,问囧king在不超过k步的情况下最多吃多少个苹果. 解题思路:处理出两 ...
引入css ，使用@import和link的方式
我们也经常听到有人说要使用link来引入CSS更好,但是你知道为什么吗? 继续往下看 linklink就是把外部CSS与网页连接起来. @importimport文字上与link的区别就是它可以把在一 ...
jquery数字验证大小比较
$("#rewardForm").validate({ rules: { "reward": { ...

关于如何使用three.js的小教程&lt;一&gt;

关于如何使用three.js的小教程&lt;一&gt;的更多相关文章

随机推荐

热门专题

关于如何使用three.js的小教程<一>

关于如何使用three.js的小教程<一>的更多相关文章