Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
faf684a0
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,发现更多精彩内容 >>
提交
faf684a0
编写于
9月 27, 2012
作者:
S
sole
浏览文件
操作
浏览文件
下载
差异文件
Merge remote-tracking branch 'upstream/dev' into dev
上级
b6a41d73
8278b89c
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
469 addition
and
0 deletion
+469
-0
examples/js/controls/PointerLockControls.js
examples/js/controls/PointerLockControls.js
+155
-0
examples/misc_controls_pointerlock.html
examples/misc_controls_pointerlock.html
+314
-0
未找到文件。
examples/js/controls/PointerLockControls.js
0 → 100644
浏览文件 @
faf684a0
var
PointerLockControls
=
function
(
camera
)
{
var
scope
=
this
;
var
pitchObject
=
new
THREE
.
Object3D
();
pitchObject
.
add
(
camera
);
var
yawObject
=
new
THREE
.
Object3D
();
yawObject
.
position
.
y
=
10
;
yawObject
.
add
(
pitchObject
);
var
moveForward
=
false
;
var
moveBackward
=
false
;
var
moveLeft
=
false
;
var
moveRight
=
false
;
var
isOnObject
=
false
;
var
canJump
=
false
;
var
velocity
=
new
THREE
.
Vector3
();
var
PI_2
=
Math
.
PI
/
2
;
var
onMouseMove
=
function
(
event
)
{
if
(
scope
.
enabled
===
false
)
return
;
var
movementX
=
event
.
movementX
||
event
.
mozMovementX
||
event
.
webkitMovementX
||
0
;
var
movementY
=
event
.
movementY
||
event
.
mozMovementY
||
event
.
webkitMovementY
||
0
;
yawObject
.
rotation
.
y
-=
movementX
*
0.002
;
pitchObject
.
rotation
.
x
-=
movementY
*
0.002
;
pitchObject
.
rotation
.
x
=
Math
.
max
(
-
PI_2
,
Math
.
min
(
PI_2
,
pitchObject
.
rotation
.
x
)
);
};
var
onKeyDown
=
function
(
event
)
{
switch
(
event
.
keyCode
)
{
case
38
:
// up
case
87
:
// w
moveForward
=
true
;
break
;
case
37
:
// left
case
65
:
// a
moveLeft
=
true
;
break
;
case
40
:
// down
case
83
:
// s
moveBackward
=
true
;
break
;
case
39
:
// right
case
68
:
// d
moveRight
=
true
;
break
;
case
32
:
// space
if
(
canJump
===
true
)
velocity
.
y
+=
10
;
canJump
=
false
;
break
;
}
};
var
onKeyUp
=
function
(
event
)
{
switch
(
event
.
keyCode
)
{
case
38
:
// up
case
87
:
// w
moveForward
=
false
;
break
;
case
37
:
// left
case
65
:
// a
moveLeft
=
false
;
break
;
case
40
:
// down
case
83
:
// a
moveBackward
=
false
;
break
;
case
39
:
// right
case
68
:
// d
moveRight
=
false
;
break
;
}
};
document
.
addEventListener
(
'
mousemove
'
,
onMouseMove
,
false
);
document
.
addEventListener
(
'
keydown
'
,
onKeyDown
,
false
);
document
.
addEventListener
(
'
keyup
'
,
onKeyUp
,
false
);
this
.
enabled
=
false
;
this
.
getObject
=
function
()
{
return
yawObject
;
};
this
.
isOnObject
=
function
(
boolean
)
{
isOnObject
=
boolean
;
canJump
=
boolean
;
};
this
.
update
=
function
(
delta
)
{
if
(
scope
.
enabled
===
false
)
return
;
delta
*=
0.1
;
velocity
.
x
+=
(
-
velocity
.
x
)
*
0.08
*
delta
;
velocity
.
z
+=
(
-
velocity
.
z
)
*
0.08
*
delta
;
velocity
.
y
-=
0.25
*
delta
;
if
(
moveForward
)
velocity
.
z
-=
0.12
*
delta
;
if
(
moveBackward
)
velocity
.
z
+=
0.12
*
delta
;
if
(
moveLeft
)
velocity
.
x
-=
0.12
*
delta
;
if
(
moveRight
)
velocity
.
x
+=
0.12
*
delta
;
if
(
isOnObject
===
true
)
{
velocity
.
y
=
Math
.
max
(
0
,
velocity
.
y
);
}
yawObject
.
translateX
(
velocity
.
x
);
yawObject
.
translateY
(
velocity
.
y
);
yawObject
.
translateZ
(
velocity
.
z
);
if
(
yawObject
.
position
.
y
<
10
)
{
velocity
.
y
=
0
;
yawObject
.
position
.
y
=
10
;
canJump
=
true
;
}
};
};
examples/misc_controls_pointerlock.html
0 → 100644
浏览文件 @
faf684a0
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<title>
three.js - pointer lock
</title>
<style>
html
,
body
{
width
:
100%
;
height
:
100%
;
}
body
{
background-color
:
#ffffff
;
margin
:
0
;
overflow
:
hidden
;
font-family
:
arial
;
}
#blocker
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
background-color
:
rgba
(
0
,
0
,
0
,
0.5
);
}
#instructions
{
width
:
100%
;
height
:
100%
;
display
:
-webkit-box
;
display
:
-moz-box
;
display
:
box
;
-webkit-box-orient
:
horizontal
;
-moz-box-orient
:
horizontal
;
box-orient
:
horizontal
;
-webkit-box-pack
:
center
;
-moz-box-pack
:
center
;
box-pack
:
center
;
-webkit-box-align
:
center
;
-moz-box-align
:
center
;
box-align
:
center
;
color
:
#ffffff
;
text-align
:
center
;
cursor
:
pointer
;
}
</style>
</head>
<body>
<script
src=
"../build/three.min.js"
></script>
<script
src=
"js/controls/PointerLockControls.js"
></script>
<div
id=
"blocker"
>
<div
id=
"instructions"
>
<span
style=
"font-size:40px"
>
Click to play
</span>
<br
/>
(W, A, S, D = Move, SPACE = Jump, MOUSE = Look around)
</div>
</div>
<script>
var
camera
,
scene
,
renderer
;
var
geometry
,
material
,
mesh
;
var
controls
,
time
=
Date
.
now
();
var
objects
=
[];
var
ray
;
var
blocker
=
document
.
getElementById
(
'
blocker
'
);
var
instructions
=
document
.
getElementById
(
'
instructions
'
);
// http://www.html5rocks.com/en/tutorials/pointerlock/intro/
var
havePointerLock
=
'
pointerLockElement
'
in
document
||
'
mozPointerLockElement
'
in
document
||
'
webkitPointerLockElement
'
in
document
;
if
(
havePointerLock
)
{
var
element
=
document
.
body
;
var
pointerlockchange
=
function
(
event
)
{
if
(
document
.
pointerLockElement
===
element
||
document
.
mozPointerLockElement
===
element
||
document
.
webkitPointerLockElement
===
element
)
{
controls
.
enabled
=
true
;
blocker
.
style
.
display
=
'
none
'
;
}
else
{
controls
.
enabled
=
false
;
blocker
.
style
.
display
=
'
-webkit-box
'
;
blocker
.
style
.
display
=
'
-moz-box
'
;
blocker
.
style
.
display
=
'
box
'
;
instructions
.
style
.
display
=
''
;
}
}
var
pointerlockerror
=
function
(
event
)
{
instructions
.
style
.
display
=
''
;
}
// Hook pointer lock state change events
document
.
addEventListener
(
'
pointerlockchange
'
,
pointerlockchange
,
false
);
document
.
addEventListener
(
'
mozpointerlockchange
'
,
pointerlockchange
,
false
);
document
.
addEventListener
(
'
webkitpointerlockchange
'
,
pointerlockchange
,
false
);
document
.
addEventListener
(
'
pointerlockerror
'
,
pointerlockerror
,
false
);
document
.
addEventListener
(
'
mozpointerlockerror
'
,
pointerlockerror
,
false
);
document
.
addEventListener
(
'
webkitpointerlockerror
'
,
pointerlockerror
,
false
);
instructions
.
addEventListener
(
'
click
'
,
function
(
event
)
{
instructions
.
style
.
display
=
'
none
'
;
// Ask the browser to lock the pointer
element
.
requestPointerLock
=
element
.
requestPointerLock
||
element
.
mozRequestPointerLock
||
element
.
webkitRequestPointerLock
;
if
(
/Firefox/i
.
test
(
navigator
.
userAgent
)
)
{
var
fullscreenchange
=
function
(
event
)
{
if
(
document
.
fullscreenElement
===
element
||
document
.
mozFullscreenElement
===
element
||
document
.
mozFullScreenElement
===
element
)
{
document
.
removeEventListener
(
'
fullscreenchange
'
,
fullscreenchange
);
document
.
removeEventListener
(
'
mozfullscreenchange
'
,
fullscreenchange
);
element
.
requestPointerLock
();
}
}
document
.
addEventListener
(
'
fullscreenchange
'
,
fullscreenchange
,
false
);
document
.
addEventListener
(
'
mozfullscreenchange
'
,
fullscreenchange
,
false
);
element
.
requestFullscreen
=
element
.
requestFullscreen
||
element
.
mozRequestFullscreen
||
element
.
mozRequestFullScreen
||
element
.
webkitRequestFullscreen
;
element
.
requestFullscreen
();
}
else
{
element
.
requestPointerLock
();
}
},
false
);
}
else
{
instructions
.
innerHTML
=
'
Your browser doesn
\'
t seem to support Pointer Lock API
'
;
}
init
();
animate
();
function
init
()
{
camera
=
new
THREE
.
PerspectiveCamera
(
75
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
scene
=
new
THREE
.
Scene
();
scene
.
fog
=
new
THREE
.
Fog
(
0xffffff
,
0
,
750
);
var
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1.5
);
light
.
position
.
set
(
1
,
1
,
1
);
scene
.
add
(
light
);
var
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
0.75
);
light
.
position
.
set
(
-
1
,
-
0.5
,
-
1
);
scene
.
add
(
light
);
controls
=
new
PointerLockControls
(
camera
);
scene
.
add
(
controls
.
getObject
()
);
ray
=
new
THREE
.
Ray
();
ray
.
direction
.
set
(
0
,
-
1
,
0
);
// floor
geometry
=
new
THREE
.
PlaneGeometry
(
2000
,
2000
,
100
,
100
);
geometry
.
applyMatrix
(
new
THREE
.
Matrix4
().
makeRotationX
(
-
Math
.
PI
/
2
)
);
for
(
var
i
=
0
,
l
=
geometry
.
vertices
.
length
;
i
<
l
;
i
++
)
{
var
vertex
=
geometry
.
vertices
[
i
];
vertex
.
x
+=
Math
.
random
()
*
20
-
10
;
vertex
.
y
+=
Math
.
random
()
*
2
;
vertex
.
z
+=
Math
.
random
()
*
20
-
10
;
}
for
(
var
i
=
0
,
l
=
geometry
.
faces
.
length
;
i
<
l
;
i
++
)
{
var
face
=
geometry
.
faces
[
i
];
face
.
vertexColors
[
0
]
=
new
THREE
.
Color
().
setHSV
(
Math
.
random
()
*
0.2
+
0.5
,
Math
.
random
()
*
0.5
,
1
);
face
.
vertexColors
[
1
]
=
new
THREE
.
Color
().
setHSV
(
Math
.
random
()
*
0.2
+
0.5
,
Math
.
random
()
*
0.5
,
1
);
face
.
vertexColors
[
2
]
=
new
THREE
.
Color
().
setHSV
(
Math
.
random
()
*
0.2
+
0.5
,
Math
.
random
()
*
0.5
,
1
);
face
.
vertexColors
[
3
]
=
new
THREE
.
Color
().
setHSV
(
Math
.
random
()
*
0.2
+
0.5
,
Math
.
random
()
*
0.5
,
1
);
}
material
=
new
THREE
.
MeshBasicMaterial
(
{
vertexColors
:
THREE
.
VertexColors
}
);
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
scene
.
add
(
mesh
);
// objects
geometry
=
new
THREE
.
CubeGeometry
(
20
,
20
,
20
);
for
(
var
i
=
0
,
l
=
geometry
.
faces
.
length
;
i
<
l
;
i
++
)
{
var
face
=
geometry
.
faces
[
i
];
face
.
vertexColors
[
0
]
=
new
THREE
.
Color
().
setHSV
(
Math
.
random
()
*
0.2
+
0.5
,
Math
.
random
()
*
0.5
,
1
);
face
.
vertexColors
[
1
]
=
new
THREE
.
Color
().
setHSV
(
Math
.
random
()
*
0.2
+
0.5
,
Math
.
random
()
*
0.5
,
1
);
face
.
vertexColors
[
2
]
=
new
THREE
.
Color
().
setHSV
(
Math
.
random
()
*
0.2
+
0.5
,
Math
.
random
()
*
0.5
,
1
);
face
.
vertexColors
[
3
]
=
new
THREE
.
Color
().
setHSV
(
Math
.
random
()
*
0.2
+
0.5
,
Math
.
random
()
*
0.5
,
1
);
}
for
(
var
i
=
0
;
i
<
500
;
i
++
)
{
material
=
new
THREE
.
MeshPhongMaterial
(
{
specular
:
0xffffff
,
shading
:
THREE
.
FlatShading
,
vertexColors
:
THREE
.
VertexColors
}
);
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
mesh
.
position
.
x
=
Math
.
floor
(
Math
.
random
()
*
20
-
10
)
*
20
;
mesh
.
position
.
y
=
Math
.
floor
(
Math
.
random
()
*
20
)
*
20
+
10
;
mesh
.
position
.
z
=
Math
.
floor
(
Math
.
random
()
*
20
-
10
)
*
20
;
scene
.
add
(
mesh
);
material
.
color
.
setHSV
(
Math
.
random
()
*
0.2
+
0.5
,
Math
.
random
()
*
0.5
,
1
);
objects
.
push
(
mesh
);
}
//
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
document
.
body
.
appendChild
(
renderer
.
domElement
);
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
onWindowResize
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
function
animate
()
{
requestAnimationFrame
(
animate
);
//
controls
.
isOnObject
(
false
);
ray
.
origin
.
copy
(
controls
.
getObject
().
position
);
ray
.
origin
.
y
-=
10
;
var
intersections
=
ray
.
intersectObjects
(
objects
);
if
(
intersections
.
length
>
0
)
{
var
distance
=
intersections
[
0
].
distance
;
if
(
distance
>
0
&&
distance
<
10
)
{
controls
.
isOnObject
(
true
);
}
}
controls
.
update
(
Date
.
now
()
-
time
);
renderer
.
render
(
scene
,
camera
);
time
=
Date
.
now
();
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录