Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
f48fbe33
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,发现更多精彩内容 >>
未验证
提交
f48fbe33
编写于
2月 22, 2018
作者:
M
Mr.doob
提交者:
GitHub
2月 22, 2018
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #13408 from mrdoob/examples-ocean
Added THREE.Sky to THREE.Water example
上级
db58734b
b151b396
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
84 addition
and
95 deletion
+84
-95
examples/js/objects/Sky.js
examples/js/objects/Sky.js
+2
-1
examples/webgl_shaders_ocean.html
examples/webgl_shaders_ocean.html
+82
-94
未找到文件。
examples/js/objects/Sky.js
浏览文件 @
f48fbe33
...
...
@@ -25,7 +25,7 @@ THREE.Sky = function () {
side
:
THREE
.
BackSide
}
);
THREE
.
Mesh
.
call
(
this
,
new
THREE
.
SphereBufferGeometry
(
1
,
32
,
15
),
material
);
THREE
.
Mesh
.
call
(
this
,
new
THREE
.
BoxBufferGeometry
(
1
,
1
,
1
),
material
);
};
...
...
@@ -96,6 +96,7 @@ THREE.Sky.SkyShader = {
'
vWorldPosition = worldPosition.xyz;
'
,
'
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
'
,
'
gl_Position.z = gl_Position.w;
'
,
// set z to camera.far
'
vSunDirection = normalize( sunPosition );
'
,
...
...
examples/webgl_shaders_ocean.html
浏览文件 @
f48fbe33
...
...
@@ -34,6 +34,7 @@
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/objects/Water.js"
></script>
<script
src=
"js/objects/Sky.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/libs/stats.min.js"
></script>
...
...
@@ -45,14 +46,7 @@
var
container
,
stats
;
var
camera
,
scene
,
renderer
,
light
;
var
controls
,
water
,
sphere
,
cubeMap
;
var
parameters
=
{
oceanSide
:
2000
,
size
:
1.0
,
distortionScale
:
3.7
,
alpha
:
1.0
};
var
controls
,
water
,
sphere
;
init
();
animate
();
...
...
@@ -66,13 +60,11 @@
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
shadowMap
.
enabled
=
true
;
container
.
appendChild
(
renderer
.
domElement
);
//
scene
=
new
THREE
.
Scene
();
scene
.
fog
=
new
THREE
.
FogExp2
(
0xaabbbb
,
0.001
);
//
...
...
@@ -82,29 +74,77 @@
//
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
0.8
);
light
.
position
.
set
(
-
30
,
30
,
30
);
light
.
castShadow
=
true
;
light
.
shadow
.
camera
.
top
=
45
;
light
.
shadow
.
camera
.
right
=
40
;
light
.
shadow
.
camera
.
left
=
light
.
shadow
.
camera
.
bottom
=
-
40
;
light
.
shadow
.
camera
.
near
=
1
;
light
.
shadow
.
camera
.
far
=
200
;
scene
.
add
(
light
);
var
ambientLight
=
new
THREE
.
AmbientLight
(
0xcccccc
,
0.4
);
scene
.
add
(
ambientLight
);
// Water
//
var
waterGeometry
=
new
THREE
.
PlaneBufferGeometry
(
10000
,
10000
);
setWater
();
water
=
new
THREE
.
Water
(
waterGeometry
,
{
textureWidth
:
512
,
textureHeight
:
512
,
waterNormals
:
new
THREE
.
TextureLoader
().
load
(
'
textures/waternormals.jpg
'
,
function
(
texture
)
{
texture
.
wrapS
=
texture
.
wrapT
=
THREE
.
RepeatWrapping
;
}),
alpha
:
1.0
,
sunDirection
:
light
.
position
.
clone
().
normalize
(),
sunColor
:
0xffffff
,
waterColor
:
0x001e0f
,
distortionScale
:
3.7
,
fog
:
scene
.
fog
!==
undefined
}
);
//
water
.
rotation
.
x
=
-
Math
.
PI
/
2
;
setSkybox
();
scene
.
add
(
water
);
// Skybox
var
sky
=
new
THREE
.
Sky
();
sky
.
scale
.
setScalar
(
10000
);
scene
.
add
(
sky
);
var
uniforms
=
sky
.
material
.
uniforms
;
uniforms
.
turbidity
.
value
=
10
;
uniforms
.
rayleigh
.
value
=
2
;
uniforms
.
luminance
.
value
=
1
;
uniforms
.
mieCoefficient
.
value
=
0.005
;
uniforms
.
mieDirectionalG
.
value
=
0.8
;
var
parameters
=
{
distance
:
400
,
inclination
:
0.49
,
azimuth
:
0.2
};
var
cubeCamera
=
new
THREE
.
CubeCamera
(
1
,
20000
,
256
);
cubeCamera
.
renderTarget
.
texture
.
minFilter
=
THREE
.
LinearMipMapLinearFilter
;
function
updateSun
()
{
var
theta
=
Math
.
PI
*
(
parameters
.
inclination
-
0.5
);
var
phi
=
2
*
Math
.
PI
*
(
parameters
.
azimuth
-
0.5
);
light
.
position
.
x
=
parameters
.
distance
*
Math
.
cos
(
phi
);
light
.
position
.
y
=
parameters
.
distance
*
Math
.
sin
(
phi
)
*
Math
.
sin
(
theta
);
light
.
position
.
z
=
parameters
.
distance
*
Math
.
sin
(
phi
)
*
Math
.
cos
(
theta
);
sky
.
material
.
uniforms
.
sunPosition
.
value
=
light
.
position
.
copy
(
light
.
position
);
water
.
material
.
uniforms
.
sunDirection
.
value
.
copy
(
light
.
position
).
normalize
();
cubeCamera
.
update
(
renderer
,
scene
);
}
updateSun
();
//
var
geometry
=
new
THREE
.
IcosahedronGeometry
(
20
,
2
);
var
geometry
=
new
THREE
.
IcosahedronGeometry
(
20
,
1
);
for
(
var
i
=
0
,
j
=
geometry
.
faces
.
length
;
i
<
j
;
i
++
)
{
...
...
@@ -112,15 +152,15 @@
}
var
material
=
new
THREE
.
Mesh
Phong
Material
(
{
var
material
=
new
THREE
.
Mesh
Standard
Material
(
{
vertexColors
:
THREE
.
FaceColors
,
shininess
:
10
,
envMap
:
cubeMap
,
roughness
:
0.0
,
flatShading
:
true
,
envMap
:
cubeCamera
.
renderTarget
.
texture
,
side
:
THREE
.
DoubleSide
}
);
sphere
=
new
THREE
.
Mesh
(
geometry
,
material
);
sphere
.
castShadow
=
true
;
scene
.
add
(
sphere
);
//
...
...
@@ -138,77 +178,28 @@
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
//
//
GUI
var
gui
=
new
dat
.
GUI
();
gui
.
add
(
parameters
,
'
distortionScale
'
,
0
,
8
,
0.1
);
gui
.
add
(
parameters
,
'
size
'
,
0.1
,
10
,
0.1
);
gui
.
add
(
parameters
,
'
alpha
'
,
0.9
,
1
,
.
001
);
var
uniforms
=
sky
.
material
.
uniforms
;
//
var
folder
=
gui
.
addFolder
(
'
Sky
'
);
folder
.
add
(
parameters
,
'
inclination
'
,
0
,
1
,
0.0001
).
onChange
(
updateSun
);
folder
.
add
(
parameters
,
'
azimuth
'
,
0
,
1
,
0.0001
).
onChange
(
updateSun
);
folder
.
open
();
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
setWater
()
{
var
waterGeometry
=
new
THREE
.
PlaneBufferGeometry
(
parameters
.
oceanSide
*
5
,
parameters
.
oceanSide
*
5
);
water
=
new
THREE
.
Water
(
waterGeometry
,
{
textureWidth
:
512
,
textureHeight
:
512
,
waterNormals
:
new
THREE
.
TextureLoader
().
load
(
'
textures/waternormals.jpg
'
,
function
(
texture
)
{
texture
.
wrapS
=
texture
.
wrapT
=
THREE
.
RepeatWrapping
;
}),
alpha
:
parameters
.
alpha
,
sunDirection
:
light
.
position
.
clone
().
normalize
(),
sunColor
:
0xffffff
,
waterColor
:
0x001e0f
,
distortionScale
:
parameters
.
distortionScale
,
fog
:
scene
.
fog
!==
undefined
}
);
water
.
rotation
.
x
=
-
Math
.
PI
/
2
;
water
.
receiveShadow
=
true
;
scene
.
add
(
water
);
}
var
uniforms
=
water
.
material
.
uniforms
;
function
setSkybox
()
{
var
folder
=
gui
.
addFolder
(
'
Water
'
);
folder
.
add
(
uniforms
.
distortionScale
,
'
value
'
,
0
,
8
,
0.1
).
name
(
'
distortionScale
'
);
folder
.
add
(
uniforms
.
size
,
'
value
'
,
0.1
,
10
,
0.1
).
name
(
'
size
'
);
folder
.
add
(
uniforms
.
alpha
,
'
value
'
,
0.9
,
1
,
.
001
).
name
(
'
alpha
'
);
folder
.
open
();
var
cubeTextureLoader
=
new
THREE
.
CubeTextureLoader
();
cubeTextureLoader
.
setPath
(
'
textures/cube/skyboxsun25deg/
'
);
cubeMap
=
cubeTextureLoader
.
load
(
[
'
px.jpg
'
,
'
nx.jpg
'
,
'
py.jpg
'
,
'
ny.jpg
'
,
'
pz.jpg
'
,
'
nz.jpg
'
,
]
);
var
cubeShader
=
THREE
.
ShaderLib
[
'
cube
'
];
cubeShader
.
uniforms
[
'
tCube
'
].
value
=
cubeMap
;
var
skyBoxMaterial
=
new
THREE
.
ShaderMaterial
(
{
fragmentShader
:
cubeShader
.
fragmentShader
,
vertexShader
:
cubeShader
.
vertexShader
,
uniforms
:
cubeShader
.
uniforms
,
side
:
THREE
.
BackSide
}
);
var
skyBoxGeometry
=
new
THREE
.
BoxBufferGeometry
(
parameters
.
oceanSide
*
5
+
100
,
parameters
.
oceanSide
*
5
+
100
,
parameters
.
oceanSide
*
5
+
100
);
var
skyBox
=
new
THREE
.
Mesh
(
skyBoxGeometry
,
skyBoxMaterial
);
//
scene
.
add
(
skyBox
);
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
...
...
@@ -238,9 +229,6 @@
sphere
.
rotation
.
z
=
time
*
0.51
;
water
.
material
.
uniforms
.
time
.
value
+=
1.0
/
60.0
;
water
.
material
.
uniforms
.
size
.
value
=
parameters
.
size
;
water
.
material
.
uniforms
.
distortionScale
.
value
=
parameters
.
distortionScale
;
water
.
material
.
uniforms
.
alpha
.
value
=
parameters
.
alpha
;
renderer
.
render
(
scene
,
camera
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录