Scripting (Javascript)

We use AFrame's Compatible Entity-Component-System to build our scenes. This is a powerful pattern that allows us to create reusable components that can be attached to any entity in the scene. This enables us to create a scene that is made up of many different components that can be reused and shared across scenes.

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps more Infos to Framework independent Web Components.

This documentation outlines the structure, methods, and optional rendering of the SampleElement Lit A-Frame component. Developers can extend and customize this component to suit their A-Frame scene requirements.

class SampleElement extends CapElement {
    @query('dialog')
    dialogElement

    #showInfo = () => {
        this.dialogElement.showModal()
    }

    #closeDialog = () => {
        this.dialogElement.close()
    }

    render() {
        return html`
            <style>
                #info {
                    width: 100px;
                    height: 50px;
                    border-radius: 20px;
                    cursor: pointer;
                    background-color: rgb(230, 0, 0);
                    color: white;
                    margin-top: 10px;
                    font-size: xx-large;
                    border-width: 0.1px;
                }

                dialog {
                    z-index: 10;
                    margin-top: 100px;
                    background-color: hsl(0deg 0% 100% / 75%);
                    border: none;
                    border-radius: 0.5rem;
                    backdrop-filter: blur(15px);
                    width: 400px;
                    height: 50vh;
                }

                dialog::backdrop {
                    /* Customize backdrop appearance */
                }
            </style>

            <dialog
                @click="${(e) => {
                    const dialogDimensions = this.dialogElement.getBoundingClientRect()
                    if (
                        e.clientX < dialogDimensions.left ||
                        e.clientX > dialogDimensions.right ||
                        e.clientY < dialogDimensions.top ||
                        e.clientY > dialogDimensions.bottom
                    ) {
                        this.#closeDialog()
                    }
                }}"
            >
                <div>
                    <img
                        style="display:flex;height:300px;"
                        src="https://aomediacodec.github.io/av1-avif/testFiles/Link-U/kimono.avif"
                        sizes="(max-width: 800px) 100px, 200px"
                    />
                    <h1
                        style="margin: 0px; color: rgb(156, 187, 54); --fontSize: 42; line-height: 1.4;"
                        data-fontsize="42"
                        data-lineheight="58.8px"
                    >
                        <span style="color: #301d1d;"
                            >Authors: Momiji Jinzamomi(@momiji-san) and Kaede
                            Fujisaki(@ledyba)</span
                        >
                    </h1>
                    <iframe src="https://vrland.io/lobby" width="100%" height="200px"> </iframe>
                    <button @click="${this.#closeDialog}">Close</button>
                </div>
            </dialog>

            <a-entity
                class="interactable"
                position="-1 1.5 -1"
                geometry="primitive:box;width:3;height:3;"
                material="src:https://aomediacodec.github.io/av1-avif/testFiles/Link-U/kimono.avif;side:double;"
                @click="${this.#showInfo}"
            >
            </a-entity>
        `
    }
}

export default SampleElement

Result

https://vrland.io/YxT3P6/example_dialog

Import Scripts

class SampleElement extends CapElement {
    schema = {}
    
    // Do something when component first attached.
    async init() {
       // this.el.sceneEl reference to aframe a-scene
  
       // Import script module from jsdelivr or unpkg.com 
       const { helloWorld } = await import(
            'https://cdn.jsdelivr.net/gh/vschetinger/captic/helloWorldExport.js'
        )

        helloWorld()
    }

}
export default SampleElement;