My goal was to render 3D Animations (only cubes supported so far) in a browser only using CSS (yes, no WebGL!).
This repo contains the required workflow to achieve that:
- A Blender add-on: Export a Blender scene to a temporary file
- A Deno program: Convert that file into a CSS 3D scene
Features:
- Location, Rotation, Scale + Face colors for cubes
- Location, Rotation + Scale Animations for cubes
Blender:
- Install the Blender add-on
- Download the add-on to your PC
Edit
->Preferences
->Add-ons
-> (Dropdown top-right)Install from Disk...
-> Select file
- Design something only using cubes
- The cubes must have one material assigned
- The scene will be rendered as if you are viewing it from
Right
(View
->Viewport
->Right
) with Perspective (toggle withNumpad 5
) - Create animations with keyframes as normal
- Press
CTRL+SHIFT+E
to export the scene to a temporary file
Generator:
- Install Deno if you don't already have it installed
- Run
deno task run <path-to-temporary-file>
in the main directory of the repo - Open
out/index.html
in a web browser!
Notes:
- Try not to use more than 25 cubes, otherwise the framerate will suffer
Hot reload for the generator:
bash -c "find . -name '*.ts' -o -name '*.txt' | entr -c ./build_and_run.sh"