KellyCode Feb 13, 2025
No goal here, just learning how it does what it does
-
Converted everything typescript to vanilla javascript and removed anything webpack so it'll run without much effort
-
Deciphered the scene/scenario building process in Blender: Essentially, everything in the Blender/GLTF scene is comprised of two objects: one is the visible object and it's partner is a similar shape with Custom Properties under the Object tab to designate it as a hidden coliider "data: physics, type: box" there are a few others as well and are used in the World.js code as .userData.data and .userData.type.
-
Replaced the boxman character with a Mixamo character to simplify toon changes (POC) with only a couple hours effort. The Mixamo character and animations worked out well and without too much fakery (door closing & opening). I edited the animations a bit and converted the Mixamo fbx to glb. The left and right turn animations are affected by the direction the camera is facing so may look at that.
-
Made the car blue and added door signs. When modifying any of the glb items, make sure to include custom properties in the glb export.
This is a nice project, thank you swift502 for making it. Very clean code, well organized and easy to work with and the physics is good.
Original readme follows:
As I have no more interest in developing this project, it comes to a conclusion. In order to remain honest about the true state of the project, I am archiving this repository.
- If you wish to modify Sketchbook feel free to fork it.
- To see if someone is currently maintaining a fork, check out the Network Graph.
Simple web based game engine built on three.js and cannon.js focused on third-person character controls and related gameplay mechanics.
Mostly a playground for exploring how conventional third person gameplay mechanics found in modern games work and recreating them in a general way.
- World
- Three.js scene
- Cannon.js physics
- Variable timescale
- Frame skipping
- FXAA anti-aliasing
- Characters
- Third-person camera
- Raycast character controller with capsule collisions
- General state system
- Character AI
- Vehicles
- Cars
- Airplanes
- Helicopters
All planned features can be found in the GitHub Projects.
You can define your own scenes in Blender, and then read them with Sketchbook. Sketchbook needs to run on a local server such as http-server or webpack-dev-server to be able to load external assets.
- Import:
<script src="sketchbook.min.js"></script>- Load a glb scene defined in Blender:
const world = new Sketchbook.World("scene.glb");- Get the LTS version of Node.js 16
- Fork this repository
- Run
npm install - Run
npm run dev - Make changes and test them out at http://localhost:8080
- Commit and make a pull request!
Big thank you to each of the following github users for contributing to Sketchbook: