I am trying to make a game where you have to keep the ball on a green platform. At this point the ball is a div with a ball image. You can move the ball over the field, all works great.

See it in action here (click the 1 first).

When you use your arrow keys you can move the ball (actually you move a div). This looks kinda fake, so I want to use a real 3D canvas ball for this. I saw a nice example here. (scroll down half way to the page. You will see a smiley with a ball in it just above the title: Smoothing it out)

So how can I use this ball into my game? I have the following code for the ball:

  // build the ball and draw its texture with a 2d canvas -------------------------------------------
  var buildBall = function() {
    // create a canvas to draw the ball's texture
    var ballCanvas = document.createElement('canvas');
    ballCanvas.width = 64;
    ballCanvas.height = 64;
    var ballContext = ballCanvas.getContext('2d');

    // draw 2 colored halves of the 2d canvas 
    ballContext.fillStyle = "#f8ae44";
    ballContext.fillRect(0, 0, ballCanvas.width, ballCanvas.height/2);
    ballContext.fillStyle = "#ffda4e";
    ballContext.fillRect(0, ballCanvas.height/2, ballCanvas.width, ballCanvas.height/2);

    // create the THREE texture object with our canvas
    var ballTexture = new THREE.Texture( ballCanvas );
    ballTexture.needsUpdate = true;

    // create the physijs-enabled material with some decent friction & bounce properties
    var ballMaterial = Physijs.createMaterial(
      new THREE.MeshLambertMaterial({
        map: ballTexture,
        shininess: 10,
        color: 0xdddddd,
        emissive: 0x111111,
        side: THREE.FrontSide
      .6, // mid friction
      .5 // mid restitution
    ballMaterial.map.wrapS = ballMaterial.map.wrapT = THREE.RepeatWrapping;
    ballMaterial.map.repeat.set( 1, 1 );

    // create the physics-enabled sphere mesh, and start it up in the air
    ball = new Physijs.SphereMesh(
      new THREE.SphereGeometry( 30, 32, 32 ),
    ball.position.y = 500;
    ball.receiveShadow = true;
    ball.castShadow = true;
    scene.add( ball );

I know I have to implement three.js to make this work, but how can I get the div replaced with this 3D canvas ball keeping everything else working as is (using arrows to move, move speed of the ball, reset when fallen of the platform etc)?


Well, these are very different things. You should just throw away your current code and rewrite it directly for three.js.


The logic should be separated from rendering. As long as you have your 'ball position' variables, you can just use them on 3D.

Create a three.js scene, add a plane, a camera, and a sphere, and then just move your sphere depending on keyboard input.

Detect when it gets out (if you don't want to bother with physics you can just detect when it's coordinates are out of the green terrain and then start getting it down with a little speed). You don't need a physics engine for that.

| improve this answer | |
  • \$\begingroup\$ thanks for the reply. So I guess three.js is not the way to go here. How does this game do it? agent8ball.com I also scanned on github their code but cannot figure out how the create those cool looking balls. Perhaps I can use this technique for my ball? Question is still: how? \$\endgroup\$ – Maurice Dec 12 '13 at 18:08
  • \$\begingroup\$ The thing is that game programming has its learning curve. While you can easily have some 2D object moving on a background like you did, creating a real 3D games with physics is a whole other story. So, considering how your current game is, you should not really try to make it 3D. 3D is not just something you throw to your game, it's another way of constructing it. You have to understand how webGL (or three.js) works, etc. First try to create a "test" scene in three.js with a ball and a floor, and then try to make it interactive. Not the other way arround. \$\endgroup\$ – Malharhak Dec 12 '13 at 21:51
  • \$\begingroup\$ I understand, so I need to find a way (with javascript perhaps?) to mimic the 3D look on the ball including the rolling effect. Agent008ball has done this nicely, but I can't find any tutorial online of how to do this. I hoped the agent008 would have a nice reference, but no luck there. Any thoughts? \$\endgroup\$ – Maurice Dec 13 '13 at 19:36
  • \$\begingroup\$ Well you can't really give a "3D look" to a 2D object. One thing you could try is to draw a semi-transparent white gradient circle on top of the circle that represents your ball. This circle would be the light's reflection. Then you could move it according to where the ball is going. But that would be pretty hard to put in place, and wouldn't give great results. It's better to just learn how to create a three.js scene if you really want to do something 3D. Just remember 3D is way more complicated and long to learn. \$\endgroup\$ – Malharhak Dec 13 '13 at 21:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.