Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
5be57033
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,发现更多精彩内容 >>
提交
5be57033
编写于
9月 23, 2017
作者:
M
Mr.doob
提交者:
GitHub
9月 23, 2017
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #12262 from WestLangley/dev-cloth
Animation cloth example: clean up
上级
697505d2
751b7b10
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
18 addition
and
59 deletion
+18
-59
examples/webgl_animation_cloth.html
examples/webgl_animation_cloth.html
+18
-59
未找到文件。
examples/webgl_animation_cloth.html
浏览文件 @
5be57033
...
...
@@ -44,40 +44,6 @@
<script
src=
"js/Cloth.js"
></script>
<script
type=
"x-shader/x-fragment"
id=
"fragmentShaderDepth"
>
#
include
<
packing
>
uniform
sampler2D
texture
;
varying
vec2
vUV
;
void
main
()
{
vec4
pixel
=
texture2D
(
texture
,
vUV
);
if
(
pixel
.
a
<
0.5
)
discard
;
gl_FragData
[
0
]
=
packDepthToRGBA
(
gl_FragCoord
.
z
);
}
</script>
<script
type=
"x-shader/x-vertex"
id=
"vertexShaderDepth"
>
varying
vec2
vUV
;
void
main
()
{
vUV
=
0.75
*
uv
;
vec4
mvPosition
=
modelViewMatrix
*
vec4
(
position
,
1.0
);
gl_Position
=
projectionMatrix
*
mvPosition
;
}
</script>
<script>
/* testing cloth simulation */
...
...
@@ -134,10 +100,7 @@
// camera
camera
=
new
THREE
.
PerspectiveCamera
(
30
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
10000
);
camera
.
position
.
x
=
1000
;
camera
.
position
.
y
=
50
;
camera
.
position
.
z
=
1500
;
scene
.
add
(
camera
);
camera
.
position
.
set
(
1000
,
50
,
1500
);
// lights
...
...
@@ -145,7 +108,7 @@
scene
.
add
(
new
THREE
.
AmbientLight
(
0x666666
)
);
light
=
new
THREE
.
DirectionalLight
(
0xdfebff
,
1
.75
);
light
=
new
THREE
.
DirectionalLight
(
0xdfebff
,
1
);
light
.
position
.
set
(
50
,
200
,
100
);
light
.
position
.
multiplyScalar
(
1.3
);
...
...
@@ -170,6 +133,8 @@
var
loader
=
new
THREE
.
TextureLoader
();
var
clothTexture
=
loader
.
load
(
'
textures/patterns/circuit_pattern.png
'
);
clothTexture
.
wrapS
=
clothTexture
.
wrapT
=
THREE
.
RepeatWrapping
;
clothTexture
.
offset
.
set
(
0.1
,
0.1
);
clothTexture
.
repeat
.
set
(
0.5
,
0.5
);
clothTexture
.
anisotropy
=
16
;
var
clothMaterial
=
new
THREE
.
MeshPhongMaterial
(
{
...
...
@@ -180,12 +145,8 @@
}
);
// cloth geometry
clothGeometry
=
new
THREE
.
ParametricGeometry
(
clothFunction
,
cloth
.
w
,
cloth
.
h
);
clothGeometry
.
dynamic
=
true
;
var
uniforms
=
{
texture
:
{
value
:
clothTexture
}
};
var
vertexShader
=
document
.
getElementById
(
'
vertexShaderDepth
'
).
textContent
;
var
fragmentShader
=
document
.
getElementById
(
'
fragmentShaderDepth
'
).
textContent
;
clothGeometry
=
new
THREE
.
ParametricGeometry
(
clothFunction
,
cloth
.
w
,
cloth
.
h
);
// cloth mesh
...
...
@@ -194,16 +155,17 @@
object
.
castShadow
=
true
;
scene
.
add
(
object
);
object
.
customDepthMaterial
=
new
THREE
.
ShaderMaterial
(
{
uniforms
:
uniforms
,
vertexShader
:
vertexShader
,
fragmentShader
:
fragmentShader
,
side
:
THREE
.
DoubleSide
object
.
customDepthMaterial
=
new
THREE
.
MeshDepthMaterial
(
{
depthPacking
:
THREE
.
RGBADepthPacking
,
map
:
clothTexture
,
alphaTest
:
0.5
}
);
// sphere
var
ballGeo
=
new
THREE
.
Sphere
Geometry
(
ballSize
,
20
,
20
);
var
ballGeo
=
new
THREE
.
Sphere
BufferGeometry
(
ballSize
,
32
,
16
);
var
ballMaterial
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xaaaaaa
}
);
sphere
=
new
THREE
.
Mesh
(
ballGeo
,
ballMaterial
);
...
...
@@ -228,7 +190,7 @@
// poles
var
poleGeo
=
new
THREE
.
BoxGeometry
(
5
,
375
,
5
);
var
poleGeo
=
new
THREE
.
Box
Buffer
Geometry
(
5
,
375
,
5
);
var
poleMat
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffffff
,
specular
:
0x111111
,
shininess
:
100
}
);
var
mesh
=
new
THREE
.
Mesh
(
poleGeo
,
poleMat
);
...
...
@@ -245,14 +207,14 @@
mesh
.
castShadow
=
true
;
scene
.
add
(
mesh
);
var
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
BoxGeometry
(
255
,
5
,
5
),
poleMat
);
var
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
Box
Buffer
Geometry
(
255
,
5
,
5
),
poleMat
);
mesh
.
position
.
y
=
-
250
+
(
750
/
2
);
mesh
.
position
.
x
=
0
;
mesh
.
receiveShadow
=
true
;
mesh
.
castShadow
=
true
;
scene
.
add
(
mesh
);
var
gg
=
new
THREE
.
BoxGeometry
(
10
,
10
,
10
);
var
gg
=
new
THREE
.
Box
Buffer
Geometry
(
10
,
10
,
10
);
var
mesh
=
new
THREE
.
Mesh
(
gg
,
poleMat
);
mesh
.
position
.
y
=
-
250
;
mesh
.
position
.
x
=
125
;
...
...
@@ -285,7 +247,7 @@
var
controls
=
new
THREE
.
OrbitControls
(
camera
,
renderer
.
domElement
);
controls
.
maxPolarAngle
=
Math
.
PI
*
0.5
;
controls
.
minDistance
=
1000
;
controls
.
maxDistance
=
75
00
;
controls
.
maxDistance
=
50
00
;
// performance monitor
...
...
@@ -341,16 +303,13 @@
}
clothGeometry
.
verticesNeedUpdate
=
true
;
clothGeometry
.
computeFaceNormals
();
clothGeometry
.
computeVertexNormals
();
clothGeometry
.
normalsNeedUpdate
=
true
;
clothGeometry
.
verticesNeedUpdate
=
true
;
sphere
.
position
.
copy
(
ballPosition
);
camera
.
lookAt
(
scene
.
position
);
renderer
.
render
(
scene
,
camera
);
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录