3D Creator is a prototype that shows how students (grades 7-12) can use block-based programming to create immersive 3D scenes. It's designed such that students only need knowledge of x, y, and z planes, and gently introduces more complex 3D topics over time.
It provides an immediate feedback loop (when a block is added, the scene automatically updates, with no render time) and uses PBR (Physically Based Rendering) to create realistic materials, reflections, and lighting.
Designed to run on minimal hardware, 3D Creator is fully browser-based and requires no installation. It runs well (at 60fps for most scenes) on most low-end laptops and Chromebooks.
3D Creator is made possible by Google's Blockly and BabylonJS. All public domain materials and HDRIs sourced from ambientCG and Poly Haven.
To launch 3D Creator, browse to https://simonguest.github.io/3dcreator. Drag blocks on to the workspace to build your scene:
The sample projects (fourth button from the right on the toolbar) demonstrate some of the more advanced features of 3D Creator:
From left to right, use the toolbar to:
-
Reset: Resets the camera view in the current scene.
-
Physics: Enables the physics engine for the current scene.
-
Full: Displays the current scene in full screen mode. Hit Esc to exit full screen.
-
VR: Displays the current scene on an Oculus Quest (using WebXR) or Google Cardboard.
-
Debugger: Enables the debug view for object debugging.
-
Examples: Open an example project.
-
Upload: Upload a previously saved workspace file.
-
Export: Export the current workspace to a file.
-
Clear: Clear the current workspace and scene.
-
Help: Launch a short tutorial on how to use 3D Creator.
Example projects can be opened via the toolbar (as shown above) or via direct URLs:
- TV Room
- Spinning Code.org
- Solar System
- Red Pill, Blue Pill (Click on the scene and press A to add more and B to release.)
- Pegboard Game (Click on the scene and press A and D to move, S to release.)
3D Creator has been tested on Firefox, Chrome, and Safari. It also is touch-responsive, so should work well on most tablets (tested on iPad Air), but is not responsive for an iPhone/smart phone form factor.
Clone the repo and run npm install to install the required dependencies.
To run the server, run npm run server. After the build is complete, browse to http://localhost:55000.