3dpong

3dpong

by jonnyc

HTML

<title>3d pong</title>
    <meta charset="utf-8">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r50/three.min.js"></script>
  
  <body>
    <div id="container" style=""></div>
    <div style="background:orange;" id="mouseLocation"></div>
  </body>

CSS

body {
        background-color: #000000;
        margin: 0px;
        overflow: hidden;
      }

#container{
    background:gray;
    width:700px;
    height:600px;
}

JavaScript

function loadMyScene() {
  // set the scene size
  var WIDTH = 700,
    HEIGHT = 600;

  // set some camera attributes
  var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1,
    FAR = 10000,

    tunnelLength = 40,
    tunnelWidth = 20,
    halfWidth = tunnelWidth / 2,
    halfLength = tunnelLength / 2,
    ballRadius = 1.5,
    paddleWidth = 4,
    halfPaddleWidth = paddleWidth / 2;
    
    var playerPane;

  var sphereMaterial = new THREE.MeshLambertMaterial({
    color: 0xFF0000
  });

  // set up the sphere vars
  var segments = 50,
    rings = 50;

  // get the DOM element to attach to
  // - assume we've got jQuery to hand
  var $container = $('#container');

  // create a WebGL renderer, camera
  // and a scene
  var renderer = new THREE.WebGLRenderer();
  var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,
  ASPECT,
  NEAR,
  FAR);
  var scene = new THREE.Scene();

  var ambientLight = new THREE.AmbientLight(0x111111);
  scene.add(ambientLight);

  // the camera starts at 0,0,0 so pull it back
  camera.position.z = tunnelLength + 5; //1000;
  // camera.position.x = 2;// bounds / 2;

  camera.lookAt(scene.position);

  // start the renderer
  renderer.setSize(WIDTH, HEIGHT);

  // attach the render-supplied DOM element
  $container.append(renderer.domElement);

  // and the camera
  scene.add(camera);

  var pointLight = new THREE.PointLight(0xFFFFFF);

  // set its position
  pointLight.position.x = 50;
  pointLight.position.y = 50;
  pointLight.position.z = 50;

  // add to the scene
  scene.add(pointLight);

  var cubeMaterial = new THREE.MeshBasicMaterial({
    color: 0x00FF00,
    wireframe: true,
    transparent: true
  });
  var cube = new THREE.Mesh(new THREE.CubeGeometry(tunnelWidth, tunnelWidth, tunnelLength), cubeMaterial);
  scene.add(cube);

  var ballMaterial = new THREE.MeshLambertMaterial({
    color: 0x0000FF,
    wireframe: true,
    transparent: true
  });
  var ball = new THREE.Mesh(
  new THREE.SphereGeometry(ballRadius,...