功能展示.gif
1、首先來(lái)實(shí)現(xiàn)在場(chǎng)景中平鋪一塊草地
PlaneGeometry()方法是一個(gè)面板網(wǎng)格的函數(shù)，其中有四個(gè)參數(shù)，分別為網(wǎng)格的長(zhǎng)、寬、以及長(zhǎng)、寬的劃分等分?jǐn)?shù)。
meshFloor = new THREE.Mesh(
new THREE.PlaneGeometry(200, 200, 10, 10), //四個(gè)參數(shù)，分別為草地的長(zhǎng)、寬、以及長(zhǎng)度和寬度的網(wǎng)格劃分的次數(shù),比如長(zhǎng)寬各劃分10等分。
new THREE.MeshBasicMaterial({
color: 0x2E7D32
})
)
2、定義了草地后，默認(rèn)是y軸平鋪，調(diào)整下草地的角度以及箱子的高度
// 將草地平鋪，以及箱子位置加高
meshFloor.rotation.x -= Math.PI / 2;
mesh.position.y += 10;
3、把創(chuàng)建好的網(wǎng)格添加到場(chǎng)景中
scene.add(mesh);
scene.add(meshFloor);
4、addEventListener()加入監(jiān)聽事件
window.addEventListener("keydown", keyDown);
- 用于向指定元素添加事件句柄。并且添加的事件句柄不會(huì)覆蓋已存在的事件句柄。也就是說你可以向一個(gè)元素添加多個(gè)事件，包括同類型的事件，如：兩個(gè) “click” 事件。
- 第一個(gè)參數(shù)是事件的類型 (如 “click” 或 “mousedown”).第二個(gè)參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)。 第三個(gè)參數(shù)是個(gè)布爾值用于描述事件是冒泡還是捕獲。該參數(shù)是可選的。
function keyDown(event) {
keyboard[event.keyCode] = true;
}
function keyUp(event) {
keyboard[event.keyCode] = false;
}
window.addEventListener('keydown', keyDown);
window.addEventListener('keyup', keyUp);
按鍵的keyCode值.png
5、向前、向后、向左、向右進(jìn)行平移：
// 向前平移
if (keyboard[87]) {
camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
camera.position.z -= Math.cos(camera.rotation.y) * player.speed;
}
// 向后平移
if (keyboard[83]) {
camera.position.x += Math.sin(camera.rotation.y) * player.speed;
camera.position.z += Math.cos(camera.rotation.y) * player.speed;
}
// 向左平移
if (keyboard[65]) {
camera.position.x -= Math.sin(camera.rotation.y + Math.PI / 2) * player.speed;
camera.position.z -= Math.cos(camera.rotation.y + Math.PI) * player.speed;
}
// 向右平移
if (keyboard[68]) {
camera.position.x += Math.sin(camera.rotation.y + Math.PI / 2) * player.speed;
camera.position.z += Math.cos(camera.rotation.y + Math.PI) * player.speed;
}
6、向左向右的鏡頭旋轉(zhuǎn)
向左向右的鏡頭旋轉(zhuǎn)相對(duì)容易實(shí)現(xiàn)，相機(jī)的鏡頭是有一個(gè)position的位置定位的，也就類似于一個(gè)人的一雙眼睛的位置坐標(biāo)，旋轉(zhuǎn)的話只需要相對(duì)于Y軸進(jìn)行旋轉(zhuǎn)一定的角度即可。
image.png
// 向左旋轉(zhuǎn)
if(keyboard[37]){
camera.rotation.y += player.rotateSpeed;
}
// 向右旋轉(zhuǎn)
if(keyboard[39]){
camera.rotation.y -= player.rotateSpeed;
}
- 完整代碼示例：
<html>
<head>
<title></title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="./js/three.js-master/build/three.js"></script>
<script>
var scene, camera, renderer, mesh, meshFloor; //定義場(chǎng)景、相機(jī)、渲染器、網(wǎng)格體箱子、草地
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, 1280 / 720, 0.1, 1000);
var keyboard = {}
var player = {
height: 15,
speed: 0.2,
rotateSpeed:Math.PI*0.02
}
// 創(chuàng)建好網(wǎng)格,wireframe:不再以實(shí)體的形式顯示,只顯示線框
mesh = new THREE.Mesh(
new THREE.BoxGeometry(10, 10, 10),
new THREE.MeshBasicMaterial({
color: 0xBCAAA4,
wireframe: true,
transparent: true
})
)
// 新建一個(gè)草地
meshFloor = new THREE.Mesh(
new THREE.PlaneGeometry(200, 200, 10, 10), //四個(gè)參數(shù)，分別為草地的長(zhǎng)、寬、以及長(zhǎng)度和寬度的網(wǎng)格劃分的次數(shù),比如長(zhǎng)寬各劃分10等分。
new THREE.MeshBasicMaterial({
color: 0x2E7D32
})
)
// 將草地平鋪，以及箱子位置加高
meshFloor.rotation.x -= Math.PI / 2;
mesh.position.y += 10;
// 把創(chuàng)建好的網(wǎng)格添加到場(chǎng)景中
scene.add(mesh);
scene.add(meshFloor);
camera.position.set(50, player.height, 50);
camera.lookAt(new THREE.Vector3(0, player.height, 0))
// 創(chuàng)建渲染器
renderer = new THREE.WebGLRenderer();
renderer.setSize(1280, 720);
document.body.appendChild(renderer.domElement);
animate();
// 添加一個(gè)旋轉(zhuǎn)動(dòng)畫
function animate() {
requestAnimationFrame(animate); //每一幀回調(diào)執(zhí)行這個(gè)函數(shù)
// mesh.position.x += 0.01;
// mesh.position.z += 0.01;
mesh.rotateY(0.01);
mesh.rotateX(0.01);
renderer.render(scene, camera);
// 向前平移
if (keyboard[87]) {
camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
camera.position.z -= Math.cos(camera.rotation.y) * player.speed;
}
// 向后平移
if (keyboard[83]) {
camera.position.x += Math.sin(camera.rotation.y) * player.speed;
camera.position.z += Math.cos(camera.rotation.y) * player.speed;
}
// 向左平移
if (keyboard[65]) {
camera.position.x -= Math.sin(camera.rotation.y + Math.PI / 2) * player.speed;
camera.position.z -= Math.cos(camera.rotation.y + Math.PI) * player.speed;
}
// 向右平移
if (keyboard[68]) {
camera.position.x += Math.sin(camera.rotation.y + Math.PI / 2) * player.speed;
camera.position.z += Math.cos(camera.rotation.y + Math.PI) * player.speed;
}
// 向左旋轉(zhuǎn)
if(keyboard[37]){
camera.rotation.y += player.rotateSpeed;
}
// 向右旋轉(zhuǎn)
if(keyboard[39]){
camera.rotation.y -= player.rotateSpeed;
}
}
function keyDown(event) {
keyboard[event.keyCode] = true;
}
function keyUp(event) {
keyboard[event.keyCode] = false;
}
window.addEventListener('keydown', keyDown);
window.addEventListener('keyup', keyUp);
</script>
</body>
</html>
