Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
ef7ead99
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,发现更多精彩内容 >>
提交
ef7ead99
编写于
11月 20, 2013
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Sprites example refactoring and clean up.
上级
71fed600
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
63 addition
and
58 deletion
+63
-58
examples/webgl_sprites.html
examples/webgl_sprites.html
+63
-58
未找到文件。
examples/webgl_sprites.html
浏览文件 @
ef7ead99
...
...
@@ -18,13 +18,12 @@
<body>
<script
src=
"../build/three.min.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script>
var
stats
;
var
camera
,
scene
,
renderer
;
var
cameraOrtho
,
sceneOrtho
;
var
camera
,
cameraOverlays
,
scene
,
sceneOverlays
,
renderer
;
var
spriteTL
,
spriteTR
,
spriteBL
,
spriteBR
,
spriteC
;
var
mapC
;
...
...
@@ -35,22 +34,22 @@
function
init
()
{
cameraOverlays
=
new
THREE
.
OrthographicCamera
(
0
,
window
.
innerWidth
,
window
.
innerHeight
,
0
,
-
10
,
10
);
camera
=
new
THREE
.
PerspectiveCamera
(
60
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
2100
);
camera
.
position
.
z
=
1500
;
scene
=
new
THREE
.
Scene
();
sceneOverlays
=
new
THREE
.
Scene
();
cameraOrtho
=
new
THREE
.
OrthographicCamera
(
0
,
window
.
innerWidth
,
window
.
innerHeight
,
0
,
-
10
,
10
);
scene
=
new
THREE
.
Scene
();
scene
.
fog
=
new
THREE
.
Fog
(
0x000000
,
1500
,
2100
);
sceneOrtho
=
new
THREE
.
Scene
();
// create sprites
var
amount
=
200
;
var
radius
=
500
;
var
mapA
=
THREE
.
ImageUtils
.
loadTexture
(
"
textures/sprite0.png
"
,
undefined
,
function
()
{
createHUDSprites
()
}
);
var
mapA
=
THREE
.
ImageUtils
.
loadTexture
(
"
textures/sprite0.png
"
,
undefined
,
createHUDSprites
);
var
mapB
=
THREE
.
ImageUtils
.
loadTexture
(
"
textures/sprite1.png
"
);
mapC
=
THREE
.
ImageUtils
.
loadTexture
(
"
textures/sprite2.png
"
);
...
...
@@ -90,39 +89,6 @@
scene
.
add
(
group
);
// add 2d-sprites
var
createHUDSprites
=
function
()
{
var
scaleX
=
mapA
.
image
.
width
;
var
scaleY
=
mapA
.
image
.
height
;
var
materialA1
=
new
THREE
.
SpriteMaterial
(
{
map
:
mapA
,
opacity
:
0.25
}
);
var
materialA2
=
new
THREE
.
SpriteMaterial
(
{
map
:
mapA
,
opacity
:
0.5
}
);
var
materialA3
=
new
THREE
.
SpriteMaterial
(
{
map
:
mapA
,
opacity
:
1
}
);
// Simulating deprecated option "alignment: THREE.SpriteAlignment.topLeft"
var
x
=
100
+
scaleX
/
2
;
var
y
=
window
.
innerHeight
-
100
-
scaleY
/
2
;
sprite
=
new
THREE
.
Sprite
(
materialA1
);
sprite
.
position
.
set
(
x
,
y
,
1
);
sprite
.
scale
.
set
(
scaleX
,
scaleY
,
1
);
sceneOverlays
.
add
(
sprite
);
sprite
=
new
THREE
.
Sprite
(
materialA2
);
sprite
.
position
.
set
(
x
+
50
,
y
-
50
,
2
);
sprite
.
scale
.
set
(
scaleX
,
scaleY
,
1
);
sceneOverlays
.
add
(
sprite
);
sprite
=
new
THREE
.
Sprite
(
materialA3
);
sprite
.
position
.
set
(
x
+
100
,
y
-
100
,
3
);
sprite
.
scale
.
set
(
scaleX
,
scaleY
,
1
);
sceneOverlays
.
add
(
sprite
);
}
// renderer
renderer
=
new
THREE
.
WebGLRenderer
();
...
...
@@ -131,14 +97,6 @@
renderer
.
autoClear
=
false
;
// To allow render overlay on top of sprited sphere
document
.
body
.
appendChild
(
renderer
.
domElement
);
// stats
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
stats
.
domElement
.
style
.
zIndex
=
100
;
document
.
body
.
appendChild
(
stats
.
domElement
);
//
...
...
@@ -146,13 +104,63 @@
}
function
onWindowResize
()
{
function
createHUDSprites
(
texture
)
{
var
material
=
new
THREE
.
SpriteMaterial
(
{
map
:
texture
}
);
var
width
=
material
.
map
.
image
.
width
;
var
height
=
material
.
map
.
image
.
height
;
spriteTL
=
new
THREE
.
Sprite
(
material
);
spriteTL
.
scale
.
set
(
width
,
height
,
1
);
sceneOrtho
.
add
(
spriteTL
);
spriteTR
=
new
THREE
.
Sprite
(
material
);
spriteTR
.
scale
.
set
(
width
,
height
,
1
);
sceneOrtho
.
add
(
spriteTR
);
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
cameraOverlays
=
new
THREE
.
OrthographicCamera
(
0
,
window
.
innerWidth
,
window
.
innerHeight
,
0
,
-
10
,
10
);
spriteBL
=
new
THREE
.
Sprite
(
material
);
spriteBL
.
scale
.
set
(
width
,
height
,
1
);
sceneOrtho
.
add
(
spriteBL
);
spriteBR
=
new
THREE
.
Sprite
(
material
);
spriteBR
.
scale
.
set
(
width
,
height
,
1
);
sceneOrtho
.
add
(
spriteBR
);
spriteC
=
new
THREE
.
Sprite
(
material
);
spriteC
.
scale
.
set
(
width
,
height
,
1
);
sceneOrtho
.
add
(
spriteC
);
updateHUDSprites
();
};
function
updateHUDSprites
()
{
var
material
=
spriteTL
.
material
;
var
widthHalf
=
material
.
map
.
image
.
width
/
2
;
var
heightHalf
=
material
.
map
.
image
.
height
/
2
;
spriteTL
.
position
.
set
(
widthHalf
,
window
.
innerHeight
-
heightHalf
,
1
);
// top left
spriteTR
.
position
.
set
(
window
.
innerWidth
-
widthHalf
,
window
.
innerHeight
-
heightHalf
,
2
);
// top right
spriteBL
.
position
.
set
(
widthHalf
,
heightHalf
,
0
);
// bottom left
spriteBR
.
position
.
set
(
window
.
innerWidth
-
widthHalf
,
heightHalf
,
3
);
// bottom right
spriteC
.
position
.
set
(
window
.
innerWidth
*
0.5
,
window
.
innerHeight
*
0.5
,
4
);
// center
};
function
onWindowResize
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
cameraOrtho
.
right
=
window
.
innerWidth
;
cameraOrtho
.
top
=
window
.
innerHeight
;
cameraOrtho
.
updateProjectionMatrix
();
updateHUDSprites
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
...
...
@@ -160,9 +168,7 @@
function
animate
()
{
requestAnimationFrame
(
animate
);
render
();
stats
.
update
();
}
...
...
@@ -201,10 +207,9 @@
group
.
rotation
.
y
=
time
*
0.75
;
group
.
rotation
.
z
=
time
*
1.0
;
time
+=
0.02
;
renderer
.
clear
();
renderer
.
render
(
scene
,
camera
);
renderer
.
render
(
sceneO
verlays
,
cameraOverlays
);
renderer
.
render
(
sceneO
rtho
,
cameraOrtho
);
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录