Sketchbook v0.4 (three.js + cannon.js playground)

Just released 0.4 of Sketchbook on GitHub and NPM. A project I’ve worked on for a while. Currently featuring third person character controls, cars, airplanes and helicopters. No shooting or player interaction yet though.

Live demo:

Introducing “scenarios”, which are basically spawn groups with the ability to define a race track. There’s generally lots of polish over the previous release, UI improvements, Tonemapping, Cascaded Shadow Maps and other cool stuff.

The project doesn’t have any inherent purpose. It’s just a playground. Though there’s still a lot of stuff I want to add to Sketchbook. Hope you have fun with it.


Waw it’s starting to become way too fun and gorgeous ! I can’t wait to see how it’s gonna turn out.
If you’re taking the sandbox game road, maybe make it multiplayer ?

Jumping from the helicopter is fun, you should consider making a scenario around that


I also did that, just wanted to see what would happen :sweat_smile:



Excellent! I especially love the suspension on the car when you turn. The overall look and animations are extremely impressive, definitely one of the best things I have seen with Three. It runs extreamly quick so I would be interested to know of any optimisations you have done to achieve such great performance

1 Like

Ya it would be fun. Maybe some day. I’d probably want a solution that isn’t easily hackable, which I understand is quite a challange in JS based applications. But so far I haven’t looked into multiplayer at all, hopefully some day.

1 Like

Glad you like it. One of the reasons for this project was to find out if it’s possible to create a natural feeling car suspension, since I haven’t seen it anywhere on the web. Turns out cannon has a great raycast vehicle class (probably borrowed from bullet or something…), the parameters just need a bit of tuning.

Not really. I actually think the opposite is true :smile:. The physics are fairly unoptimsed, I get FPS drops on some of the race scenarios because cannon doesn’t handle the cars’ raycasts against trimesh surfaces too well.

Regarding three.js, I haven’t done any optimisations either. The opposite is the case again. The cascaded shadow maps library I’m using has quite a big impact on performance, as it pretty much renders the scene 3 additional times for every cascade. I had to dial the shadow resolution back to make it a bit better.

Also the ocean is completely rendered in the fragment shader, so it’s like a GPU stress test.

This is a really nicely designed game. Maybe add some more physics elements like having a car ram away some boxes at a high speed for satsifacation.


This is cool, if I could integrate this with a scripting system I could use it for CoderDojo (3D Resource for CoderDojo?).

From a development point of view it obviously has a roblox feel, so it’s worth working in that direction - i.e. let users publish derivative worlds and script their own characters/objects/interactions/scoring. In game currency is obviously how you would commercialize it (if you did want to).

1 Like

That’d be an interesting take on the project, as I’ve been struggling to find any use for it myself. :smiley:

I don’t think I can spend my spare time taking the project in that direction (scripting interface, publishing derivative worlds and scripting own characters/objects/interactions/scoring), as it sounds like a lot of work… Though I’ll do my best to advise you on how Sketchbook works if you decide to give it a shot.

1 Like

Thanks! Could you briefly describe how scenarios works currently? Is it all one world and you are just spawning differently?

I’d need to be able to spawn specific world versions with features enabled/disabled as otherwise the kids would just play instead of doing any coding :slight_smile:

Yeah scenarios are all contained within a world now. When Sketchbook loads a scenario it:

  1. Removes all entities from the world
  2. Iterates through the new scenario’s spawn points and spawns everything
  3. Displays a welcome screen with title and description (which are defined in Blender via custom properties)

But more functionality can be “easily” added, by adding more custom properties to the scenario empties in Blender, and then reading them when loading that scenario.

Blend file:

E.g. something like “vehicles_enabled” = “false”. And then in TypeScript ask if a scenario has a “vehicles_enabled” custom property and change things accordingly. (Nothing like “vehicles_enabled” is currently in Sketchbook of course, it would have to be implemented)

Defining custom properties in Blender is pretty clunky right now. Ideally there would be a Blender addon which would let you create Sketchbook entities from a neat dropdown or something, so you wouldn’t have to worry about having a typo in the custom properties, but now I write them manually.

1 Like

is there something specific to he scene world glb that makes it impossible to change the environment .i added some geometry to the scene but is not possible to make it part of the physics . Everytime i add objects to the scene.glb , the avatars fall through the floor .

Physics are defined via custom properties, just like the scenarios I described above. As long as there’s the necessary custom properties it should all work.

and the ao baking has nothing to do with the physics ?
Every modeler viewer , file format and exporter seems to handle the custom properties differently. which did you use ?

1 Like

No the textures (including ao) are irrelevant to physics. I used the official built-in Blender gltf exporter and the official gltf loader module from three.js documentation and examples.

You’re right that different model viewers may ignore custom properties. But the three js gltf loader handles them ok.

Add me on discord swifterik#5066 and I we can discuss your problem in detail. It should really be fairly easy to get it working.

guns? maybe multiplayer. you should make the water less laggy because when you render it lags a lot.

1 Like

the water is a GPU stress test :slight_smile:

awsome dude.

1 Like

So fun! :heartpulse: so smooth.

1 Like