當我們使用鼠標操作three.js渲染出的對象時，不僅僅只是僅限用鼠標對場景的放大、縮小、旋轉而已，還有鼠標左鍵、右鍵的點擊以及鍵盤各種按鍵等等的事件。我們需要捕獲這些事件，並在這些事件的方法裏進行相關的操作。
接下來是乾貨
在【three.js第六課】的基礎上，對代碼進行整理後。得到本次試驗的源碼。下面的代碼是在原來的第六課的基礎上將對應的代碼寫成方法再進行調用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TestClickEvent</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script src="../examples/js/effects/AnaglyphEffect.js"></script>
<script type="text/javascript">
var scene,camera,renderer,
controls,effect,light;
init();//開始初始化
//將需要初始化的放在該方法中統一初始化
function init(){
initScene();//初始化場景
initCamera();//初始化相機
initRenender();//初始化渲染器
initLight();//初始化光線
initOthers();//初始化其他參數
setWindown();//窗體的設置
setEventsMouse();//鼠標事件的定義
setControl();//設置鼠標控制
setKeyEvents();//定義鍵盤按鍵事件
setGeometrys();//定義物體
}
//初始化場景
function initScene(){
scene = new THREE.Scene();//創建場景
}
//初始化相機
function initCamera(){
//創建一個攝像機對象
camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z=3;//設置相機的位置
}
//初始化渲染器
function initRenender(){
//創建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//其他內容初始化
function initOthers(){
document.body.appendChild(renderer.domElement);//渲染到瀏覽器
}
//定義窗口的設置
function setWindown(){
//加入事件監聽器,窗口自適應
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
});
}
//定義鼠標事件
function setEventsMouse(){
//點擊了鼠標左鍵
window.addEventListener( 'click', function(e){
if(e.button===0){
console.log("點擊了鼠標左鍵");
}
} );
//點擊了鼠標右鍵
window.addEventListener( 'contextmenu', function(e){
if(e.button===2){
console.log("點擊了鼠標右鍵");
}
} );
//鼠標移動座標2D座標
window.addEventListener( 'mousemove', function(e){
console.log('x:'+e.x);
console.log('y:'+e.y);
} );
}
//定義鍵盤按鍵事件
function setKeyEvents(){
window.addEventListener('keydown',function(e){
console.log(e);
});
}
//定義控制
function setControl(){
//軌道控制 鏡頭的移動
controls = new THREE.OrbitControls(camera,renderer.document);
//物體3D化
effect = new THREE.AnaglyphEffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);
}
//定義物體
function setGeometrys(){
//創建形狀 BoxGeometry
var geometry = new THREE.BoxGeometry(1,1,1);
var cubeMaterial = [
//右
new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
//左
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
//上
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
//下
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
//前
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
//後
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide})
];
//創建材料 wireframe是否使用線條
//var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});
var material = new THREE.MeshFaceMaterial(cubeMaterial);
//將材料和形狀結合
var cube = new THREE.Mesh(geometry,material);
//物體加入場景中
scene.add(cube);
}
//初始化光線
function initLight(){
//5. 光（Light）光源的基類。
light = new THREE.Light(0xFFFFFF,1.0);
scene.add(light);//光線加入場景中
}
//邏輯
var update=function(){
//物體隨着XY軸旋轉
//cube.rotation.x +=0.01;
//cube.rotation.y += 0.005;
}
//繪畫渲染
var render=function() {
//renderer.render(scene,camera);
effect.render(scene,camera);//渲染3D畫面
}
//循環運行update，render
var loop=function() {
requestAnimationFrame(loop);
update();
render();
}
loop();//循環開始
</script>
</body>
</html>
定義鼠標事件。
當點擊鼠標左鍵時，返回參數中的button值爲0.
當點擊鼠標右鍵時，返回參數中的的button值爲1.
當鼠標移動時，返回參數中的x、y代表了鼠標的當前座標 ，座標是2D的座標。
//定義鼠標事件
function setEventsMouse(){
//點擊了鼠標左鍵
window.addEventListener( 'click', function(e){
if(e.button===0){
console.log("點擊了鼠標左鍵");
}
} );
//點擊了鼠標右鍵
window.addEventListener( 'contextmenu', function(e){
if(e.button===2){
console.log("點擊了鼠標右鍵");
}
} );
//鼠標移動座標，2D座標
window.addEventListener( 'mousemove', function(e){
console.log('x:'+e.x);
console.log('y:'+e.y);
} );
}
定義按鍵按鈕事件時，按下按鍵返回的值中存在keyCode的參數，該參數代表對應鍵盤按鍵的按鍵碼。每個按鍵的按鍵碼都是不一樣的。通過按鍵的按鍵碼可以判斷用戶按下了哪個按鍵。
//定義鍵盤按鍵事件
function setKeyEvents(){
window.addEventListener('keydown',function(e){
console.log(e);
});
}
以下是鍵盤上按鍵對應的按鍵碼對應表：
|
ASCII值 |
控制字符 |
ASCII值 |
控制字符 |
ASCII值 |
控制字符 |
ASCII值 |
控制字符 |
|
0 |
NUT |
32 |
(space) |
64 |
@ |
96 |
、 |
|
1 |
SOH |
33 |
！ |
65 |
A |
97 |
a |
|
2 |
STX |
34 |
” |
66 |
B |
98 |
b |
|
3 |
ETX |
35 |
# |
67 |
C |
99 |
c |
|
4 |
EOT |
36 |
$ |
68 |
D |
100 |
d |
|
5 |
ENQ |
37 |
% |
69 |
E |
101 |
e |
|
6 |
ACK |
38 |
& |
70 |
F |
102 |
f |
|
7 |
BEL |
39 |
, |
71 |
G |
103 |
g |
|
8 |
BS |
40 |
( |
72 |
H |
104 |
h |
|
9 |
HT |
41 |
) |
73 |
I |
105 |
i |
|
10 |
LF |
42 |
* |
74 |
J |
106 |
j |
|
11 |
VT |
43 |
+ |
75 |
K |
107 |
k |
|
12 |
FF |
44 |
, |
76 |
L |
108 |
l |
|
13 |
CR |
45 |
- |
77 |
M |
109 |
m |
|
14 |
SO |
46 |
. |
78 |
N |
110 |
n |
|
15 |
SI |
47 |
/ |
79 |
O |
111 |
o |
|
16 |
DLE |
48 |
0 |
80 |
P |
112 |
p |
|
17 |
DCI |
49 |
1 |
81 |
Q |
113 |
q |
|
18 |
DC2 |
50 |
2 |
82 |
R |
114 |
r |
|
19 |
DC3 |
51 |
3 |
83 |
X |
115 |
s |
|
20 |
DC4 |
52 |
4 |
84 |
T |
116 |
t |
|
21 |
NAK |
53 |
5 |
85 |
U |
117 |
u |
|
22 |
SYN |
54 |
6 |
86 |
V |
118 |
v |
|
23 |
TB |
55 |
7 |
87 |
W |
119 |
w |
|
24 |
CAN |
56 |
8 |
88 |
X |
120 |
x |
|
25 |
EM |
57 |
9 |
89 |
Y |
121 |
y |
|
26 |
SUB |
58 |
: |
90 |
Z |
122 |
z |
|
27 |
ESC |
59 |
; |
91 |
[ |
123 |
{ |
|
28 |
FS |
60 |
< |
92 |
\ |
124 |
| |
|
29 |
GS |
61 |
= |
93 |
] |
125 |
} |
|
30 |
RS |
62 |
> |
94 |
^ |
126 |
~ |
|
31 |
US |
63 |
? |
95 |
__ |
127 |
DEL |
