How complex is it to create a chess like grid and add object so positions (perhaps animate)

Remember the original Star Wars when they were playing chess. How complex is it to have something similar i.e.

  • A grid
  • Bunch of objects with positions
  • Feed into the software movements from (x1,y1) to (x2,y2).
  • Perhaps have some animation where an object moves from one position to another

Can threejs do all that? Is it easy, ignoring the time it would take to create the models which might be very simple or look very good.

Two or three evenings (made it several years ago).


Yes, it can.

Depends on your skill level. You should start reading some of the links on this page to get acquainted with Three.js. The more comfortable you get with how it all works, the easier building a chess game will feel.

@prisoner849 Is your demo showing moves from a professional game? If so, which match is it?

Kasparov vs Deep Blue. One of the games that ended in a draw (can’t remember which one). :slight_smile:

1 Like

Looks amazing, very impressive. Was a it small thing to let someone move the camera around while the moves were going on ?

@Robert_D camera movement is simply cos and sin functions for x and z coordinates.

		camera.position.x = Math.cos( rotate ) * 200;
		camera.position.y = 75;
		camera.position.z = Math.sin( rotate ) * 200;
                camera.lookAt( scene.position );

The time applies to a fast coder like @prisoner849. I myself would have to multiply the time by a larger number! :confused:

It also depends on how much practice you have with three.js.

To get started:
📕 three.js Bookshelf
Possibly my Collection of examples from

If one takes the definition of the figures from the example, the following change since version 72 must be taken into account.

geometry - Three.js v74 and up don't support LatheGeometry - Stack Overflow

see in the docs
recommended three.js docs
( or three.js docs )


How did you build the pieces?
I need a chess knight for part of a university project, but just don’t know how to do it.

checkout splinetool which is easier to handle than blender. otherwise im sure you find tons and tons of models either paid for or free on sketchfab blendermarket and so on.

1 Like

You can combine two geometries into one group: three.js docs .

The base as LatheGeometry: three.js docs and then ExtrudeGeometry: three.js docs

see Shapes 2022-07-07 20.25.29
from the Collection of examples from

1 Like

Most of them are LatheGeometry.
The knights, built with LatherGeometry (bottom) and ExtrudeGeometry (top).