Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
24c75901
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,发现更多精彩内容 >>
提交
24c75901
编写于
3月 11, 2011
作者:
M
Mikael Emtinger
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Fixed bug in morph target shader and added example
上级
b4b730c0
变更
3
展开全部
隐藏空白更改
内联
并排
Showing
3 changed file
with
289 addition
and
90 deletion
+289
-90
build/Three.js
build/Three.js
+88
-88
examples/webgl_morphtargets.html
examples/webgl_morphtargets.html
+188
-0
src/renderers/WebGLRenderer.js
src/renderers/WebGLRenderer.js
+13
-2
未找到文件。
build/Three.js
浏览文件 @
24c75901
此差异已折叠。
点击以展开。
examples/webgl_morphtargets.html
0 → 100644
浏览文件 @
24c75901
<!DOCTYPE HTML>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - morph targets
</title>
<meta
charset=
"utf-8"
>
<style
type=
"text/css"
>
body
{
background
:
#000
;
color
:
#fff
;
padding
:
0
;
margin
:
0
;
font-weight
:
bold
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
color
:
#ffffff
;
padding
:
5px
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
z-index
:
100
;
}
#ctrl
{
position
:
absolute
;
top
:
0px
;
left
:
0px
;
width
:
200px
;
color
:
#ffffff
;
padding
:
5px
;
font-family
:
Monospace
;
font-size
:
13px
;
z-index
:
100
;
}
a
{
color
:
red
}
</style>
</head>
<body>
<div
id=
"info"
>
<a
href=
"http://github.com/mrdoob/three.js"
target=
"_blank"
>
three.js
</a>
- WebGL morph target example
</div>
<div
id=
"ctrl"
>
Use controls to change morph target influences:
<br/>
<input
type=
"range"
value=
"0"
min=
"0"
max=
"100"
onchange=
"mesh.morphTargetInfluences[ 0 ] = this.value/100;"
/>
<input
type=
"range"
value=
"0"
min=
"0"
max=
"100"
onchange=
"mesh.morphTargetInfluences[ 1 ] = this.value/100;"
/>
<input
type=
"range"
value=
"0"
min=
"0"
max=
"100"
onchange=
"mesh.morphTargetInfluences[ 2 ] = this.value/100;"
/>
<input
type=
"range"
value=
"0"
min=
"0"
max=
"100"
onchange=
"mesh.morphTargetInfluences[ 3 ] = this.value/100;"
/>
<input
type=
"range"
value=
"0"
min=
"0"
max=
"100"
onchange=
"mesh.morphTargetInfluences[ 4 ] = this.value/100;"
/>
<input
type=
"range"
value=
"0"
min=
"0"
max=
"100"
onchange=
"mesh.morphTargetInfluences[ 5 ] = this.value/100;"
/>
<input
type=
"range"
value=
"0"
min=
"0"
max=
"100"
onchange=
"mesh.morphTargetInfluences[ 6 ] = this.value/100;"
/>
<input
type=
"range"
value=
"0"
min=
"0"
max=
"100"
onchange=
"mesh.morphTargetInfluences[ 7 ] = this.value/100;"
/>
</div>
<script
type=
"text/javascript"
src=
"../build/Three.js"
></script>
<script
type=
"text/javascript"
src=
"js/Detector.js"
></script>
<script
type=
"text/javascript"
src=
"js/RequestAnimationFrame.js"
></script>
<script
type=
"text/javascript"
src=
"js/Stats.js"
></script>
<script
type=
"text/javascript"
>
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
container
,
stats
;
var
camera
,
scene
,
renderer
;
var
geometry
,
objects
;
var
mouseX
=
0
,
mouseY
=
0
;
var
mesh
;
var
windowHalfX
=
window
.
innerWidth
/
2
;
var
windowHalfY
=
window
.
innerHeight
/
2
;
document
.
addEventListener
(
'
mousemove
'
,
onDocumentMouseMove
,
false
);
init
();
animate
();
function
init
()
{
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
Camera
(
45
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
15000
);
camera
.
position
.
z
=
500
;
scene
=
new
THREE
.
Scene
();
scene
.
fog
=
new
THREE
.
Fog
(
0x000000
,
1
,
15000
);
var
light
=
new
THREE
.
PointLight
(
0xff2200
);
light
.
position
.
set
(
100
,
100
,
100
);
scene
.
addLight
(
light
);
var
light
=
new
THREE
.
AmbientLight
(
0x333333
);
scene
.
addLight
(
light
);
var
material
=
new
THREE
.
MeshLambertMaterial
(
{
color
:
0xffffff
,
morphTargets
:
true
}
);
var
geometry
=
new
Cube
(
100
,
100
,
100
);
// construct 8 blend shapes
for
(
var
i
=
0
;
i
<
geometry
.
vertices
.
length
;
i
++
)
{
var
vertices
=
[];
for
(
var
v
=
0
;
v
<
geometry
.
vertices
.
length
;
v
++
)
{
vertices
.
push
(
new
THREE
.
Vertex
(
geometry
.
vertices
[
v
].
position
.
clone
(),
geometry
.
vertices
[
v
].
normal
.
clone
()))
if
(
v
===
i
)
{
vertices
[
vertices
.
length
-
1
].
position
.
x
*=
2
;
vertices
[
vertices
.
length
-
1
].
position
.
y
*=
2
;
vertices
[
vertices
.
length
-
1
].
position
.
z
*=
2
;
}
}
geometry
.
morphTargets
.
push
(
{
name
:
"
target
"
+
i
,
vertices
:
vertices
}
);
}
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
scene
.
addChild
(
mesh
);
renderer
=
new
THREE
.
WebGLRenderer
(
{
clearColor
:
0x222222
,
clearAlpha
:
1
}
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
sortObjects
=
false
;
container
.
appendChild
(
renderer
.
domElement
);
}
function
onDocumentMouseMove
(
event
)
{
mouseX
=
(
event
.
clientX
-
windowHalfX
);
mouseY
=
(
event
.
clientY
-
windowHalfY
)
*
2
;
}
function
animate
()
{
requestAnimationFrame
(
animate
);
render
();
}
function
render
()
{
mesh
.
rotation
.
y
+=
0.01
;
//mesh.morphTargetInfluences[ 0 ] = Math.sin( mesh.rotation.y ) * 0.5 + 0.5;
//camera.position.x += ( mouseX - camera.position.x ) * .005;
camera
.
position
.
y
+=
(
-
mouseY
-
camera
.
position
.
y
)
*
.
01
;
renderer
.
render
(
scene
,
camera
);
}
function
log
(
text
)
{
var
e
=
document
.
getElementById
(
"
log
"
);
e
.
innerHTML
=
text
+
"
<br/>
"
+
e
.
innerHTML
;
}
</script>
</body>
</html>
src/renderers/WebGLRenderer.js
浏览文件 @
24c75901
...
...
@@ -1729,17 +1729,24 @@ THREE.WebGLRenderer = function ( parameters ) {
// find most influencing
var
used
=
[];
var
candidateInfluence
=
-
1
;
var
candidate
=
0
;
var
influences
=
object
.
morphTargetInfluences
;
var
i
,
il
=
influences
.
length
;
var
m
=
0
;
if
(
object
.
morphTargetBase
!==
-
1
)
{
used
[
object
.
morphTargetBase
]
=
true
;
}
while
(
m
<
material
.
numSupportedMorphTargets
)
{
for
(
i
=
0
;
i
<
il
;
i
++
)
{
if
(
i
!=
object
.
morphTargetBase
&&
influences
[
i
]
>
candidateInfluence
)
{
if
(
!
used
[
i
]
&&
influences
[
i
]
>
candidateInfluence
)
{
candidate
=
i
;
candidateInfluence
=
influences
[
candidate
];
...
...
@@ -1751,6 +1758,7 @@ THREE.WebGLRenderer = function ( parameters ) {
object
.
__webGLMorphTargetInfluences
[
m
]
=
candidateInfluence
;
used
[
candidate
]
=
1
;
candidateInfluence
=
-
1
;
m
++
;
}
...
...
@@ -3877,7 +3885,10 @@ THREE.Snippets = {
"
morphed += ( morphTarget1 - position ) * morphTargetInfluences[ 1 ];
"
,
"
morphed += ( morphTarget2 - position ) * morphTargetInfluences[ 2 ];
"
,
"
morphed += ( morphTarget3 - position ) * morphTargetInfluences[ 3 ];
"
,
"
morphed *= 0.25;
"
,
"
morphed += ( morphTarget4 - position ) * morphTargetInfluences[ 4 ];
"
,
"
morphed += ( morphTarget5 - position ) * morphTargetInfluences[ 5 ];
"
,
"
morphed += ( morphTarget6 - position ) * morphTargetInfluences[ 6 ];
"
,
"
morphed += ( morphTarget7 - position ) * morphTargetInfluences[ 7 ];
"
,
"
morphed += position;
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( morphed, 1.0 );
"
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录