Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
dc7ce65c
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,发现更多精彩内容 >>
提交
dc7ce65c
编写于
4月 21, 2017
作者:
M
Mr.doob
提交者:
GitHub
4月 21, 2017
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #11210 from Mugen87/dev
Examples: Clean up
上级
da01dc47
cfb79fbe
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
61 addition
and
40 deletion
+61
-40
examples/webgl_clipping.html
examples/webgl_clipping.html
+23
-17
examples/webgl_decals.html
examples/webgl_decals.html
+8
-2
examples/webgl_depth_texture.html
examples/webgl_depth_texture.html
+30
-21
未找到文件。
examples/webgl_clipping.html
浏览文件 @
dc7ce65c
...
...
@@ -16,17 +16,19 @@
<script
src=
"../build/three.js"
></script>
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script
src=
"js/libs/dat.gui.min.js"
></script>
<script>
var
camera
,
scene
,
renderer
,
startTime
,
object
;
var
camera
,
scene
,
renderer
,
startTime
,
object
,
stats
;
init
();
animate
();
function
init
()
{
camera
=
new
THREE
.
PerspectiveCamera
(
36
,
window
.
innerWidth
/
window
.
innerHeight
,
0.25
,
16
);
camera
=
new
THREE
.
PerspectiveCamera
(
36
,
window
.
innerWidth
/
window
.
innerHeight
,
0.25
,
16
);
camera
.
position
.
set
(
0
,
1.3
,
3
);
...
...
@@ -64,8 +66,8 @@
// ***** Clipping planes: *****
var
localPlane
=
new
THREE
.
Plane
(
new
THREE
.
Vector3
(
0
,
-
1
,
0
),
0.8
)
,
globalPlane
=
new
THREE
.
Plane
(
new
THREE
.
Vector3
(
-
1
,
0
,
0
),
0.1
);
var
localPlane
=
new
THREE
.
Plane
(
new
THREE
.
Vector3
(
0
,
-
1
,
0
),
0.8
)
;
var
globalPlane
=
new
THREE
.
Plane
(
new
THREE
.
Vector3
(
-
1
,
0
,
0
),
0.1
);
// Geometry
...
...
@@ -78,9 +80,9 @@
clippingPlanes
:
[
localPlane
],
clipShadows
:
true
}
)
,
}
)
;
geometry
=
new
THREE
.
TorusKnot
Geometry
(
0.4
,
0.08
,
95
,
20
);
var
geometry
=
new
THREE
.
TorusKnotBuffer
Geometry
(
0.4
,
0.08
,
95
,
20
);
object
=
new
THREE
.
Mesh
(
geometry
,
material
);
object
.
castShadow
=
true
;
...
...
@@ -88,13 +90,18 @@
var
ground
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneBufferGeometry
(
9
,
9
,
1
,
1
),
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xa0adaf
,
shininess
:
150
}
)
);
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xa0adaf
,
shininess
:
150
}
)
);
ground
.
rotation
.
x
=
-
Math
.
PI
/
2
;
// rotates X/Y to X/Z
ground
.
receiveShadow
=
true
;
scene
.
add
(
ground
);
// Stats
stats
=
new
Stats
();
document
.
body
.
appendChild
(
stats
.
dom
);
// Renderer
renderer
=
new
THREE
.
WebGLRenderer
();
...
...
@@ -119,7 +126,7 @@
// GUI
var
gui
=
new
dat
.
GUI
(),
folderLocal
=
gui
.
addFolder
(
"
Local Clipping
"
),
folderLocal
=
gui
.
addFolder
(
'
Local Clipping
'
),
propsLocal
=
{
get
'
Enabled
'
()
{
return
renderer
.
localClippingEnabled
;
},
...
...
@@ -133,7 +140,7 @@
},
folderGlobal
=
gui
.
addFolder
(
"
Global Clipping
"
),
folderGlobal
=
gui
.
addFolder
(
'
Global Clipping
'
),
propsGlobal
=
{
get
'
Enabled
'
()
{
return
renderer
.
clippingPlanes
!==
Empty
;
},
...
...
@@ -169,8 +176,8 @@
function
animate
()
{
var
currentTime
=
Date
.
now
()
,
time
=
(
currentTime
-
startTime
)
/
1000
;
var
currentTime
=
Date
.
now
()
;
var
time
=
(
currentTime
-
startTime
)
/
1000
;
requestAnimationFrame
(
animate
);
...
...
@@ -179,13 +186,12 @@
object
.
rotation
.
y
=
time
*
0.2
;
object
.
scale
.
setScalar
(
Math
.
cos
(
time
)
*
0.125
+
0.875
);
stats
.
begin
();
renderer
.
render
(
scene
,
camera
);
stats
.
end
();
}
init
();
animate
();
</script>
</body>
...
...
examples/webgl_decals.html
浏览文件 @
dc7ce65c
...
...
@@ -37,13 +37,14 @@
<script
src=
"../build/three.js"
></script>
<script
src=
"js/geometries/DecalGeometry.js"
></script>
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script
src=
"js/libs/dat.gui.min.js"
></script>
<script>
var
container
=
document
.
getElementById
(
'
container
'
);
var
renderer
,
scene
,
camera
,
fov
=
45
;
var
renderer
,
scene
,
camera
,
stats
;
var
mesh
,
decal
;
var
raycaster
;
var
line
;
...
...
@@ -101,9 +102,12 @@
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
container
.
appendChild
(
renderer
.
domElement
);
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
scene
=
new
THREE
.
Scene
();
camera
=
new
THREE
.
PerspectiveCamera
(
fov
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
camera
=
new
THREE
.
PerspectiveCamera
(
45
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
camera
.
position
.
z
=
120
;
camera
.
target
=
new
THREE
.
Vector3
();
...
...
@@ -299,6 +303,8 @@
renderer
.
render
(
scene
,
camera
);
stats
.
update
();
}
</script>
...
...
examples/webgl_depth_texture.html
浏览文件 @
dc7ce65c
...
...
@@ -95,10 +95,11 @@
<script
src=
"../build/three.js"
></script>
<script
src=
"js/shaders/SSAOShader.js"
></script>
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
<script>
var
camera
,
scene
,
renderer
,
controls
;
var
camera
,
scene
,
renderer
,
controls
,
stats
;
var
target
;
var
postScene
,
postCamera
;
var
supportsExtension
=
true
;
...
...
@@ -108,12 +109,14 @@
function
init
()
{
renderer
=
new
THREE
.
WebGLRenderer
(
{
canvas
:
document
.
querySelector
(
'
canvas
'
)
}
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
canvas
:
document
.
querySelector
(
'
canvas
'
)
}
);
if
(
!
renderer
.
extensions
.
get
(
'
WEBGL_depth_texture
'
)
)
{
if
(
!
renderer
.
extensions
.
get
(
'
WEBGL_depth_texture
'
)
)
{
supportsExtension
=
false
;
document
.
querySelector
(
'
#error
'
).
style
.
display
=
'
block
'
;
document
.
querySelector
(
'
#error
'
).
style
.
display
=
'
block
'
;
return
;
}
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
...
...
@@ -121,6 +124,9 @@
//
stats
=
new
Stats
();
document
.
body
.
appendChild
(
stats
.
dom
);
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
window
.
innerWidth
/
window
.
innerHeight
,
0.01
,
50
);
camera
.
position
.
z
=
-
4
;
...
...
@@ -155,10 +161,10 @@
function
setupPost
()
{
// Setup post processing stage
postCamera
=
new
THREE
.
OrthographicCamera
(
-
1
,
1
,
1
,
-
1
,
0
,
1
);
var
postMaterial
=
new
THREE
.
ShaderMaterial
({
vertexShader
:
document
.
querySelector
(
'
#post-vert
'
).
textContent
.
trim
(),
fragmentShader
:
document
.
querySelector
(
'
#post-frag
'
).
textContent
.
trim
(),
postCamera
=
new
THREE
.
OrthographicCamera
(
-
1
,
1
,
1
,
-
1
,
0
,
1
);
var
postMaterial
=
new
THREE
.
ShaderMaterial
(
{
vertexShader
:
document
.
querySelector
(
'
#post-vert
'
).
textContent
.
trim
(),
fragmentShader
:
document
.
querySelector
(
'
#post-frag
'
).
textContent
.
trim
(),
uniforms
:
{
cameraNear
:
{
value
:
camera
.
near
},
cameraFar
:
{
value
:
camera
.
far
},
...
...
@@ -166,20 +172,21 @@
tDepth
:
{
value
:
target
.
depthTexture
}
}
});
var
postPlane
=
new
THREE
.
Plane
Geometry
(
2
,
2
);
var
postQuad
=
new
THREE
.
Mesh
(
postPlane
,
postMaterial
);
var
postPlane
=
new
THREE
.
Plane
BufferGeometry
(
2
,
2
);
var
postQuad
=
new
THREE
.
Mesh
(
postPlane
,
postMaterial
);
postScene
=
new
THREE
.
Scene
();
postScene
.
add
(
postQuad
);
postScene
.
add
(
postQuad
);
}
function
setupScene
()
{
var
diffuse
=
new
THREE
.
TextureLoader
().
load
(
'
textures/brick_diffuse.jpg
'
);
var
diffuse
=
new
THREE
.
TextureLoader
().
load
(
'
textures/brick_diffuse.jpg
'
);
diffuse
.
wrapS
=
diffuse
.
wrapT
=
THREE
.
RepeatWrapping
;
// Setup some geometries
var
geometry
=
new
THREE
.
TorusKnot
Geometry
(
1
,
0.3
,
128
,
64
);
var
material
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
'
blue
'
}
);
var
geometry
=
new
THREE
.
TorusKnot
BufferGeometry
(
1
,
0.3
,
128
,
64
);
var
material
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
'
blue
'
}
);
var
count
=
50
;
var
scale
=
5
;
...
...
@@ -187,17 +194,17 @@
for
(
var
i
=
0
;
i
<
count
;
i
++
)
{
var
r
=
Math
.
random
()
*
2.0
*
Math
.
PI
;
var
z
=
(
Math
.
random
()
*
2.0
)
-
1.0
;
var
zScale
=
Math
.
sqrt
(
1.0
-
z
*
z
)
*
scale
;
var
z
=
(
Math
.
random
()
*
2.0
)
-
1.0
;
var
zScale
=
Math
.
sqrt
(
1.0
-
z
*
z
)
*
scale
;
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
mesh
.
position
.
set
(
Math
.
cos
(
r
)
*
zScale
,
Math
.
sin
(
r
)
*
zScale
,
Math
.
cos
(
r
)
*
zScale
,
Math
.
sin
(
r
)
*
zScale
,
z
*
scale
);
mesh
.
rotation
.
set
(
Math
.
random
(),
Math
.
random
(),
Math
.
random
()
);
scene
.
add
(
mesh
);
mesh
.
rotation
.
set
(
Math
.
random
(),
Math
.
random
(),
Math
.
random
()
);
scene
.
add
(
mesh
);
}
...
...
@@ -228,6 +235,8 @@
// render post FX
renderer
.
render
(
postScene
,
postCamera
);
stats
.
update
();
}
</script>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录