A Django app that shows 3D objects with A-Frame
This project is tested on Django 5.1 and Python 3.12. it uses HTMX and django-htmx to manage interactions. I use Bootstrap 5 for styling and Django Crispy Forms to help with forms. A SQLite
database is enough.
In your Django project root, clone this repository (git clone https://github.com/andywar65/djaframe
) and be sure to install required packages (python -m pip install -r requirements.txt
). Add djaframe.apps.DjaframeConfig
to INSTALLED_APPS
and path("3D/", include("djaframe.urls", namespace="djaframe"))
to your project urls.py
, then migrate. Reference to the included base.html
template to see which libraries are required to be uploaded.
Navigate to http://127.0.0.1:8000/3D/
and you will be presented with a Scene list
. Of course there still are no scenes, so navigate to the Entity list
: we first have to create some entities, and then stage them on the scene.
Click on the Add entity
button, enter a Title
and create the entity, then enter an *.obj file
. If provided, enter the *.mtl file
and eventual images. If no material is provided, you can add a color. Check the Switch
field if your object was created in CAD: A-Frame coordinate system is rotated with respect to CAD coordinate system. As you update the entity, you will be redirected to an A-Frame window to check if everything is ok.
Alternatively you can upload a *.gltf file
, which is the recommended format in A-Frame. If uploaded, all other formats will be neglected.
Now that you have some entities, go back to the Scene list
and create a scene. Enter a Title
and eventually an Equirectangular image
to simulate the environment (skip the DXF
field), create the scene then Add staged entities
. Select one of the Entities
you created previously, adjust color
, position
, rotation
and scale
. Stage as many entities you want (even multiple specimens of the same entity), then update the Scene. You will be redirected to an A-Frame window to check if everything is ok.
It's possible to create *.obj files
directly from CAD
. Generate a DXF
file with some meshes
(if you have 3DSolids
you have to convert them to Meshes
). Navigate to http://127.0.0.1:8000/3D/
and click on the Add scene
button. Enter title, description and upload a DXF file. Thanks to the outstanding library ezdxf meshes are converted to *.obj files
, and you will be redirected to the Scene Update panel to check if everything is ok. CAD Layer
colors will be associated to stagings. Switch to the A-Frame window, and move the cursor on imported entities: a popup will notify its Layer name.
WARNING: updating the DXF file
will remove all entities staged on the Scene, but not the entities. If you want to remove orphan entities navigate to http://127.0.0.1:8000/3D/entities/unstaged/
and click the Delete All
button.
Also Blocks
with meshes
will be imported, each Block
will be transformed into an Entity
, while Insertions
will be transformed into Stagings
. Switch to the A-Frame window, and move the cursor on imported blocks: a popup will notify its Block name, Layer name and a list of block attributes (if any).
WARNING, some restrictions occour for insertions when pitch rotation is 90 or -90 degrees.
Once in the A-Frame window, if you press Ctrl + Alt + i
you will open the A-Frame Visual Inspector. It's possible to modify objects in the Inspector, save a *.gltf file
from the whole scene, and then add it to an Entity
.
Create entities with basic geometries, add lights to scenes.
Testing is underway using pytest-django for the very first time instead of unittests
and Kolo to generate tests.