Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
fktz008
three.js
提交
dd7bd0f2
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,发现更多精彩内容 >>
提交
dd7bd0f2
编写于
2月 17, 2022
作者:
M
Mr.doob
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Examples: Improved games_fps.
上级
98f4e4c6
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
40 addition
and
23 deletion
+40
-23
examples/games_fps.html
examples/games_fps.html
+40
-23
examples/screenshots/games_fps.jpg
examples/screenshots/games_fps.jpg
+0
-0
未找到文件。
examples/games_fps.html
浏览文件 @
dd7bd0f2
...
...
@@ -7,7 +7,11 @@
<link
type=
"text/css"
rel=
"stylesheet"
href=
"main.css"
>
</head>
<body>
<div
id=
"info"
>
Octree threejs demo - basic collisions with static triangle mesh
<br
/>
WASD to move, space to jump, use mouse to throw balls and move the camera.
</div>
<div
id=
"info"
>
Octree threejs demo - basic collisions with static triangle mesh
<br
/>
MOUSE to look around and to throw balls
<br/>
WASD to move and SPACE to jump
</div>
<div
id=
"container"
></div>
<!-- Import maps polyfill -->
...
...
@@ -31,29 +35,26 @@
import
{
GLTFLoader
}
from
'
./jsm/loaders/GLTFLoader.js
'
;
import
{
Octree
}
from
'
./jsm/math/Octree.js
'
;
import
{
OctreeHelper
}
from
'
./jsm/helpers/OctreeHelper.js
'
;
import
{
Capsule
}
from
'
./jsm/math/Capsule.js
'
;
import
{
GUI
}
from
'
./jsm/libs/lil-gui.module.min.js
'
;
const
clock
=
new
THREE
.
Clock
();
const
scene
=
new
THREE
.
Scene
();
scene
.
background
=
new
THREE
.
Color
(
0x88ccff
);
scene
.
background
=
new
THREE
.
Color
(
0x88ccee
);
scene
.
fog
=
new
THREE
.
Fog
(
0x88ccee
,
0
,
50
);
const
camera
=
new
THREE
.
PerspectiveCamera
(
7
5
,
window
.
innerWidth
/
window
.
innerHeight
,
0.1
,
1000
);
const
camera
=
new
THREE
.
PerspectiveCamera
(
7
0
,
window
.
innerWidth
/
window
.
innerHeight
,
0.1
,
1000
);
camera
.
rotation
.
order
=
'
YXZ
'
;
const
ambientlight
=
new
THREE
.
AmbientLight
(
0x6688cc
);
scene
.
add
(
ambientlight
);
const
fillLight1
=
new
THREE
.
DirectionalLight
(
0xff9999
,
0.5
);
fillLight1
.
position
.
set
(
-
1
,
1
,
2
);
const
fillLight1
=
new
THREE
.
HemisphereLight
(
0x4488bb
,
0x002244
,
0.5
);
fillLight1
.
position
.
set
(
2
,
1
,
1
);
scene
.
add
(
fillLight1
);
const
fillLight2
=
new
THREE
.
DirectionalLight
(
0x8888ff
,
0.2
);
fillLight2
.
position
.
set
(
0
,
-
1
,
0
);
scene
.
add
(
fillLight2
);
const
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffaa
,
1.2
);
const
directionalLight
=
new
THREE
.
DirectionalLight
(
0xffffff
,
0.8
);
directionalLight
.
position
.
set
(
-
5
,
25
,
-
1
);
directionalLight
.
castShadow
=
true
;
directionalLight
.
shadow
.
camera
.
near
=
0.01
;
...
...
@@ -68,20 +69,20 @@
directionalLight
.
shadow
.
bias
=
-
0.00006
;
scene
.
add
(
directionalLight
);
const
container
=
document
.
getElementById
(
'
container
'
);
const
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
);
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
renderer
.
shadowMap
.
enabled
=
true
;
renderer
.
shadowMap
.
type
=
THREE
.
VSMShadowMap
;
const
container
=
document
.
getElementById
(
'
container
'
);
renderer
.
outputEncoding
=
THREE
.
sRGBEncoding
;
renderer
.
toneMapping
=
THREE
.
ACESFilmicToneMapping
;
container
.
appendChild
(
renderer
.
domElement
);
const
stats
=
new
Stats
();
stats
.
domElement
.
style
.
position
=
'
absolute
'
;
stats
.
domElement
.
style
.
top
=
'
0px
'
;
container
.
appendChild
(
stats
.
domElement
);
const
GRAVITY
=
30
;
...
...
@@ -91,8 +92,8 @@
const
STEPS_PER_FRAME
=
5
;
const
sphereGeometry
=
new
THREE
.
SphereGeometry
(
SPHERE_RADIUS
,
32
,
32
);
const
sphereMaterial
=
new
THREE
.
Mesh
StandardMaterial
(
{
color
:
0x888855
,
roughness
:
0.8
,
metalness
:
0.5
}
);
const
sphereGeometry
=
new
THREE
.
IcosahedronGeometry
(
SPHERE_RADIUS
,
5
);
const
sphereMaterial
=
new
THREE
.
Mesh
LambertMaterial
(
{
color
:
0xbbbb44
}
);
const
spheres
=
[];
let
sphereIdx
=
0
;
...
...
@@ -105,7 +106,11 @@
scene
.
add
(
sphere
);
spheres
.
push
(
{
mesh
:
sphere
,
collider
:
new
THREE
.
Sphere
(
new
THREE
.
Vector3
(
0
,
-
100
,
0
),
SPHERE_RADIUS
),
velocity
:
new
THREE
.
Vector3
()
}
);
spheres
.
push
(
{
mesh
:
sphere
,
collider
:
new
THREE
.
Sphere
(
new
THREE
.
Vector3
(
0
,
-
100
,
0
),
SPHERE_RADIUS
),
velocity
:
new
THREE
.
Vector3
()
}
);
}
...
...
@@ -137,7 +142,7 @@
}
);
document
.
addEventListener
(
'
mousedown
'
,
()
=>
{
container
.
addEventListener
(
'
mousedown
'
,
()
=>
{
document
.
body
.
requestPointerLock
();
...
...
@@ -147,7 +152,7 @@
document
.
addEventListener
(
'
mouseup
'
,
()
=>
{
throwBall
();
if
(
document
.
pointerLockElement
!==
null
)
throwBall
();
}
);
...
...
@@ -422,7 +427,7 @@
if
(
child
.
material
.
map
)
{
child
.
material
.
map
.
anisotropy
=
8
;
child
.
material
.
map
.
anisotropy
=
4
;
}
...
...
@@ -430,6 +435,18 @@
}
);
const
helper
=
new
OctreeHelper
(
worldOctree
);
helper
.
visible
=
false
;
scene
.
add
(
helper
);
const
gui
=
new
GUI
(
{
width
:
200
}
);
gui
.
add
(
{
debug
:
false
},
'
debug
'
)
.
onChange
(
function
(
value
)
{
helper
.
visible
=
value
;
}
);
animate
();
}
);
...
...
examples/screenshots/games_fps.jpg
查看替换文件 @
98f4e4c6
浏览文件 @
dd7bd0f2
37.2 KB
|
W:
|
H:
35.0 KB
|
W:
|
H:
2-up
Swipe
Onion skin
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录