Quick Start

Let's setup a quick scene to show you the basics

Initializing a canvas

<div x-3.canvas></div>

To create a Threejs scene in our document, we need to initialize a Canvas, for this it is possible to use x-3.canvas which will create a basic scene, a camera, and a renderer with each of the default parameters that can be adjusted.

Populating our scene

There are many ways to fill your scene, but we'll keep it simple for now.

Let's start with a cube.

The hierarchy of the scene is the same as that of the HTML blocks in x-3.canvas. A good way to do this is to use <div> for elements with children, and void elements like <br/> for the rest.

We declare a mesh with x-3.mesh, then we can attach a geometry and a material with the corresponding directives.

<div x-data>
    <div x-3.canvas>
        <div x-3.mesh>
            <br         
                x-3.boxGeometry
                x-3.attach.geometry
            />
            <br         
                x-3.meshBasicMaterial="{color: 0xff0000}"
                x-3.attach.material
            />
        </div>
    </div>
</div>