Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
2cd12340
T
three.js
项目概览
Ablesons
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
2cd12340
编写于
6月 13, 2010
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
- Added codecs metadata on video demo.
- Added terrain demo.
上级
3755d003
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
317 addition
and
9 deletion
+317
-9
README.md
README.md
+2
-1
assets/examples/06_terrain.png
assets/examples/06_terrain.png
+0
-0
examples/geometry_terrain.html
examples/geometry_terrain.html
+305
-0
examples/materials_video.html
examples/materials_video.html
+8
-6
examples/primitives/Plane.js
examples/primitives/Plane.js
+2
-2
未找到文件。
README.md
浏览文件 @
2cd12340
...
...
@@ -17,6 +17,7 @@ Similar projects: [pre3d](http://deanm.github.com/pre3d/), [pvjs](http://code.go
### Examples ###
[
![geometry_terrain
](
http://github.com/mrdoob/three.js/raw/master/assets/examples/06_terrain.png
)
](http://mrdoob.com/projects/three.js/examples/geometry_terrain.html)
[
![materials_video
](
http://github.com/mrdoob/three.js/raw/master/assets/examples/05_video.png
)
](http://mrdoob.com/projects/three.js/examples/materials_video.html)
[
![geometry_vr
](
http://github.com/mrdoob/three.js/raw/master/assets/examples/04_vr.png
)
](http://mrdoob.com/projects/three.js/examples/geometry_vr.html)
[
![geometry_cube
](
http://github.com/mrdoob/three.js/raw/master/assets/examples/03_cube.png
)
](http://mrdoob.com/projects/three.js/examples/geometry_cube.html)
...
...
@@ -30,7 +31,7 @@ Similar projects: [pre3d](http://deanm.github.com/pre3d/), [pvjs](http://code.go
[
![jsflowfield4d
](
http://github.com/mrdoob/three.js/raw/master/assets/projects/00_jsflowfield4d.png
)
](http://test.sjeiti.com/jsflowfield4d/)
[
![spikeball
](
http://github.com/mrdoob/three.js/raw/master/assets/projects/03_spikeball.png
)
](http://kile.stravaganza.org/lab/js/spikeball/)
###
How to us
e ###
###
Usag
e ###
The library needs to be included first thing.
...
...
assets/examples/06_terrain.png
0 → 100644
浏览文件 @
2cd12340
13.0 KB
examples/geometry_terrain.html
0 → 100644
浏览文件 @
2cd12340
<!DOCTYPE HTML>
<html
lang=
"en"
>
<head>
<title>
three.js - geometry - terrain
</title>
<meta
charset=
"utf-8"
>
<style
type=
"text/css"
>
body
{
color
:
#71544e
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
background-color
:
#bfd1e5
;
margin
:
0px
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
padding
:
5px
;
}
a
{
color
:
#b07861
;
}
</style>
</head>
<body>
<div
id=
"container"
><br
/><br
/><br
/><br
/><br
/>
Generating...
</div>
<div
id=
"info"
><a
href=
"http://github.com/mrdoob/three.js"
target=
"_blank"
>
three.js
</a>
- terrain demo.
</div>
<script
type=
"text/javascript"
src=
"http://github.com/mrdoob/stats.js/raw/master/build/stats.js"
></script>
<script
type=
"text/javascript"
src=
"../build/three.js"
></script>
<script
type=
"text/javascript"
src=
"primitives/Plane.js"
></script>
<script
type=
"text/javascript"
>
var
Perlin
=
function
()
{
// http://mrl.nyu.edu/~perlin/noise/
var
p
=
[
151
,
160
,
137
,
91
,
90
,
15
,
131
,
13
,
201
,
95
,
96
,
53
,
194
,
233
,
7
,
225
,
140
,
36
,
103
,
30
,
69
,
142
,
8
,
99
,
37
,
240
,
21
,
10
,
23
,
190
,
6
,
148
,
247
,
120
,
234
,
75
,
0
,
26
,
197
,
62
,
94
,
252
,
219
,
203
,
117
,
35
,
11
,
32
,
57
,
177
,
33
,
88
,
237
,
149
,
56
,
87
,
174
,
20
,
125
,
136
,
171
,
168
,
68
,
175
,
74
,
165
,
71
,
134
,
139
,
48
,
27
,
166
,
77
,
146
,
158
,
231
,
83
,
111
,
229
,
122
,
60
,
211
,
133
,
230
,
220
,
105
,
92
,
41
,
55
,
46
,
245
,
40
,
244
,
102
,
143
,
54
,
65
,
25
,
63
,
161
,
1
,
216
,
80
,
73
,
209
,
76
,
132
,
187
,
208
,
89
,
18
,
169
,
200
,
196
,
135
,
130
,
116
,
188
,
159
,
86
,
164
,
100
,
109
,
198
,
173
,
186
,
3
,
64
,
52
,
217
,
226
,
250
,
124
,
123
,
5
,
202
,
38
,
147
,
118
,
126
,
255
,
82
,
85
,
212
,
207
,
206
,
59
,
227
,
47
,
16
,
58
,
17
,
182
,
189
,
28
,
42
,
223
,
183
,
170
,
213
,
119
,
248
,
152
,
2
,
44
,
154
,
163
,
70
,
221
,
153
,
101
,
155
,
167
,
43
,
172
,
9
,
129
,
22
,
39
,
253
,
19
,
98
,
108
,
110
,
79
,
113
,
224
,
232
,
178
,
185
,
112
,
104
,
218
,
246
,
97
,
228
,
251
,
34
,
242
,
193
,
238
,
210
,
144
,
12
,
191
,
179
,
162
,
241
,
81
,
51
,
145
,
235
,
249
,
14
,
239
,
107
,
49
,
192
,
214
,
31
,
181
,
199
,
106
,
157
,
184
,
84
,
204
,
176
,
115
,
121
,
50
,
45
,
127
,
4
,
150
,
254
,
138
,
236
,
205
,
93
,
222
,
114
,
67
,
29
,
24
,
72
,
243
,
141
,
128
,
195
,
78
,
66
,
215
,
61
,
156
,
180
];
for
(
var
i
=
0
;
i
<
256
;
i
++
)
{
p
[
256
+
i
]
=
p
[
i
];
}
function
fade
(
t
)
{
return
t
*
t
*
t
*
(
t
*
(
t
*
6
-
15
)
+
10
);
}
function
lerp
(
t
,
a
,
b
)
{
return
a
+
t
*
(
b
-
a
);
}
function
grad
(
hash
,
x
,
y
,
z
)
{
var
h
=
hash
&
15
;
var
u
=
h
<
8
?
x
:
y
,
v
=
h
<
4
?
y
:
h
==
12
||
h
==
14
?
x
:
z
;
return
((
h
&
1
)
==
0
?
u
:
-
u
)
+
((
h
&
2
)
==
0
?
v
:
-
v
);
}
return
{
noise
:
function
(
x
,
y
,
z
)
{
var
floorX
=
Math
.
floor
(
x
),
floorY
=
Math
.
floor
(
y
),
floorZ
=
Math
.
floor
(
z
);
var
X
=
floorX
&
255
,
Y
=
floorY
&
255
,
Z
=
floorZ
&
255
;
x
-=
floorX
;
y
-=
floorY
;
z
-=
floorZ
;
var
xMinus1
=
x
-
1
,
yMinus1
=
y
-
1
,
zMinus1
=
z
-
1
;
var
u
=
fade
(
x
),
v
=
fade
(
y
),
w
=
fade
(
z
);
var
A
=
p
[
X
]
+
Y
,
AA
=
p
[
A
]
+
Z
,
AB
=
p
[
A
+
1
]
+
Z
,
B
=
p
[
X
+
1
]
+
Y
,
BA
=
p
[
B
]
+
Z
,
BB
=
p
[
B
+
1
]
+
Z
;
return
lerp
(
w
,
lerp
(
v
,
lerp
(
u
,
grad
(
p
[
AA
],
x
,
y
,
z
),
grad
(
p
[
BA
],
xMinus1
,
y
,
z
)),
lerp
(
u
,
grad
(
p
[
AB
],
x
,
yMinus1
,
z
),
grad
(
p
[
BB
],
xMinus1
,
yMinus1
,
z
))),
lerp
(
v
,
lerp
(
u
,
grad
(
p
[
AA
+
1
],
x
,
y
,
zMinus1
),
grad
(
p
[
BA
+
1
],
xMinus1
,
y
,
z
-
1
)),
lerp
(
u
,
grad
(
p
[
AB
+
1
],
x
,
yMinus1
,
zMinus1
),
grad
(
p
[
BB
+
1
],
xMinus1
,
yMinus1
,
zMinus1
))));
}
}
}
//
var
SCREEN_WIDTH
=
window
.
innerWidth
,
SCREEN_HEIGHT
=
window
.
innerHeight
;
var
container
,
stats
;
var
camera
,
scene
,
renderer
;
var
mesh
;
var
mouseX
=
0
;
var
mouseY
=
0
;
var
windowHalfX
=
window
.
innerWidth
>>
1
;
var
windowHalfY
=
window
.
innerHeight
>>
1
;
init
();
setInterval
(
loop
,
1000
/
60
);
function
init
()
{
container
=
document
.
getElementById
(
'
container
'
);
camera
=
new
THREE
.
Camera
(
0
,
0
,
500
);
camera
.
focus
=
300
;
scene
=
new
THREE
.
Scene
();
var
heightMap
=
height
(
1024
,
1024
);
var
textureMap
=
shadow
(
heightMap
);
var
material
=
new
THREE
.
BitmapUVMappingMaterial
(
textureMap
);
var
quality
=
20
;
var
quality1
=
quality
+
1
;
var
plane
=
new
Plane
(
2000
,
2000
,
quality
,
quality
);
var
data
=
heightMap
.
getContext
(
'
2d
'
).
getImageData
(
0
,
0
,
heightMap
.
width
,
heightMap
.
height
).
data
;
var
pixelsPerTriangle
=
Math
.
floor
(
heightMap
.
width
/
quality1
);
for
(
var
y
=
0
;
y
<
quality1
;
y
++
)
{
for
(
var
x
=
0
;
x
<
quality1
;
x
++
)
{
plane
.
vertices
[
x
+
y
*
quality1
].
position
.
z
=
data
[((
x
*
pixelsPerTriangle
)
+
(
y
*
pixelsPerTriangle
)
*
heightMap
.
width
)
*
4
];
}
}
mesh
=
new
THREE
.
Mesh
(
plane
,
material
);
mesh
.
rotation
.
x
=
-
90
*
Math
.
PI
/
180
;
scene
.
add
(
mesh
);
renderer
=
new
THREE
.
CanvasRenderer
();
renderer
.
setSize
(
SCREEN_WIDTH
,
SCREEN_HEIGHT
);
container
.
innerHTML
=
""
;
container
.
appendChild
(
renderer
.
domElement
);
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
container
.
appendChild
(
stats
.
domElement
);
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
}
function
onDocumentMouseMove
(
event
)
{
mouseX
=
(
event
.
clientX
-
windowHalfX
);
mouseY
=
(
event
.
clientY
-
windowHalfY
);
}
function
loop
()
{
camera
.
position
.
x
+=
(
mouseX
-
camera
.
position
.
x
)
*
.
05
;
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
05
;
renderer
.
render
(
scene
,
camera
);
stats
.
update
();
}
function
height
(
width
,
height
)
{
var
canvas
,
context
,
image
,
data
;
canvas
=
document
.
createElement
(
'
canvas
'
);
canvas
.
width
=
width
;
canvas
.
height
=
height
;
context
=
canvas
.
getContext
(
'
2d
'
);
context
.
fillStyle
=
'
#000
'
;
context
.
fillRect
(
0
,
0
,
width
,
height
);
image
=
context
.
getImageData
(
0
,
0
,
width
,
height
);
data
=
image
.
data
;
var
perlin
=
new
Perlin
();
var
size
=
width
*
height
;
var
quality
=
2
;
var
zz
=
Math
.
random
()
*
100
;
for
(
var
j
=
0
;
j
<
4
;
j
++
)
{
var
x
=
0
,
y
=
0
,
yy
=
0
;
quality
*=
4
;
for
(
var
i
=
0
;
i
<
size
;
i
++
)
{
data
[
i
*
4
]
+=
Math
.
floor
(
perlin
.
noise
(
x
/
quality
,
yy
,
zz
)
*
quality
+
10
);
x
++
;
if
(
x
==
width
)
{
x
=
0
;
y
++
;
yy
=
y
/
quality
;
}
}
}
context
.
putImageData
(
image
,
0
,
0
);
return
canvas
;
}
function
shadow
(
texture
)
{
var
canvas
,
context
,
image
,
data
,
src_data
,
index
,
level
,
diff
,
width
=
texture
.
width
,
height
=
texture
.
height
;
canvas
=
document
.
createElement
(
'
canvas
'
);
canvas
.
width
=
width
;
canvas
.
height
=
height
;
context
=
canvas
.
getContext
(
'
2d
'
);
context
.
fillStyle
=
'
#000
'
;
context
.
fillRect
(
0
,
0
,
width
,
height
);
image
=
context
.
getImageData
(
0
,
0
,
width
,
height
);
data
=
image
.
data
;
src_data
=
texture
.
getContext
(
'
2d
'
).
getImageData
(
0
,
0
,
width
,
height
).
data
;
for
(
var
y
=
0
;
y
<
height
;
y
++
)
{
for
(
var
x
=
0
;
x
<
width
;
x
++
)
{
index
=
(
x
+
y
*
width
)
*
4
;
diff
=
0
;
level
=
width
/
4
;
while
(
level
>
4
)
{
diff
+=
(
(
src_data
[
index
-
level
]
>>>
0
)
-
(
src_data
[
index
+
level
]
>>>
0
)
)
+
(
(
src_data
[
index
-
(
width
*
level
)
]
>>>
0
)
-
(
src_data
[
index
+
(
width
*
level
)
]
>>>
0
)
)
+
32
;
level
/=
2
;
}
data
[
index
]
=
diff
*
0.45
;
data
[
index
+
1
]
=
diff
*
0.29
;
data
[
index
+
2
]
=
diff
*
0.19
;
}
}
context
.
putImageData
(
image
,
0
,
0
);
return
canvas
;
}
</script>
</body>
</html>
examples/materials_video.html
浏览文件 @
2cd12340
...
...
@@ -15,15 +15,14 @@
</head>
<body>
<script
type=
"text/javascript"
src=
"http://github.com/mrdoob/stats.js/raw/master/build/stats.js"
></script>
<script
type=
"text/javascript"
src=
"../build/three.js"
></script>
<script
type=
"text/javascript"
src=
"primitives/Plane.js"
></script>
<script
type=
"text/javascript"
src=
"http://github.com/mrdoob/stats.js/raw/master/build/stats.js"
></script>
<video
id=
"video"
autoplay=
"true"
style=
"display:none"
>
<source
src=
"textures/sintel.mp4"
type=
"video/mp4"
>
<source
src=
"textures/sintel.ogv"
type=
"video/ogg"
>
<video
id=
"video"
autoplay
style=
"display:none"
>
<source
src=
"textures/sintel.mp4"
type=
'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
>
<source
src=
"textures/sintel.ogv"
type=
'video/ogg; codecs="theora, vorbis"'
>
</video>
<script
type=
"text/javascript"
>
...
...
@@ -159,7 +158,10 @@
camera
.
position
.
x
+=
(
mouseX
-
camera
.
position
.
x
)
*
.
05
;
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
05
;
textureContext
.
drawImage
(
video
,
0
,
0
);
if
(
video
.
readyState
===
video
.
HAVE_ENOUGH_DATA
)
{
textureContext
.
drawImage
(
video
,
0
,
0
);
}
textureReflectionContext
.
drawImage
(
texture
,
0
,
0
);
textureReflectionContext
.
fillStyle
=
textureReflectionGradient
;
...
...
examples/primitives/Plane.js
浏览文件 @
2cd12340
...
...
@@ -18,7 +18,7 @@ var Plane = function ( width, height, segments_width, segments_height ) {
segment_height
=
height
/
gridY
;
for
(
var
iy
=
0
;
iy
<
gridY1
;
iy
++
)
{
for
(
var
iy
=
0
;
iy
<
gridY1
;
iy
++
)
{
for
(
var
ix
=
0
;
ix
<
gridX1
;
ix
++
)
{
...
...
@@ -31,7 +31,7 @@ var Plane = function ( width, height, segments_width, segments_height ) {
}
for
(
iy
=
0
;
iy
<
gridY
;
iy
++
)
{
for
(
iy
=
0
;
iy
<
gridY
;
iy
++
)
{
for
(
ix
=
0
;
ix
<
gridX
;
ix
++
)
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录