碰撞检测问题 Three.js

Question

我正在尝试使用 three.js 制作 3D Breakout 游戏。我对墙壁进行了大部分碰撞检测，但我似乎无法检测到与桨的碰撞。

这是我的代码：

    //three.Breakout, a 3D breakout game by Samuel Steele, Cryptocosm
    Play();
    function Play() {
    //Declare our scene and camera, easy start up stuff like golabal vars
    var width = window.innerWidth;
    var height = window.innerHeight;
    var velocityX = -1, velocityZ = -2;
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, width / height, .1, 1000 );

    //initiate the WebGL Context
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);

    //create a light
    var light = new THREE.PointLight( 0xecf0f1, 1.3, 600 );
    light.position.set( 0, 0, 32 );
    //add the light to the scene
    scene.add(light);

    //make the paddle
    var paddleGeometry = new THREE.CubeGeometry(30, 8, 3);
    var paddleMaterial = new THREE.MeshLambertMaterial({
        color: 0xF7F7F7, 
        shading: THREE.FlatShading
    });

    var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);

    var lBarGeometry = new THREE.CubeGeometry(10, 10, 100);
    var lBarMaterial = new THREE.MeshLambertMaterial({
        color: 0xbdc3c7,
        shading: THREE.FlatShading
    });
    var leftBar = new THREE.Mesh(lBarGeometry, lBarMaterial);

    var rBarGeometry = new THREE.CubeGeometry(10, 10, 100);
    var rBarMaterial = new THREE.MeshLambertMaterial({
        color: 0xbdc3c7,
        shading: THREE.FlatShading
    });
    var rightBar = new THREE.Mesh(rBarGeometry, rBarMaterial);

    var backGeometry = new THREE.CubeGeometry(130, 10, 10);
    var backMaterial = new THREE.MeshLambertMaterial({
        color: 0xbdc3c7,
        shading: THREE.FlatShading
    });
    var back = new THREE.Mesh(backGeometry, backMaterial);


    var ballGeometry = new THREE.CubeGeometry(7, 7, 7);
    var ballMaterial = new THREE.MeshLambertMaterial({
        color: 0xbdc3c7,
        shading: THREE.FlatShading,
        wireframe: false
    });
    var ball = new THREE.Mesh(ballGeometry, ballMaterial);

    //add our objects to the scene
    scene.add(paddle);
    scene.add(leftBar);
    scene.add(rightBar);
    scene.add(back);
    scene.add(ball);

    //position errythang
        //the camera
    camera.position.z = 50;
        //the paddle
    paddle.position.y = -27; 
    paddle.position.z = 5;
        //the left sideBar
    leftBar.position.x = -60;
    leftBar.position.y = -27;
    leftBar.position.z = -40;
        //the right sideBar
    rightBar.position.x = 60;
    rightBar.position.y = -27;
    rightBar.position.z = -40;
        //the back bar
    back.position.z = -90;
    back.position.y = -27;
        //the ball
    ball.position.y = -27;


    var render = function () {
        //if the ball hits the side bars
    if(ball.position.x > 50 || ball.position.x < -50) {
            velocityX = -velocityX;
    }; 
        //if the ball hits the back wall
    if(ball.position.z < -80) {
        velocityZ = -velocityZ;
    };



        // move ball
        ball.position.x += velocityX;
        ball.position.z += velocityZ;
        requestAnimationFrame(render);

        //ball.rotation.y += Math.floor(Math.random()*100);

        renderer.render(scene, camera);

    };

    document.addEventListener("keydown", onDocumentKeyDown, false);

    function onDocumentKeyDown(event){
        // Get the key code of the pressed key
        var keyCode = event.which;
        switch(keyCode) {
            //Left key pressed
                case 37: paddle.position.x -= 20, console.log(paddle.position.x);
            break;
            //Right key pressed
                case 39: paddle.position.x += 20, console.log(paddle.position.x);
            break;
            //If anything else is pressed
                default: console.error('OH LAWD!');
            break;
        }

        }
    render();
    }

这段代码的一个活生生的例子是here，我正在使用 Three.js r62

Answer 1

使用这个框架很容易：http://chandlerprall.github.io/Physijs/，实现物理。