Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
8d4c77d4
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,发现更多精彩内容 >>
提交
8d4c77d4
编写于
6月 04, 2015
作者:
R
Ricardo Cabello
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #6644 from greggman/webgl-multiple-elements
Add Multiple Elements example
上级
0900d2b1
3b55a8f4
变更
1
显示空白变更内容
内联
并排
Showing
1 changed file
with
255 addition
and
0 deletion
+255
-0
examples/webgl_multiple_elements.html
examples/webgl_multiple_elements.html
+255
-0
未找到文件。
examples/webgl_multiple_elements.html
0 → 100644
浏览文件 @
8d4c77d4
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - multiple elements
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
*
{
box-sizing
:
border-box
;
-moz-box-sizing
:
border-box
;
}
body
{
color
:
#000
;
font-family
:
Monospace
;
font-size
:
13px
;
background-color
:
#fff
;
margin
:
0px
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
padding
:
5px
;
text-align
:
center
;
}
#content
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
z-index
:
1
;
padding
:
2em
;
}
a
{
color
:
#0080ff
;
}
#c
{
position
:
fixed
;
left
:
0px
;
width
:
100%
;
height
:
100%
;
}
.list-item
{
margin
:
1em
;
padding
:
2em
;
display
:
-webkit-flex
;
display
:
flex
;
flex-direction
:
row
;
-webkit-flex-direction
:
row
;
}
.list-item
.scene
{
width
:
200px
;
height
:
200px
;
flex
:
0
0
auto
;
-webkit-flex
:
0
0
auto
;
}
.list-item
.description
{
font-family
:
sans-serif
;
font-size
:
large
;
padding-left
:
2em
;
flex
:
1
1
auto
;
-webkit-flex
:
1
1
auto
;
}
@media
only
screen
and
(
max-width
:
600px
)
{
#content
{
width
:
100%
;
}
.list-item
{
margin
:
0.5em
;
padding
:
0.5em
;
flex-direction
:
column
;
-webkit-flex-direction
:
column
;
}
.list-item
.description
{
padding-left
:
0em
;
}
}
</style>
</head>
<body>
<canvas
id=
"c"
></canvas>
<div
id=
"content"
>
<div
id=
"info"
><a
href=
"http://threejs.org"
target=
"_blank"
>
three.js
</a>
- multiple elements - webgl
</div>
</div>
<script
src=
"../build/three.min.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
id=
"template"
type=
"notjs"
>
<
div
class
=
"
scene
"
><
/div
>
<
div
class
=
"
description
"
>
some
random
text
about
this
object
,
scene
,
whatever
<
/div
>
</script>
<script>
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
canvas
;
var
scenes
=
[],
camera
,
renderer
,
emptyScene
;
init
();
animate
();
function
init
()
{
canvas
=
document
.
getElementById
(
"
c
"
);
camera
=
new
THREE
.
PerspectiveCamera
(
75
,
1
,
0.1
,
100
);
camera
.
position
.
z
=
1.5
;
var
geometries
=
[
new
THREE
.
BoxGeometry
(
1
,
1
,
1
),
new
THREE
.
SphereGeometry
(
0.5
,
12
,
12
),
new
THREE
.
DodecahedronGeometry
(
0.5
),
new
THREE
.
CylinderGeometry
(
0.5
,
0.5
,
1
,
12
),
];
var
template
=
document
.
getElementById
(
"
template
"
).
text
;
var
content
=
document
.
getElementById
(
"
content
"
);
var
emptyScene
=
new
THREE
.
Scene
();
var
numScenes
=
100
;
for
(
var
ii
=
0
;
ii
<
numScenes
;
++
ii
)
{
var
scene
=
new
THREE
.
Scene
();
// make a list item.
var
element
=
document
.
createElement
(
"
div
"
);
element
.
innerHTML
=
template
;
element
.
className
=
"
list-item
"
;
// Look up the element that represents the area
// we want to render the scene
scene
.
element
=
element
.
querySelector
(
"
.scene
"
);
content
.
appendChild
(
element
);
// add one random mesh to each scene
var
geometry
=
geometries
[
geometries
.
length
*
Math
.
random
()
|
0
];
var
material
=
new
THREE
.
MeshLambertMaterial
(
{
color
:
randColor
()
}
);
scene
.
add
(
new
THREE
.
Mesh
(
geometry
,
material
)
);
light
=
new
THREE
.
DirectionalLight
(
0xffffff
);
light
.
position
.
set
(
0.5
,
0.8
,
1
);
scene
.
add
(
light
);
light
=
new
THREE
.
DirectionalLight
(
0xffffff
);
light
.
position
.
set
(
-
0.5
,
-
0.8
,
-
1
);
scene
.
add
(
light
);
scenes
.
push
(
scene
);
}
renderer
=
new
THREE
.
WebGLRenderer
(
{
canvas
:
canvas
,
antialias
:
true
}
);
renderer
.
setClearColor
(
0xFFFFFF
);
}
function
updateSize
()
{
var
width
=
canvas
.
clientWidth
;
var
height
=
canvas
.
clientHeight
;
if
(
canvas
.
width
!==
width
||
canvas
.
height
!=
height
)
{
renderer
.
setSize
(
width
,
height
,
false
);
}
}
function
animate
()
{
render
();
requestAnimationFrame
(
animate
);
}
function
render
()
{
updateSize
();
renderer
.
setClearColor
(
0xFFFFFF
);
renderer
.
clear
(
true
);
renderer
.
setClearColor
(
0xE0E0E0
);
renderer
.
enableScissorTest
(
true
);
scenes
.
forEach
(
function
(
scene
)
{
// so something moves
scene
.
children
[
0
].
rotation
.
x
=
Date
.
now
()
*
0.00111
;
scene
.
children
[
0
].
rotation
.
z
=
Date
.
now
()
*
0.001
;
// get the element that is a place holder for where we want to
// draw the scene
var
element
=
scene
.
element
;
// get its position relative to the page's viewport
var
rect
=
element
.
getBoundingClientRect
();
// check if it's offscreen. If so skip it
if
(
rect
.
bottom
<
0
||
rect
.
top
>
renderer
.
domElement
.
clientHeight
||
rect
.
right
<
0
||
rect
.
left
>
renderer
.
domElement
.
clientWidth
)
{
return
;
// it's off screen
}
// set the viewport
var
width
=
rect
.
right
-
rect
.
left
;
var
height
=
rect
.
bottom
-
rect
.
top
;
var
left
=
rect
.
left
;
var
bottom
=
renderer
.
domElement
.
clientHeight
-
rect
.
bottom
;
camera
.
aspect
=
width
/
height
;
camera
.
updateProjectionMatrix
();
renderer
.
setViewport
(
left
,
bottom
,
width
,
height
);
renderer
.
setScissor
(
left
,
bottom
,
width
,
height
);
renderer
.
render
(
scene
,
camera
);
}
);
renderer
.
enableScissorTest
(
false
);
}
function
rand
(
min
,
max
)
{
if
(
max
==
undefined
)
{
max
=
min
;
min
=
0
;
}
return
Math
.
random
()
*
(
max
-
min
)
+
min
;
}
function
randColor
()
{
var
colors
=
[
rand
(
256
),
rand
(
256
),
rand
(
256
)
];
colors
[
Math
.
random
()
*
3
|
0
]
=
255
;
return
(
colors
[
0
]
<<
16
)
|
(
colors
[
1
]
<<
8
)
|
(
colors
[
2
]
<<
0
)
;
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录