forked from Ovilia/ThreeExample.js
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
168 lines (156 loc) · 17.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38205696-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=100%, initial-scale=1" />
<title>ThreeExamples.js</title>
<link rel="shortcut icon" href="../blog/img/me.ico" />
<link rel="stylesheet" type="text/css" href="../blog/css/default.min.css" />
</head>
<body onload="_gaq.push(['_trackEvent', '404', document.referrer, location.herf]);">
<div id="contentDiv">
<div id="content">
<div class="rotLeft rotTop pageBack"></div>
<div class="rotRight rotTop pageBack"></div>
<div class="container page">
<h2 class="subtitle">《Three.js 入门指南》书例代码</h2>
<div class="pageTitle center">ThreeExamples.js</div>
<p>《Three.js 入门指南》是一本帮助初学者更快入门 Three.js 的电子书，可在<a href="http://read.douban.com/ebook/7412854/" target="_blank">豆瓣阅读</a>和<a href="http://www.ituring.com.cn/book/1272" target="_blank">图灵社区</a>（提供推送到 Kindle 服务）免费阅读。</p>
<p>本项目是该书中所有示例代码的集合，喜欢的话<a href="https://github.com/Ovilia/ThreeExample.js" target="_blank">在 GitHub 上</a>给我点个赞嘛~</p>
<h1>目录</h1>
<h2>第 1 章 概述</h2>
<p><a href="http://www.ituring.com.cn/article/47975" target="_blank">阅读原文</a></p>
<h3>例 1.1.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter1/1.1.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter1/1.1.1.html" target="_blank">查看代码</a></p>
<h3>例 1.2.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter1/1.2.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter1/1.2.1.html" target="_blank">查看代码</a></p>
<h2>第 2 章 照相机</h2>
<p><a href="http://www.ituring.com.cn/article/48665" target="_blank">阅读原文</a></p>
<h3>例 2.3.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter2/2.3.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter2/2.3.1.html" target="_blank">查看代码</a></p>
<h3>例 2.4.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter2/2.4.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter2/2.4.1.html" target="_blank">查看代码</a></p>
<h2>第 3 章 几何形状</h2>
<p><a href="http://www.ituring.com.cn/article/50039" target="_blank">阅读原文</a></p>
<h3>例 3.1.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter3/3.1.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter3/3.1.1.html" target="_blank">查看代码</a></p>
<h3>例 3.2.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter3/3.2.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter3/3.2.1.html" target="_blank">查看代码</a></p>
<h3>例 3.3.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter3/3.3.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter3/3.3.1.html" target="_blank">查看代码</a></p>
<h2>第 4 章 材质</h2>
<p><a href="http://www.ituring.com.cn/article/51313" target="_blank">阅读原文</a></p>
<h3>例 4.1.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter4/4.1.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter4/4.1.1.html" target="_blank">查看代码</a></p>
<h3>例 4.2.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter4/4.2.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter4/4.2.1.html" target="_blank">查看代码</a></p>
<h3>例 4.3.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter4/4.3.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter4/4.3.1.html" target="_blank">查看代码</a></p>
<h3>例 4.4.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter4/4.4.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter4/4.4.1.html" target="_blank">查看代码</a></p>
<h3>例 4.5.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter4/4.5.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter4/4.5.1.html" target="_blank">查看代码</a></p>
<h3>例 4.5.2</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter4/4.5.2.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter4/4.5.2.html" target="_blank">查看代码</a></p>
<h3>例 4.5.3</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter4/4.5.3.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter4/4.5.3.html" target="_blank">查看代码</a></p>
<h2>第 5 章 网格</h2>
<p><a href="http://www.ituring.com.cn/article/52525" target="_blank">阅读原文</a></p>
<h3>例 5.1.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter5/5.1.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter5/5.1.1.html" target="_blank">查看代码</a></p>
<h3>例 5.2.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter5/5.2.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter5/5.2.1.html" target="_blank">查看代码</a></p>
<h3>例 5.2.2</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter5/5.2.2.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter5/5.2.2.html" target="_blank">查看代码</a></p>
<h2>第 6 章 动画</h2>
<p><a href="http://www.ituring.com.cn/article/53315" target="_blank">阅读原文</a></p>
<h3>例 6.1.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter6/6.1.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter6/6.1.1.html" target="_blank">查看代码</a></p>
<h3>例 6.1.2</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter6/6.1.2.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter6/6.1.2.html" target="_blank">查看代码</a></p>
<h3>例 6.2.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter6/6.2.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter6/6.2.1.html" target="_blank">查看代码</a></p>
<h3>例 6.2.2</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter6/6.2.2.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter6/6.2.2.html" target="_blank">查看代码</a></p>
<h3>例 6.3.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter6/6.3.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter6/6.3.1.html" target="_blank">查看代码</a></p>
<h2>第 7 章 外部模型</h2>
<p><a href="http://www.ituring.com.cn/article/53810" target="_blank">阅读原文</a></p>
<h3>例 7.2.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter7/7.2.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter5/5.1.1.html" target="_blank">查看代码</a></p>
<h3>例 7.3.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter7/7.3.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter7/7.3.1.html" target="_blank">查看代码</a></p>
<h3>例 7.3.2</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter7/7.3.2.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter7/7.3.2.html" target="_blank">查看代码</a></p>
<h2>第 8 章 光与影</h2>
<p><a href="http://www.ituring.com.cn/article/54698" target="_blank">阅读原文</a></p>
<h3>例 8.1.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter8/8.1.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter8/8.1.1.html" target="_blank">查看代码</a></p>
<h3>例 8.1.2</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter8/8.1.2.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter8/8.1.2.html" target="_blank">查看代码</a></p>
<h3>例 8.1.3</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter8/8.1.3.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter8/8.1.3.html" target="_blank">查看代码</a></p>
<h3>例 8.2.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter8/8.2.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter8/8.2.1.html" target="_blank">查看代码</a></p>
<h3>例 8.3.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter8/8.3.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter8/8.3.1.html" target="_blank">查看代码</a></p>
<h3>例 8.4.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter8/8.4.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter8/8.4.1.html" target="_blank">查看代码</a></p>
<h3>例 8.5.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter8/8.5.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter8/8.5.1.html" target="_blank">查看代码</a></p>
<h2>第 9 章 着色器</h2>
<p><a href="http://www.ituring.com.cn/article/56575" target="_blank">阅读原文</a></p>
<h3>例 9.3.1</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter9/9.3.1.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter9/9.3.1.html" target="_blank">查看代码</a></p>
<h3>例 9.3.2</h3>
<p><a href="http://zhangwenli.com/ThreeExample.js/Chapter9/9.3.2.html" target="_blank">运行代码</a> | <a href="https://github.com/Ovilia/ThreeExample.js/blob/master/Chapter9/9.3.2.html" target="_blank">查看代码</a></p>
<h1>关于作者</h1>
<p>我是 <a href="http://zhangwenli.com" target="_blank">Ovilia</a>，一个懂点艺术的前端工程师。</p>
<p>在学习 Three.js 的过程中发现学习资料较少，中文教程更是少，所以写下了本书。希望能够帮助到更多想要学习 Three.js 的朋友，所以该书的所有章节和代码都免费开源。只是我自己对 Three.js 的了解也非常有限，所以只能写这样的入门级教程了，希望大家不要嫌弃~</p>
<p>如果你觉得本书对你很有帮助，想要感谢一下我，欢迎<a href="http://zhangwenli.com/blog/tip" target="_blank" onclick="_gaq.push(['_trackEvent', 'ToTip', 'InThreeJs', window.location.pathname]);">打赏一本书给我</a>！</p>
<div class="follow-me">
<div class="follow-me-txt">你可以在这里找到我：</div>
<a class="social-share-element social-twitter" href="https://twitter.com/OviliaZhang" target="_blank" title="Follow me on Twitter" onclick="_gaq.push(['_trackEvent', 'Follow', 'Twitter', window.location.pathname]);"></a>
<a class="social-share-element social-google" href="https://plus.google.com/u/0/112802684720065263732?rel=author" target="_blank" title="Follow me on Google Plus" onclick="_gaq.push(['_trackEvent', 'Follow', 'GPlus', window.location.pathname]);"></a>
<a class="social-share-element social-github" href="https://github.com/Ovilia" target="_blank" title="Follow me on GitHub" onclick="_gaq.push(['_trackEvent', 'Follow', 'GitHub', window.location.pathname]);"></a>
<a class="social-share-element social-linkedin" href="http://www.linkedin.com/profile/view?id=148742016" target="_blank" title="Follow me on LinkedIn" onclick="_gaq.push(['_trackEvent', 'Follow', 'LinkedIn', window.location.pathname]);"></a>
<a class="social-share-element social-weibo" href="http://weibo.com/plainjane" target="_blank" title="Follow me on Sina Weibo" onclick="_gaq.push(['_trackEvent', 'Follow', 'Weibo', window.location.pathname]);"></a>
<a class="social-share-element social-douban" href="http://www.douban.com/people/ovilia1024/" target="_blank" title="Follow me on Douban" onclick="_gaq.push(['_trackEvent', 'Follow', 'Douban', window.location.pathname]);"></a>
</div>
</div>
<div class="rotLeft rotBottom pageBack"></div>
<div class="rotRight rotBottom pageBack"></div>
</div>
<div id="footer-follow">
<a class="footer-follow-element footer-follow-twitter" href="https://twitter.com/OviliaZhang" target="_blank" title="Follow me on Twitter" onclick="_gaq.push(['_trackEvent', 'Follow', 'Twitter', 'HomeFooter']);"></a>
<a class="footer-follow-element footer-follow-google" href="https://plus.google.com/u/0/112802684720065263732?rel=author" target="_blank" title="Follow me on Google Plus" onclick="_gaq.push(['_trackEvent', 'Follow', 'GPlus', 'HomeFooter']);"></a>
<a class="footer-follow-element footer-follow-github" href="https://github.com/Ovilia" target="_blank" title="Follow me on GitHub" onclick="_gaq.push(['_trackEvent', 'Follow', 'GitHub', 'HomeFooter']);"></a>
<a class="footer-follow-element footer-follow-linkedin" href="http://www.linkedin.com/profile/view?id=148742016" target="_blank" title="Follow me on LinkedIn" onclick="_gaq.push(['_trackEvent', 'Follow', 'LinkedIn', 'HomeFooter']);"></a>
<a class="footer-follow-element footer-follow-weibo" href="http://weibo.com/plainjane" target="_blank" title="Follow me on Sina Weibo" onclick="_gaq.push(['_trackEvent', 'Follow', 'Weibo', 'HomeFooter']);"></a>
<a class="footer-follow-element footer-follow-douban" href="http://www.douban.com/people/ovilia1024/" target="_blank" title="Follow me on Douban" onclick="_gaq.push(['_trackEvent', 'Follow', 'Douban', 'HomeFooter']);"></a>
</div>
</div><!-- End of contentDiv -->
<div id="footerDiv">
<div id="footerImg"></div>
<div id="footerCnt">
<div id="footer">
</div>
</div>
</div><!-- End of footerDiv -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://zhangwenli.com/blog/js/jquery-1.11.1.min.js"></script>
</body>
</html>