2

Im trying to make a 3D Breakout game with three.js. I have most of the collision detection for the walls, but I can't seem to get the collision against the paddle.

Here's my code:

    //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();
    }

A live example of this code is here, and I'm using Three.js r62

3
  • What have you tried? I see no code for detecting collision with the paddle. Commented Feb 26, 2014 at 11:59
  • 1
    u could use [PhysiJs][1]. i know i doesn't really answer your question, but its a cool three.js physics engine that runs in a separate webworker. U could use it to handle all your collisions. [1]: chandlerprall.github.io/Physijs Commented Feb 26, 2014 at 12:24
  • I tried to have it detect if the ball is between the paddle's width and Beyond a certain point on the z axis.. Some like, if (pabble.position.x-30 < ball.position.x < paddle.position.x+30 && ball.position.z >= 5) { velocityZ = -velocityZ }; but it wasn't working. Commented Feb 26, 2014 at 20:08

1 Answer 1

0

Use this framework is easy: http://chandlerprall.github.io/Physijs/, to implement physical.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.