Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
504ce22d
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,发现更多精彩内容 >>
未验证
提交
504ce22d
编写于
4月 05, 2018
作者:
M
Mr.doob
提交者:
GitHub
4月 05, 2018
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #13775 from WestLangley/dev-pmrem_cleanup
PMREM Examples: Clean up
上级
b69d7c76
7376637c
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
36 addition
and
106 deletion
+36
-106
examples/webgl_materials_envmaps_exr.html
examples/webgl_materials_envmaps_exr.html
+6
-9
examples/webgl_materials_envmaps_hdr.html
examples/webgl_materials_envmaps_hdr.html
+30
-97
未找到文件。
examples/webgl_materials_envmaps_exr.html
浏览文件 @
504ce22d
...
...
@@ -6,11 +6,10 @@
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
body
{
color
:
#
000
;
color
:
#
fff
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
color
:
#fff
;
background-color
:
#000
;
...
...
@@ -50,7 +49,7 @@
var
container
,
stats
;
var
params
=
{
envMap
:
"
EXR
"
,
envMap
:
'
EXR
'
,
roughness
:
0.0
,
metalness
:
0.0
,
exposure
:
1.0
...
...
@@ -67,7 +66,7 @@
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
PerspectiveCamera
(
40
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
2
000
);
camera
=
new
THREE
.
PerspectiveCamera
(
40
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1
000
);
camera
.
position
.
set
(
0.0
,
0
,
120
);
scene
=
new
THREE
.
Scene
();
...
...
@@ -101,7 +100,7 @@
planeMesh1
.
rotation
.
x
=
-
Math
.
PI
*
0.5
;
scene
.
add
(
planeMesh1
);
new
THREE
.
EXRLoader
().
load
(
"
textures/piz_compressed.exr
"
,
function
(
texture
)
{
new
THREE
.
EXRLoader
().
load
(
'
textures/piz_compressed.exr
'
,
function
(
texture
)
{
texture
.
minFilter
=
THREE
.
NearestFilter
;
texture
.
magFilter
=
THREE
.
NearestFilter
;
...
...
@@ -120,7 +119,7 @@
}
);
new
THREE
.
TextureLoader
().
load
(
"
textures/equiangular.png
"
,
function
(
texture
)
{
new
THREE
.
TextureLoader
().
load
(
'
textures/equiangular.png
'
,
function
(
texture
)
{
texture
.
encoding
=
THREE
.
sRGBEncoding
;
...
...
@@ -214,9 +213,7 @@
}
renderer
.
toneMappingExposure
=
Math
.
pow
(
params
.
exposure
,
4.0
);
camera
.
lookAt
(
scene
.
position
);
renderer
.
toneMappingExposure
=
params
.
exposure
;
for
(
var
i
=
0
,
l
=
objects
.
length
;
i
<
l
;
i
++
)
{
...
...
examples/webgl_materials_envmaps_hdr.html
浏览文件 @
504ce22d
...
...
@@ -6,7 +6,7 @@
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
body
{
color
:
#
000
;
color
:
#
fff
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
...
...
@@ -33,6 +33,7 @@
<script
src=
"../build/three.js"
></script>
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/loaders/RGBELoader.js"
></script>
<script
src=
"js/loaders/HDRCubeTextureLoader.js"
></script>
...
...
@@ -43,32 +44,18 @@
<script
src=
"js/pmrem/PMREMCubeUVPacker.js"
></script>
<script
src=
"js/libs/dat.gui.min.js"
></script>
<script
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
src=
"js/postprocessing/RenderPass.js"
></script>
<script
src=
"js/postprocessing/MaskPass.js"
></script>
<script
src=
"js/postprocessing/ShaderPass.js"
></script>
<script
src=
"js/shaders/CopyShader.js"
></script>
<script
src=
"js/shaders/FXAAShader.js"
></script>
<script
src=
"js/postprocessing/BloomPass.js"
></script>
<script
src=
"js/shaders/ConvolutionShader.js"
></script>
<script>
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
container
,
stats
;
var
params
=
{
envMap
:
"
HDR
"
,
projection
:
'
normal
'
,
roughness
:
1.0
,
bumpScale
:
0.3
,
background
:
false
,
exposure
:
1.0
,
side
:
'
front
'
envMap
:
'
HDR
'
,
roughness
:
0.0
,
metalness
:
0.0
,
exposure
:
1.0
};
var
camera
,
scene
,
renderer
,
controls
,
objects
=
[];
var
hdrCubeMap
;
var
composer
;
var
standardMaterial
,
floorMaterial
;
var
ldrCubeRenderTarget
,
hdrCubeRenderTarget
,
rgbmCubeRenderTarget
;
...
...
@@ -80,58 +67,39 @@
container
=
document
.
createElement
(
'
div
'
);
document
.
body
.
appendChild
(
container
);
camera
=
new
THREE
.
PerspectiveCamera
(
40
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
2
000
);
camera
.
position
.
set
(
0.0
,
40
,
40
*
3.5
);
camera
=
new
THREE
.
PerspectiveCamera
(
40
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1
000
);
camera
.
position
.
set
(
0.0
,
0
,
120
);
scene
=
new
THREE
.
Scene
();
scene
.
background
=
new
THREE
.
Color
(
0x
ffffff
);
scene
.
background
=
new
THREE
.
Color
(
0x
000000
);
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
toneMapping
=
THREE
.
LinearToneMapping
;
standardMaterial
=
new
THREE
.
MeshStandardMaterial
(
{
map
:
null
,
bumpScale
:
-
0.05
,
color
:
0xff4444
,
metalness
:
0.5
,
roughness
:
1.0
color
:
0xffffff
,
metalness
:
params
.
metalness
,
roughness
:
params
.
roughness
}
);
var
geometry
=
new
THREE
.
TorusKnotGeometry
(
18
,
8
,
150
,
20
);
var
geometry
=
new
THREE
.
TorusKnotBufferGeometry
(
18
,
8
,
150
,
20
);
var
torusMesh1
=
new
THREE
.
Mesh
(
geometry
,
standardMaterial
);
torusMesh1
.
position
.
x
=
0.0
;
torusMesh1
.
castShadow
=
true
;
torusMesh1
.
receiveShadow
=
true
;
scene
.
add
(
torusMesh1
);
objects
.
push
(
torusMesh1
);
floorMaterial
=
new
THREE
.
MeshStandardMaterial
(
{
map
:
null
,
roughnessMap
:
null
,
floorMaterial
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xffffff
,
metalness
:
0.0
,
roughness
:
0.0
}
);
var
planeGeometry
=
new
THREE
.
PlaneBufferGeometry
(
200
,
200
);
var
planeMesh1
=
new
THREE
.
Mesh
(
planeGeometry
,
floorMaterial
);
planeMesh1
.
position
.
y
=
-
50
;
planeMesh1
.
rotation
.
x
=
-
Math
.
PI
*
0.5
;
planeMesh1
.
receiveShadow
=
true
;
scene
.
add
(
planeMesh1
);
var
textureLoader
=
new
THREE
.
TextureLoader
();
textureLoader
.
load
(
"
./textures/roughness_map.jpg
"
,
function
(
map
)
{
map
.
wrapS
=
THREE
.
RepeatWrapping
;
map
.
wrapT
=
THREE
.
RepeatWrapping
;
map
.
anisotropy
=
4
;
map
.
repeat
.
set
(
9
,
2
);
standardMaterial
.
map
=
map
;
standardMaterial
.
roughnessMap
=
map
;
standardMaterial
.
bumpMap
=
map
;
standardMaterial
.
needsUpdate
=
true
;
}
);
var
genCubeUrls
=
function
(
prefix
,
postfix
)
{
return
[
prefix
+
'
px
'
+
postfix
,
prefix
+
'
nx
'
+
postfix
,
...
...
@@ -140,7 +108,7 @@
];
};
var
hdrUrls
=
genCubeUrls
(
"
./textures/cube/pisaHDR/
"
,
"
.hdr
"
);
var
hdrUrls
=
genCubeUrls
(
'
./textures/cube/pisaHDR/
'
,
'
.hdr
'
);
new
THREE
.
HDRCubeTextureLoader
().
load
(
THREE
.
UnsignedByteType
,
hdrUrls
,
function
(
hdrCubeMap
)
{
var
pmremGenerator
=
new
THREE
.
PMREMGenerator
(
hdrCubeMap
);
...
...
@@ -153,7 +121,7 @@
}
);
var
ldrUrls
=
genCubeUrls
(
"
./textures/cube/pisa/
"
,
"
.png
"
);
var
ldrUrls
=
genCubeUrls
(
'
./textures/cube/pisa/
'
,
'
.png
'
);
new
THREE
.
CubeTextureLoader
().
load
(
ldrUrls
,
function
(
ldrCubeMap
)
{
ldrCubeMap
.
encoding
=
THREE
.
GammaEncoding
;
...
...
@@ -169,7 +137,7 @@
}
);
var
rgbmUrls
=
genCubeUrls
(
"
./textures/cube/pisaRGBM16/
"
,
"
.png
"
);
var
rgbmUrls
=
genCubeUrls
(
'
./textures/cube/pisaRGBM16/
'
,
'
.png
'
);
new
THREE
.
CubeTextureLoader
().
load
(
rgbmUrls
,
function
(
rgbmCubeMap
)
{
rgbmCubeMap
.
encoding
=
THREE
.
RGBM16Encoding
;
...
...
@@ -184,40 +152,29 @@
}
);
// Lights
scene
.
add
(
new
THREE
.
AmbientLight
(
0x222222
)
);
var
spotLight
=
new
THREE
.
SpotLight
(
0xffffff
);
spotLight
.
position
.
set
(
50
,
100
,
50
);
spotLight
.
angle
=
Math
.
PI
/
7
;
spotLight
.
penumbra
=
0.8
;
spotLight
.
castShadow
=
true
;
scene
.
add
(
spotLight
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
shadowMap
.
enabled
=
true
;
container
.
appendChild
(
renderer
.
domElement
);
//renderer.toneMapping = THREE.ReinhardToneMapping;
renderer
.
gammaInput
=
true
;
renderer
.
gammaInput
=
true
;
// ???
renderer
.
gammaOutput
=
true
;
stats
=
new
Stats
();
container
.
appendChild
(
stats
.
dom
);
controls
=
new
THREE
.
OrbitControls
(
camera
,
renderer
.
domElement
);
controls
.
minDistance
=
50
;
controls
.
maxDistance
=
300
;
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
var
gui
=
new
dat
.
GUI
();
gui
.
add
(
params
,
'
envMap
'
,
[
'
None
'
,
'
LDR
'
,
'
HDR
'
,
'
RGBM16
'
]
);
gui
.
add
(
params
,
'
envMap
'
,
[
'
LDR
'
,
'
HDR
'
,
'
RGBM16
'
]
);
gui
.
add
(
params
,
'
roughness
'
,
0
,
1
);
gui
.
add
(
params
,
'
bumpScale
'
,
-
1
,
1
);
gui
.
add
(
params
,
'
exposure
'
,
0.1
,
2
);
gui
.
add
(
params
,
'
side
'
,
[
'
front
'
,
'
back
'
,
'
double
'
]
);
gui
.
add
(
params
,
'
metalness
'
,
0
,
1
);
gui
.
add
(
params
,
'
exposure
'
,
0
,
2
);
gui
.
open
();
}
...
...
@@ -234,8 +191,6 @@
}
//
function
animate
()
{
requestAnimationFrame
(
animate
);
...
...
@@ -251,53 +206,31 @@
if
(
standardMaterial
!==
undefined
)
{
standardMaterial
.
roughness
=
params
.
roughness
;
standardMaterial
.
bumpScale
=
-
0.05
*
params
.
bumpScale
;
standardMaterial
.
metalness
=
params
.
metalness
;
var
newEnvMap
=
standardMaterial
.
envMap
;
switch
(
params
.
envMap
)
{
case
'
None
'
:
newEnvMap
=
null
;
break
;
case
'
LDR
'
:
newEnvMap
=
ldrCubeRenderTarget
?
ldrCubeRenderTarget
.
texture
:
null
;
break
;
case
'
HDR
'
:
newEnvMap
=
hdrCubeRenderTarget
?
hdrCubeRenderTarget
.
texture
:
null
;
break
;
case
'
RGBM16
'
:
newEnvMap
=
rgbmCubeRenderTarget
?
rgbmCubeRenderTarget
.
texture
:
null
;
break
;
}
if
(
newEnvMap
!==
standardMaterial
.
envMap
)
{
if
(
newEnvMap
!==
standardMaterial
.
envMap
)
{
standardMaterial
.
envMap
=
newEnvMap
;
standardMaterial
.
needsUpdate
=
true
;
floorMaterial
.
emissive
=
new
THREE
.
Color
(
1
,
1
,
1
);
floorMaterial
.
emissiveMap
=
newEnvMap
;
floorMaterial
.
needsUpdate
=
true
;
}
var
side
=
standardMaterial
.
side
;
switch
(
params
.
side
)
{
case
'
front
'
:
side
=
THREE
.
FrontSide
;
break
;
case
'
back
'
:
side
=
THREE
.
BackSide
;
break
;
case
'
double
'
:
side
=
THREE
.
DoubleSide
;
break
;
floorMaterial
.
map
=
newEnvMap
;
floorMaterial
.
needsUpdate
=
true
;
}
if
(
standardMaterial
.
side
!==
side
)
{
standardMaterial
.
side
=
side
;
standardMaterial
.
needsUpdate
=
true
;
}
}
renderer
.
toneMappingExposure
=
Math
.
pow
(
params
.
exposure
,
4.0
);
var
timer
=
Date
.
now
()
*
0.00025
;
camera
.
lookAt
(
scene
.
position
);
renderer
.
toneMappingExposure
=
params
.
exposure
;
for
(
var
i
=
0
,
l
=
objects
.
length
;
i
<
l
;
i
++
)
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录