Juel Garden: A Custom element library


During the past two years of lockdown I have had time to work on a number of projects and one of the projects I have been working on is a custom element library that enables uses to create Babylon scenes using HTML.
The library is written in TypeScript and uses Lit to create the custom elements.
So a basic scene looks like this:

    <garden-element parent position="0 -1 0">
        <garden-box position="-1 0.5 -3" rotation="0 45 0" colour="#4CC3D9"></garden-box>
        <garden-sphere position="0 1.25 -5" diameter="2.50" colour="#EF2D5E"></garden-sphere>
        <garden-cylinder position="1 0.75 -3" diameter="1" height="1.5" colour="#FFC65D"></garden-cylinder>
        <garden-ground position="0 0 -4" width="4" height="4" colour="#7BC8A4"></garden-ground>

The name ‘Garden’ comes from the ‘Hanging gardens of Babylon’ and it is also inspired by your village tutorials - Because I am a fan of The Kinks and your tutorial makes me think of the Village Green Preservation Society.

The idea for the library came about because I was using A-Frame to create scenes, but A-Frame uses ThreeJS and Babylon has more features, particularly CSG (Constructive Solid Geometry) so I decided to create my own library.

The Waypoints example shows you my original idea for building this library, I wanted to build VR lessons/presentations that would teach kids various subjects.
So on that demo, there are a number of platforms, then each platform has a scene, so the idea is that each scene is a slide is a presentation and then the viewer stands on the platform and then they can navigate by looking at/clicking on moving to the next platform.
It still needs lots of work though.

The link for the repository is here: Juel Garden.
I would be very happy to hear any feedback or if anyone would like to contribute.
I don’t have any experience of open source projects, this is the first project I have ever started and I need to improve the organising of the project, I need to work out a versioning system for eg.
I also haven’t worked on it for awhile because I have other priorities at the moment.




So cool to see babylon used with Lit :slight_smile:


This is SO COOL! Love declarative syntax :smiley:

1 Like