Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
车家大少爷
three.js
提交
cdc9f8a0
T
three.js
项目概览
车家大少爷
/
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,体验更适合开发者的 AI 搜索 >>
提交
cdc9f8a0
编写于
10月 01, 2017
作者:
M
Mugen87
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Examples: Clean up
上级
2f84f189
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
93 addition
and
77 deletion
+93
-77
examples/js/objects/Mirror.js
examples/js/objects/Mirror.js
+89
-75
examples/js/objects/Refractor.js
examples/js/objects/Refractor.js
+3
-1
examples/webgl_refraction.html
examples/webgl_refraction.html
+1
-1
未找到文件。
examples/js/objects/Mirror.js
浏览文件 @
cdc9f8a0
...
...
@@ -6,20 +6,17 @@ THREE.Mirror = function ( width, height, options ) {
THREE
.
Mesh
.
call
(
this
,
new
THREE
.
PlaneBufferGeometry
(
width
,
height
)
);
var
scope
=
this
;
this
.
type
=
'
Mirror
'
;
scope
.
name
=
'
mirror_
'
+
scope
.
id
;
var
scope
=
this
;
options
=
options
||
{};
var
viewport
=
new
THREE
.
Vector4
();
var
textureWidth
=
options
.
textureWidth
!==
undefined
?
options
.
textureWidth
:
512
;
var
textureHeight
=
options
.
textureHeight
!==
undefined
?
options
.
textureHeight
:
512
;
var
clipBias
=
options
.
clipBias
!==
undefined
?
options
.
clipBias
:
0.0
;
var
mirrorColor
=
options
.
color
!==
undefined
?
new
THREE
.
Color
(
options
.
color
)
:
new
THREE
.
Color
(
0x7F7F7F
);
var
color
=
(
options
.
color
!==
undefined
)
?
new
THREE
.
Color
(
options
.
color
)
:
new
THREE
.
Color
(
0x7F7F7F
);
var
textureWidth
=
options
.
textureWidth
||
512
;
var
textureHeight
=
options
.
textureHeight
||
512
;
var
clipBias
=
options
.
clipBias
||
0
;
var
shader
=
options
.
shader
||
THREE
.
DefaultMirrorShader
;
var
recursion
=
options
.
recursion
!==
undefined
?
options
.
recursion
:
0
;
//
...
...
@@ -31,14 +28,14 @@ THREE.Mirror = function ( width, height, options ) {
var
rotationMatrix
=
new
THREE
.
Matrix4
();
var
lookAtPosition
=
new
THREE
.
Vector3
(
0
,
0
,
-
1
);
var
clipPlane
=
new
THREE
.
Vector4
();
var
viewport
=
new
THREE
.
Vector4
();
var
view
=
new
THREE
.
Vector3
();
var
target
=
new
THREE
.
Vector3
();
var
q
=
new
THREE
.
Vector4
();
var
textureMatrix
=
new
THREE
.
Matrix4
();
var
mirrorCamera
=
new
THREE
.
PerspectiveCamera
();
var
virtualCamera
=
new
THREE
.
PerspectiveCamera
();
var
parameters
=
{
minFilter
:
THREE
.
LinearFilter
,
...
...
@@ -55,59 +52,15 @@ THREE.Mirror = function ( width, height, options ) {
}
var
mirrorShader
=
{
uniforms
:
{
mirrorColor
:
{
value
:
new
THREE
.
Color
(
0x7F7F7F
)
},
mirrorSampler
:
{
value
:
null
},
textureMatrix
:
{
value
:
new
THREE
.
Matrix4
()
}
},
vertexShader
:
[
'
uniform mat4 textureMatrix;
'
,
'
varying vec4 mirrorCoord;
'
,
'
void main() {
'
,
'
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
'
,
'
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
'
,
'
mirrorCoord = textureMatrix * worldPosition;
'
,
'
gl_Position = projectionMatrix * mvPosition;
'
,
'
}
'
].
join
(
'
\n
'
),
fragmentShader
:
[
'
uniform vec3 mirrorColor;
'
,
'
uniform sampler2D mirrorSampler;
'
,
'
varying vec4 mirrorCoord;
'
,
'
float blendOverlay(float base, float blend) {
'
,
'
return( base < 0.5 ? ( 2.0 * base * blend ) : (1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
'
,
'
}
'
,
'
void main() {
'
,
'
vec4 color = texture2DProj(mirrorSampler, mirrorCoord);
'
,
'
color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);
'
,
'
gl_FragColor = color;
'
,
'
}
'
].
join
(
'
\n
'
)
};
var
mirrorUniforms
=
THREE
.
UniformsUtils
.
clone
(
mirrorShader
.
uniforms
);
var
material
=
new
THREE
.
ShaderMaterial
(
{
fragmentShader
:
mirrorShader
.
fragmentShader
,
vertexShader
:
mirrorShader
.
vertexShader
,
uniforms
:
mirrorUniforms
uniforms
:
THREE
.
UniformsUtils
.
clone
(
shader
.
uniforms
),
fragmentShader
:
shader
.
fragmentShader
,
vertexShader
:
shader
.
vertexShader
,
}
);
material
.
uniforms
.
mirrorSampler
.
value
=
renderTarget
.
texture
;
material
.
uniforms
.
mirrorColor
.
value
=
mirrorC
olor
;
material
.
uniforms
.
tDiffuse
.
value
=
renderTarget
.
texture
;
material
.
uniforms
.
color
.
value
=
c
olor
;
material
.
uniforms
.
textureMatrix
.
value
=
textureMatrix
;
scope
.
material
=
material
;
...
...
@@ -149,18 +102,18 @@ THREE.Mirror = function ( width, height, options ) {
target
.
reflect
(
normal
).
negate
();
target
.
add
(
mirrorWorldPosition
);
mirror
Camera
.
position
.
copy
(
view
);
mirror
Camera
.
up
.
set
(
0
,
1
,
0
);
mirror
Camera
.
up
.
applyMatrix4
(
rotationMatrix
);
mirror
Camera
.
up
.
reflect
(
normal
);
mirror
Camera
.
lookAt
(
target
);
virtual
Camera
.
position
.
copy
(
view
);
virtual
Camera
.
up
.
set
(
0
,
1
,
0
);
virtual
Camera
.
up
.
applyMatrix4
(
rotationMatrix
);
virtual
Camera
.
up
.
reflect
(
normal
);
virtual
Camera
.
lookAt
(
target
);
mirror
Camera
.
far
=
camera
.
far
;
// Used in WebGLBackground
virtual
Camera
.
far
=
camera
.
far
;
// Used in WebGLBackground
mirror
Camera
.
updateMatrixWorld
();
mirror
Camera
.
projectionMatrix
.
copy
(
camera
.
projectionMatrix
);
virtual
Camera
.
updateMatrixWorld
();
virtual
Camera
.
projectionMatrix
.
copy
(
camera
.
projectionMatrix
);
mirror
Camera
.
userData
.
recursion
=
0
;
virtual
Camera
.
userData
.
recursion
=
0
;
// Update the texture matrix
textureMatrix
.
set
(
...
...
@@ -169,17 +122,18 @@ THREE.Mirror = function ( width, height, options ) {
0.0
,
0.0
,
0.5
,
0.5
,
0.0
,
0.0
,
0.0
,
1.0
);
textureMatrix
.
multiply
(
mirrorCamera
.
projectionMatrix
);
textureMatrix
.
multiply
(
mirrorCamera
.
matrixWorldInverse
);
textureMatrix
.
multiply
(
virtualCamera
.
projectionMatrix
);
textureMatrix
.
multiply
(
virtualCamera
.
matrixWorldInverse
);
textureMatrix
.
multiply
(
scope
.
matrixWorld
);
// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
mirrorPlane
.
setFromNormalAndCoplanarPoint
(
normal
,
mirrorWorldPosition
);
mirrorPlane
.
applyMatrix4
(
mirror
Camera
.
matrixWorldInverse
);
mirrorPlane
.
applyMatrix4
(
virtual
Camera
.
matrixWorldInverse
);
clipPlane
.
set
(
mirrorPlane
.
normal
.
x
,
mirrorPlane
.
normal
.
y
,
mirrorPlane
.
normal
.
z
,
mirrorPlane
.
constant
);
var
projectionMatrix
=
mirror
Camera
.
projectionMatrix
;
var
projectionMatrix
=
virtual
Camera
.
projectionMatrix
;
q
.
x
=
(
Math
.
sign
(
clipPlane
.
x
)
+
projectionMatrix
.
elements
[
8
]
)
/
projectionMatrix
.
elements
[
0
];
q
.
y
=
(
Math
.
sign
(
clipPlane
.
y
)
+
projectionMatrix
.
elements
[
9
]
)
/
projectionMatrix
.
elements
[
5
];
...
...
@@ -207,7 +161,7 @@ THREE.Mirror = function ( width, height, options ) {
renderer
.
vr
.
enabled
=
false
;
// Avoid camera modification and recursion
renderer
.
shadowMap
.
autoUpdate
=
false
;
// Avoid re-computing shadows
renderer
.
render
(
scene
,
mirror
Camera
,
renderTarget
,
true
);
renderer
.
render
(
scene
,
virtual
Camera
,
renderTarget
,
true
);
renderer
.
vr
.
enabled
=
currentVrEnabled
;
renderer
.
shadowMap
.
autoUpdate
=
currentShadowAutoUpdate
;
...
...
@@ -240,3 +194,63 @@ THREE.Mirror = function ( width, height, options ) {
THREE
.
Mirror
.
prototype
=
Object
.
create
(
THREE
.
Mesh
.
prototype
);
THREE
.
Mirror
.
prototype
.
constructor
=
THREE
.
Mirror
;
THREE
.
DefaultMirrorShader
=
{
uniforms
:
{
'
color
'
:
{
type
:
'
c
'
,
value
:
null
},
'
tDiffuse
'
:
{
type
:
'
t
'
,
value
:
null
},
'
textureMatrix
'
:
{
type
:
'
m4
'
,
value
:
null
}
},
vertexShader
:
[
'
uniform mat4 textureMatrix;
'
,
'
varying vec4 vUv;
'
,
'
void main() {
'
,
'
vUv = textureMatrix * vec4( position, 1.0 );
'
,
'
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
'
,
'
}
'
].
join
(
'
\n
'
),
fragmentShader
:
[
'
uniform vec3 color;
'
,
'
uniform sampler2D tDiffuse;
'
,
'
varying vec4 vUv;
'
,
'
float blendOverlay( float base, float blend ) {
'
,
'
return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
'
,
'
}
'
,
'
vec3 blendOverlay( vec3 base, vec3 blend ) {
'
,
'
return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ),blendOverlay( base.b, blend.b ) );
'
,
'
}
'
,
'
void main() {
'
,
'
vec4 base = texture2DProj( tDiffuse, vUv );
'
,
'
gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
'
,
'
}
'
].
join
(
'
\n
'
)
};
examples/js/objects/Refractor.js
浏览文件 @
cdc9f8a0
...
...
@@ -11,7 +11,9 @@ THREE.Refractor = function ( width, height, options ) {
var
scope
=
this
;
var
color
=
options
.
color
||
new
THREE
.
Color
(
0x7f7f7f
);
options
=
options
||
{};
var
color
=
(
options
.
color
!==
undefined
)
!==
undefined
?
new
THREE
.
Color
(
options
.
color
)
:
new
THREE
.
Color
(
0x7F7F7F
);
var
textureWidth
=
options
.
textureWidth
||
512
;
var
textureHeight
=
options
.
textureHeight
||
512
;
var
clipBias
=
options
.
clipBias
||
0
;
...
...
examples/webgl_refraction.html
浏览文件 @
cdc9f8a0
...
...
@@ -78,7 +78,7 @@
// refractor
refractor
=
new
THREE
.
Refractor
(
10
,
10
,
{
color
:
new
THREE
.
Color
(
0x999999
)
,
color
:
0x999999
,
textureWidth
:
1024
,
textureHeight
:
1024
,
shader
:
THREE
.
WaterRefractionShader
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录