Juel Garden

A library of custom components written with Lit to create 3D and VR scenes with BabylonJS.
This library has been inspired by A-Frame, but instead of ThreeJS we are using Babylon.

What's in the name

The name 'Garden' was chosen because of the Hanging Gardens of Babylon, we are using BabylonJS so this seems fitting.
I am also inspired by The Village Green Preservation Society, the main tutorial builds a village.
God save the village green!

Juel is the Jollify Unique Element Library which is another project I am working on.

Development

I have developed this library by following the tutorials and taking some examples from the Babylon Playground and creating custom elements based on them.
Here is the Garden equivalent of the A-Frame basic scene:

<garden-scene>
    <garden-camera></garden-camera>
    <garden-light></garden-light>
    
    <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>
    </garden-element>
</garden-scene>

To show one model in an ordinary page, one tag is enough (framed, turnable, its named animations playable: see Showing one model in a page):

<garden-model-viewer src="box.glb" style="width: 100%; aspect-ratio: 4 / 3"></garden-model-viewer>
<button onclick="document.querySelector('garden-model-viewer').playOnce('Open')">Open</button>

The Waypoints example shows how this library could be used to create educational VR experiences.
<garden-waypoint> moves you to a stop when you click it, or when you look at it and hold (dwell, 1500 ms by default, 0 off: a white reticle, dark-edged so it reads on pale surfaces too, fills at the centre of view, for headsets without controllers); the next stop in order has a glowing ring (highlight-next="false" hides it); next(), previous() and go(index) fly along the order and fire waypoint-changed ({ index }). For headsets keep the fly short (speed="2" or more). Keys (keys, on by default): PageDown and Right arrow go to the next stop, PageUp and Left arrow to the previous one, which is what presentation clickers send, so a published scene works with one (in an iframe, while the iframe has focus); keys typed into a form field or editable text, or with Ctrl/Alt/Meta held, are left alone, and keys="false" turns it off. A stop that moves (one with orbit) is followed during the fly, so you land on it and ride its orbit. Tests: node tests/waypoint-dwell.js, node tests/waypoint-orbit.js, node tests/waypoint-keys.js.
A stop can circle something: give it orbit (and orbit-angle, radians per frame) inside the element it goes round. Its position stays world-space (height included), and a <garden-mesh-model> parent is waited for until its file has loaded. Test: node tests/orbit.js.
My favourite example is the temple example which demonstrates how the library could be used to create experiences for museum exhibits:

<garden-scene gravity="0 -0.2 0" collisions>
    <garden-camera type="free" collisions position="0 0 -40"></garden-camera>
    <garden-light></garden-light>

    <garden-room id="r1" collisions></garden-room>
    <garden-opening between="r1 r2" position="0 1 -4" width="2" height="2" depth="0.4"></garden-opening>
    <garden-room id="r2" position="0 0 -8" collisions></garden-room>
    <garden-opening between="r2 s1" position="0 1 -12" width="2" height="2" depth="0.4"></garden-opening>

    <garden-column position="-4 -5 -22" diameter="1" height="6" collisions>
        <garden-particle effect="fire"></garden-particle>
    </garden-column>
    <garden-column position="4 -5 -22" diameter="1" height="6" collisions>
        <garden-particle effect="fire"></garden-particle>
    </garden-column>
    <garden-stairs id="s1" position="0 -5 -32" height="5" depth="20" collisions>
        <garden-sound loop autoplay maxdistance="20"
            url="https://upload.wikimedia.org/wikipedia/commons...Epitaph_of_Seikilos.ogg">
        </garden-sound>
    </garden-stairs>
    <garden-ground width="150" height="160" colour="green" position="0 -5 0" collisions></garden-ground>
</garden-scene>

Embedding a scene in a page

A <garden-scene> takes over the window by default: the page's html and body lose their margins and scrolling, and the canvas fills the body. To put a scene in the middle of an ordinary page that scrolls, give it embedded and size it with CSS like any block (width, height, aspect-ratio); the canvas follows the box as it changes size.

<p>Text above...</p>
<garden-scene embedded style="width: 100%; aspect-ratio: 16 / 9">
    <garden-camera type="arc" radius="4"></garden-camera>
    <garden-light></garden-light>
    <garden-box position="0 0.5 0"></garden-box>
</garden-scene>
<p>...and below.</p>

Only a scene's own canvas is styled, so other canvases on the page keep their size. With one full-window and one embedded scene on a page, each behaves as it asks; the full-window page styles leave when the last full-window scene does. Test: node tests/embedded.js.

For one model, <garden-model-viewer> does all of this in one tag (below).

This is the beginning of the README. Read the rest at the original. Read the full README ↗