Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
fktz008
three.js
提交
944aeb1b
T
three.js
项目概览
fktz008
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
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,发现更多精彩内容 >>
提交
944aeb1b
编写于
2月 23, 2022
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Examples: Improved webgl_cubemap_dynamic.
上级
c495edd3
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
40 addition
and
90 deletion
+40
-90
examples/screenshots/webgl_materials_cubemap_dynamic.jpg
examples/screenshots/webgl_materials_cubemap_dynamic.jpg
+0
-0
examples/webgl_materials_cubemap_dynamic.html
examples/webgl_materials_cubemap_dynamic.html
+40
-90
未找到文件。
examples/screenshots/webgl_materials_cubemap_dynamic.jpg
查看替换文件 @
c495edd3
浏览文件 @
944aeb1b
31.3 KB
|
W:
|
H:
25.0 KB
|
W:
|
H:
2-up
Swipe
Onion skin
examples/webgl_materials_cubemap_dynamic.html
浏览文件 @
944aeb1b
...
...
@@ -13,7 +13,7 @@
</head>
<body>
<div
id=
"info"
><a
href=
"https://threejs.org"
target=
"_blank"
rel=
"noopener"
>
three.js webgl
</a>
- materials - dynamic cube reflection
<
br/>
Photo by
<a
href=
"http://www.flickr.com/photos/jonragnarsson/2294472375/"
target=
"_blank"
rel=
"noopener"
>
J
ó
n Ragnarsson
</a>
.
<
/div>
<div
id=
"info"
><a
href=
"https://threejs.org"
target=
"_blank"
rel=
"noopener"
>
three.js webgl
</a>
- materials - dynamic cube reflection
</div>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
...
...
@@ -31,6 +31,10 @@
import
*
as
THREE
from
'
three
'
;
import
{
OrbitControls
}
from
'
./jsm/controls/OrbitControls.js
'
;
import
{
RGBELoader
}
from
'
./jsm/loaders/RGBELoader.js
'
;
import
{
GUI
}
from
'
./jsm/libs/lil-gui.module.min.js
'
;
import
Stats
from
'
./jsm/libs/stats.module.js
'
;
let
camera
,
scene
,
renderer
,
stats
;
...
...
@@ -38,74 +42,75 @@
let
count
=
0
,
cubeCamera1
,
cubeCamera2
,
cubeRenderTarget1
,
cubeRenderTarget2
;
let
onPointerDownPointerX
,
onPointerDownPointerY
,
onPointerDownLon
,
onPointerDownLat
;
let
lon
=
0
,
lat
=
0
;
let
phi
=
0
,
theta
=
0
;
const
textureLoader
=
new
THREE
.
TextureLoader
();
textureLoader
.
load
(
'
textures/2294472375_24a3b8ef46_o.jpg
'
,
function
(
texture
)
{
let
controls
;
texture
.
encoding
=
THREE
.
sRGBEncoding
;
texture
.
mapping
=
THREE
.
EquirectangularReflectionMapping
;
init
()
;
animate
()
;
init
(
texture
);
animate
();
}
);
function
init
(
texture
)
{
function
init
()
{
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
outputEncoding
=
THREE
.
sRGBEncoding
;
renderer
.
toneMapping
=
THREE
.
ACESFilmicToneMapping
;
document
.
body
.
appendChild
(
renderer
.
domElement
);
window
.
addEventListener
(
'
resize
'
,
onWindowResized
);
stats
=
new
Stats
();
document
.
body
.
appendChild
(
stats
.
dom
);
camera
=
new
THREE
.
PerspectiveCamera
(
60
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
camera
.
position
.
z
=
75
;
scene
=
new
THREE
.
Scene
();
scene
.
background
=
texture
;
camera
=
new
THREE
.
PerspectiveCamera
(
60
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
new
RGBELoader
()
.
setPath
(
'
textures/equirectangular/
'
)
.
load
(
'
quarry_01_1k.hdr
'
,
function
(
texture
)
{
//
texture
.
mapping
=
THREE
.
EquirectangularReflectionMapping
;
scene
.
background
=
texture
;
const
envSize
=
64
;
// minimum size for roughness >= 0.1
}
);
cubeRenderTarget1
=
new
THREE
.
WebGLCubeRenderTarget
(
envSize
);
//
c
ubeCamera1
=
new
THREE
.
CubeCamera
(
1
,
1000
,
cubeRenderTarget1
)
;
c
onst
envSize
=
256
;
cubeRenderTarget1
=
new
THREE
.
WebGLCubeRenderTarget
(
envSize
);
cubeRenderTarget2
=
new
THREE
.
WebGLCubeRenderTarget
(
envSize
);
cubeCamera1
=
new
THREE
.
CubeCamera
(
1
,
1000
,
cubeRenderTarget1
);
cubeCamera2
=
new
THREE
.
CubeCamera
(
1
,
1000
,
cubeRenderTarget2
);
//
material
=
new
THREE
.
MeshStandardMaterial
(
{
envMap
:
cubeRenderTarget2
.
texture
,
roughness
:
0.
1
,
metalness
:
1
roughness
:
0.
05
,
metalness
:
0
}
);
sphere
=
new
THREE
.
Mesh
(
new
THREE
.
IcosahedronGeometry
(
20
,
8
),
material
);
const
gui
=
new
GUI
();
gui
.
add
(
material
,
'
roughness
'
,
0
,
1
);
gui
.
add
(
material
,
'
metalness
'
,
0
,
1
);
gui
.
add
(
renderer
,
'
toneMappingExposure
'
,
0
,
2
).
name
(
'
exposure
'
);
sphere
=
new
THREE
.
Mesh
(
new
THREE
.
IcosahedronGeometry
(
15
,
8
),
material
);
scene
.
add
(
sphere
);
cube
=
new
THREE
.
Mesh
(
new
THREE
.
BoxGeometry
(
20
,
20
,
20
),
material
);
cube
=
new
THREE
.
Mesh
(
new
THREE
.
BoxGeometry
(
15
,
15
,
15
),
material
);
scene
.
add
(
cube
);
torus
=
new
THREE
.
Mesh
(
new
THREE
.
TorusKnotGeometry
(
10
,
5
,
128
,
16
),
material
);
torus
=
new
THREE
.
Mesh
(
new
THREE
.
TorusKnotGeometry
(
10
,
3
,
128
,
16
),
material
);
scene
.
add
(
torus
);
//
document
.
addEventListener
(
'
pointerdown
'
,
onPointerDown
);
document
.
addEventListener
(
'
wheel
'
,
onDocumentMouseWheel
);
window
.
addEventListener
(
'
resize
'
,
onWindowResized
);
controls
=
new
OrbitControls
(
camera
,
renderer
.
domElement
);
controls
.
autoRotate
=
true
;
}
...
...
@@ -118,57 +123,12 @@
}
function
onPointerDown
(
event
)
{
event
.
preventDefault
();
onPointerDownPointerX
=
event
.
clientX
;
onPointerDownPointerY
=
event
.
clientY
;
onPointerDownLon
=
lon
;
onPointerDownLat
=
lat
;
document
.
addEventListener
(
'
pointermove
'
,
onPointerMove
);
document
.
addEventListener
(
'
pointerup
'
,
onPointerUp
);
}
function
onPointerMove
(
event
)
{
lon
=
(
event
.
clientX
-
onPointerDownPointerX
)
*
0.1
+
onPointerDownLon
;
lat
=
(
event
.
clientY
-
onPointerDownPointerY
)
*
0.1
+
onPointerDownLat
;
}
function
onPointerUp
()
{
document
.
removeEventListener
(
'
pointermove
'
,
onPointerMove
);
document
.
removeEventListener
(
'
pointerup
'
,
onPointerUp
);
}
function
onDocumentMouseWheel
(
event
)
{
const
fov
=
camera
.
fov
+
event
.
deltaY
*
0.05
;
camera
.
fov
=
THREE
.
MathUtils
.
clamp
(
fov
,
10
,
75
);
camera
.
updateProjectionMatrix
();
}
function
animate
()
{
requestAnimationFrame
(
animate
);
const
time
=
Date
.
now
();
lon
+=
.
15
;
lat
=
Math
.
max
(
-
85
,
Math
.
min
(
85
,
lat
)
);
phi
=
THREE
.
MathUtils
.
degToRad
(
90
-
lat
);
theta
=
THREE
.
MathUtils
.
degToRad
(
lon
);
cube
.
position
.
x
=
Math
.
cos
(
time
*
0.001
)
*
30
;
cube
.
position
.
y
=
Math
.
sin
(
time
*
0.001
)
*
30
;
cube
.
position
.
z
=
Math
.
sin
(
time
*
0.001
)
*
30
;
...
...
@@ -183,12 +143,6 @@
torus
.
rotation
.
x
+=
0.02
;
torus
.
rotation
.
y
+=
0.03
;
camera
.
position
.
x
=
100
*
Math
.
sin
(
phi
)
*
Math
.
cos
(
theta
);
camera
.
position
.
y
=
100
*
Math
.
cos
(
phi
);
camera
.
position
.
z
=
100
*
Math
.
sin
(
phi
)
*
Math
.
sin
(
theta
);
camera
.
lookAt
(
scene
.
position
);
// pingpong
if
(
count
%
2
===
0
)
{
...
...
@@ -205,16 +159,12 @@
count
++
;
render
();
stats
.
update
();
}
function
render
()
{
controls
.
update
();
renderer
.
render
(
scene
,
camera
);
stats
.
update
();
}
</script>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录