fibo / tris3d-canvas

is a placeholder to play tic tac toe in 3d

tris3d-canvas

is a canvas to play tic tac toe in 3d

Installation | API | License

Installation

With npm do

npm install three tris3d-canvas

Note that three.js is required as a peer dependency.

API

See online example or do the following to run example.js

npm install
npm start

const tris3dCanvas = new Tris3dCanvas(canvasId, opts)

Constructor to create an instance of Tris3dCanvas.

Create a canvas with attribute id, inside a div container with display: block style

<div style="display: block">
  <canvas id="demo"></canvas>
</div>

Then create a Tris3dCanvas object

const tris3dCanvas = new Tris3dCanvas('demo')

Optional parameters are accepted after canvasId, constructor signature is the following:

• @param {String} id of canvas element
• @param {Object} [opt] optional parameters
• @param {Array} [opt.playerColors] are three colors, like 0xff0000
• @param {Array} [opt.backgroundColor] defaults to 0xffffff

tris3dCanvas.localPlayerIndex

Can be 0, 1, 2. Defaults to 0, which means the local player moves first.

tris3dCanvas.on('localPlayerTurnEnds', () => {})

Listen to localPlayerTurnEnds event.

tris3dCanvas.on('localPlayerTurnStarts', () => {})

Listen to localPlayerTurnStarts event.

tris3dCanvas.on('nextPlayer', (playerIndex) => {})

Listen to nextPlayer event.

tris3dCanvas.on('nobodyWins', () => {})

Listen to nobodyWins event.

tris3dCanvas.on('setChoice', (cubeIndex) => {})

Listen to setChoice event.

tris3dCanvas.on('tris3d!', (winnerPlayerIndex, winningCombinations) => {})

Listen to tris3d! event.

tris3dCanvas.render()

Start rendering the 3d scene.

tris3dCanvas.setChoice(playerIndex, cubeIndex)

Set player choice.

tris3dCanvas.resetPlayground()

Reset playground without start playing a new match.

tris3dCanvas.startNewMatch()

Start a brand new match

License

MIT

tris3d-canvas's Issues

use a tiny webgl lib

here it is is http://twgljs.org/

try with 2 players

It could be implemented a version of the game with 2 players, but, the center should be removed.

my goal

https://github.com/toxicFork/react-three-renderer-example/tree/master/src/examples/DraggableCubes

http://toxicfork.github.io/react-three-renderer-example/

add stats in example page

https://github.com/mrdoob/stats.js

idea, add gyroscope support

contribute back to twgl

when finished a minimum viable version link it here greggman/twgl.js#29

modular threejs

Create a three-foo package for every feature is needed, than notify mrdoob/three.js#4776

webgl2

See:

https://github.com/Jam3/threejs-webgl2-tests

simple rotator

Use this http://math.hws.edu/eck/cs424/notes2013/webgl/cube-with-rotator.html

Try regl

Package regl could bè an alternative to threejs? See this demo https://erkaman.github.io/wireframe-world/www/demo.html

try to port to twgl

see picking example here greggman/twgl.js#29

native events

remove events dependency and use vanilla custom events.

Fix website

Website has many things to be fixed. On mobile layout overflows, hamburger icon does not work, etc.

Resize

Handle window resize eventuali, otherwise camera Can move and playground Is not usable