Documentation / @ripl/vue-3d / RiplContext3D

Variable: RiplContext3D

const RiplContext3D: RiplComponent<RiplContext3DProps, CanvasContext3D>

Defined in: vue-3d/src/components/context.ts:96

Creates a Ripl 3D rendering context and provides it to its subtree, mounting the canvas into its own root element.

A 3D context is an ordinary Ripl context, so <ripl-scene>, <ripl-renderer> and <ripl-transition> from @ripl/vue work inside it unchanged — this component replaces <ripl-context> and nothing else.

Like its 2D counterpart the context is built during setup() against a detached host, which Vue attaches on mount, so every descendant finds a live context in its own setup().

Example

<ripl-context-3d>
    <ripl-scene>
        <ripl-renderer :auto-stop="false">
            <ripl-camera :position="[0, 2, 5]" interactions/>
            <ripl-cube :size="1" fill="#4488ff"/>
        </ripl-renderer>
    </ripl-scene>
</ripl-context-3d>