Three.js and Cannon.js sandbox
Clone or download
Latest commit 2aeeafe Nov 17, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
build build Nov 17, 2018
examples 0.2 preparations Nov 17, 2018
src 0.2 preparations Nov 17, 2018
.eslintignore Release adjustments Oct 14, 2018
.eslintrc.js Module cleanup Sep 10, 2018
.gitignore gltf and DaPao experiments Oct 26, 2018
LICENSE introducing objects Nov 10, 2018 readme image #2 Nov 17, 2018
jsconfig.json es6 - Sketchbook Sep 8, 2018
package-lock.json environment Nov 17, 2018
package.json environment Nov 17, 2018
webpack.common.js gltf and DaPao experiments Oct 26, 2018 dev/prod builds setup Sep 13, 2018 Animation improvements Oct 13, 2018

Play it here!


3D rendering and physics library for game projects on the web, featuring a few conventional gameplay mechanics and basic 3D models.

Built on three.js and cannon.js.


  • World
    • Three.js scene
    • Cannon.js physics
    • Variable timescale
    • Frame skipping
    • FXAA anti-aliasing
    • Custom damped-spring simulation
  • Characters
    • Third-person camera
    • Raycast character controller with capsule collisions
    • General state system
    • Character AI

Not yet implemented

  • Vehicles
    • Cars
    • Airplanes
    • Helicopters

All planned features can be found in the project pages.


This creates a fullscreen canvas, initializes the physics and rendering, adds a character and lets you control him.

let world = new Sketchbook.World();

let player = new Sketchbook.Character({
    position: new THREE.Vector3(1.13, 3, -2.2),

Check out the examples to learn specifics about using Sketchbook.


Simply import the library in your project, along with provided build of cannon.js and a three.js version of your choice, and you're ready to go.

<script src="three.min.js"></script>
<script src="cannon.min.js"></script> <!-- Only use provided build, official package is extremely outdated! -->
<script src="sketchbook.min.js"></script>