three.js中实现在场景中增加草地，以及相机的向前、向后、向左、向右移动以及左右镜头旋转的功能

功能展示.gif

1、首先来实现在场景中平铺一块草地

PlaneGeometry()方法是一个面板网格的函数，其中有四个参数，分别为网格的长、宽、以及长、宽的划分等分数。

        meshFloor = new THREE.Mesh(
            new THREE.PlaneGeometry(200, 200, 10, 10), //四个参数，分别为草地的长、宽、以及长度和宽度的网格划分的次数,比如长宽各划分10等分。
            new THREE.MeshBasicMaterial({
                color: 0x2E7D32
            })
        )

2、定义了草地后，默认是y轴平铺，调整下草地的角度以及箱子的高度

        // 将草地平铺，以及箱子位置加高
        meshFloor.rotation.x -= Math.PI / 2;
        mesh.position.y += 10;

3、把创建好的网格添加到场景中

        scene.add(mesh);
        scene.add(meshFloor);

4、addEventListener()加入监听事件

window.addEventListener("keydown", keyDown);

用于向指定元素添加事件句柄。并且添加的事件句柄不会覆盖已存在的事件句柄。也就是说你可以向一个元素添加多个事件，包括同类型的事件，如：两个 “click” 事件。
第一个参数是事件的类型 (如 “click” 或 “mousedown”).第二个参数是事件触发后调用的函数。第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

        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、向前、向后、向左、向右进行平移：

 // 向前平移
            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、向左向右的镜头旋转

向左向右的镜头旋转相对容易实现，相机的镜头是有一个position的位置定位的，也就类似于一个人的一双眼睛的位置坐标，旋转的话只需要相对于Y轴进行旋转一定的角度即可。

image.png

            // 向左旋转
            if(keyboard[37]){
                camera.rotation.y += player.rotateSpeed;
            }
            // 向右旋转
            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; //定义场景、相机、渲染器、网格体箱子、草地
        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
        }

        // 创建好网格,wireframe:不再以实体的形式显示,只显示线框
        mesh = new THREE.Mesh(
            new THREE.BoxGeometry(10, 10, 10),
            new THREE.MeshBasicMaterial({
                color: 0xBCAAA4,
                wireframe: true,
                transparent: true
            })
        )

        // 新建一个草地
        meshFloor = new THREE.Mesh(
            new THREE.PlaneGeometry(200, 200, 10, 10), //四个参数，分别为草地的长、宽、以及长度和宽度的网格划分的次数,比如长宽各划分10等分。
            new THREE.MeshBasicMaterial({
                color: 0x2E7D32
            })
        )

        // 将草地平铺，以及箱子位置加高
        meshFloor.rotation.x -= Math.PI / 2;
        mesh.position.y += 10;

        // 把创建好的网格添加到场景中
        scene.add(mesh);
        scene.add(meshFloor);

        camera.position.set(50, player.height, 50);
        camera.lookAt(new THREE.Vector3(0, player.height, 0))

        // 创建渲染器
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(1280, 720);


        document.body.appendChild(renderer.domElement);

        animate();
        // 添加一个旋转动画
        function animate() {
            requestAnimationFrame(animate); //每一帧回调执行这个函数
            // 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;
            }
            // 向左旋转
            if(keyboard[37]){
                camera.rotation.y += player.rotateSpeed;
            }
            // 向右旋转
            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>