卜若的代码笔记-webgl系列-第六章：通过按键让你绘制的立方体移动

本文链接：https://blog.csdn.net/qq_37080133/article/details/100691282

1 上下文代码

<!DOCTYPE html>
<html>
<head>
    <title>webgl</title>
    <script src="../ThreeJSLib/three.js"></script>
    <script src="stats.js"></script>
    <script src="WebglManager.js"></script>
    <script src="BasicElementCreater.js"></script>
    <script src="PlayerMove.js"></script>
    
</head>
<body>

<div id="Stats-output"></div>

<div id="ca" style="width: 800px;height: 800px;
margin-top: 100px;
background: #aa5500">

</div>
<script>
    var stats = new Stats();
    //设置统计模式
    stats.setMode(0); // 0: fps, 1: ms
    //统计信息显示在左上角
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0px';
    stats.domElement.style.top = '0px';
    //将统计对象添加到对应的<div>元素中
    document.getElementById("Stats-output").appendChild(stats.domElement);
    animate();

    function animate() {

        stats.begin();

        stats.end();

        requestAnimationFrame(animate);

    }


</script>
<script>

    context(document.getElementById("ca"));


</script>
</body>
</html>

2 WebglManager.js



var op;
var opView;
function setViewport(z) {
    opView.camera.position.z = z;

}
function setSize(width,height) {

}
function addObject(object) {
    opView.scene.add(object);
}
function removeObject(object) {
    opView.scene.remove(object);

}

function create(div) {

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45,1, 0.1, 500);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(800, 800);
    renderer.setClearColor(Color(255,239 ,213).ox, 1.0);
    div.appendChild(renderer.domElement);

    var View  = {};
    View.scene = scene;
    View.camera = camera;
    View. renderer = renderer;
    opView= View;
    return View;
}

function Color(r,g,b) {

    var color = {};
    color.r = r;
    color.g = g;
    color.b = b;

    color.ox = (color.r << 16) | (color.g << 8) | color.b;

    return color;
}
function Vector3(x,y,z) {

    var vector3 = {};
    vector3.x = x;
    vector3.y = y;
    vector3.z = z;

    return vector3;
}

function frame() {

    if (op!= null){

        op();
    }

    opView.renderer.render(opView.scene,opView.camera);
    requestAnimationFrame(frame);
}

3 BasicElementCreater.js


function Cube(color,size) {
    var geometry = new THREE.CubeGeometry(size.x,size.y,size.z);

    var material = new THREE.MeshBasicMaterial({color: color.ox});

    var cube = new THREE.Mesh(geometry, material);

    return cube;
}

4 PlayerMove.js


var x = 10;
function context(div) {

    create(div)
    setViewport(20);
    var co = Color(123,123,123);
    var size = Vector3(1,1,1);
    var player =  Cube(co,size);

    var po2 = Vector3(0,0,0);
    document.onkeydown=function(event){

        console.info("presskey");
        switch (event.keyCode) {
            //left
            case 37:

                po2.x =po2.x-1;
                break;
            //up
            case 38:
                po2.y =  po2.y+1;
                break;
            //right
            case 39:
                po2.x =  po2.x+1;
                break;
            //down
            case 40:
                po2.y = po2.y-1;
                break;

            default:

                break;
        }

    console.info(JSON.stringify(po2));
    };

    op = function () {
        addObject(player);
       // console.info("123");
        player.position.x = po2.x;
        player.position.y = po2.y;
        player.position.z = po2.z;
    }

    frame();


}