Wrapping Images around a Sphere in THREE.js

When creating Eight Ball Pool, it was clear that a 2D canvas context wouldn't work well with making the numbered balls roll around the canvas. Instead, we opted to use THREE.js to create the effect, simply by wrapping images around a three-dimensional sphere. This produced the graphics showcased in the following video:

Any game using THREE.js requires three basic elements: a renderer, a scene, and a camera. For those games (like our pool game) utilizing a birds-eye view, where the sizes should not vary with distance from the camera, an orthographic camera should be used. The renderer must be told the canvas you choose to display on, and the scene often requires no arguments to initialize - however, you should add the camera to the scene once the camera is created.

Once your setup is complete, simply create a new SphereGeometry with which to wrap your image. You now need to load the image as a texture using a TextureLoader, whose inputs should be the image's source attribute and a function to execute once the texture is done loading. This function should create a new material from the texture and attach it to the SphereGeometry you created before.

One thing that we noticed which was not mentioned anywhere in the documentation was the fact that the images you choose to wrap can't just be any size. In particular, there are two rules you need to follow:

  1. The image width must be twice the image height.
  2. The image width and image height must both be powers of two (when measured in pixels).
Games Mentioned in this Post:

Leave a Reply

Your email address will not be published. Required fields are marked *