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

**URL:** <https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576>\
**Category:** Questions\
**Tags:** animation\
**Created:** [April 23, 2020, 7:59pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576 "2020-04-23T19:59:37Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robert\_D](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robert_d/32/10567_2.png) [@Robert\_D](https://discourse.threejs.org/u/Robert_D)\
**Post date:** [April 23, 2020, 7:59pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/1 "2020-04-23T19:59:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 23, 2020, 8:15pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/2 "2020-04-23T20:15:02Z")

</div>

Two or three evenings (made it several years ago).  
[http://west77.ru/content/r72/chess.html](http://west77.ru/content/r72/chess.html)

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/3fe8070b4757819e9b33f1dcb5db60aed5d7d93e.jpeg)

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [April 23, 2020, 8:23pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/3 "2020-04-23T20:23:25Z")

</div>

> [@Robert\_D](#):
>
> Can threejs do all that?

Yes, it can.

> [@Robert\_D](#):
>
> Is it easy, ignoring the time it would take to create the models which might be very simple or look very good.

Depends on your skill level. You should start [reading some of the links on this page](https://threejs.org/docs/#manual/en/introduction/Useful-links) 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?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 23, 2020, 8:29pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/4 "2020-04-23T20:29:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Robert\_D](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/robert_d/32/10567_2.png) [@Robert\_D](https://discourse.threejs.org/u/Robert_D)\
**Post date:** [April 23, 2020, 9:41pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/5 "2020-04-23T21:41:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 23, 2020, 10:00pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/6 "2020-04-23T22:00:21Z")

</div>

@Robert_D camera movement is simply _cos_ and _sin_ functions for _x_ and _z_ coordinates.

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

```

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [April 24, 2020, 9:30am UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/7 "2020-04-24T09:30:41Z")

</div>

> [@prisoner849](#):
>
> Two or three evenings (made it several years ago).  
> [Chess](http://west77.ru/content/r72/chess.html)

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

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

To get started:  
[📕 three.js Bookshelf](https://discourse.threejs.org/t/three-js-bookshelf/2468)  
Possibly my [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

* * *

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](https://stackoverflow.com/questions/37005480/three-js-v74-and-up-dont-support-lathegeometry)

see in the docs  
recommended [three.js docs](https://threejs.org/docs/index.html#api/en/geometries/LatheBufferGeometry)  
( or [three.js docs](https://threejs.org/docs/index.html#api/en/geometries/LatheGeometry) )

---

<div class="post-metadata">

**Author:** ![broth2](https://avatars.discourse-cdn.com/v4/letter/b/bc79bd/32.png) [@broth2](https://discourse.threejs.org/u/broth2)\
**Post date:** [July 7, 2022, 2:19pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/8 "2022-07-07T14:19:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 7, 2022, 3:23pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/9 "2022-07-07T15:23:09Z")

</div>

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.

> **[Sketchfab](https://sketchfab.com/search?q=chess%2Bknight&type=models)**
>
> Use Sketchfab to publish, share and embed interactive 3D files. Discover and download thousands of 3D models from games, cultural heritage, architecture, design and more.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [July 7, 2022, 6:27pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/10 "2022-07-07T18:27:19Z")

</div>

You can combine two geometries into one group: [three.js docs](https://threejs.org/docs/index.html?q=grou#api/en/objects/Group) .

The base as LatheGeometry: [three.js docs](https://threejs.org/docs/index.html?q=lathe#api/en/geometries/LatheGeometry) and then ExtrudeGeometry: [three.js docs](https://threejs.org/docs/index.html?q=ext#api/en/geometries/ExtrudeGeometry)

see [Shapes](https://hofk.de/main/discourse.threejs/2019/Shapes/Shapes.html) ![2022-07-07 20.25.29](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/f/fff4b49766e72b923400ea888ea8c472c60e20f6.png)  
from the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [July 7, 2022, 10:06pm UTC](https://discourse.threejs.org/t/how-complex-is-it-to-create-a-chess-like-grid-and-add-object-so-positions-perhaps-animate/14576/11 "2022-07-07T22:06:19Z")

</div>

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