HeyokaJS

Appearance

ThreeCanvas ​

Utilize the ThreeCanvas component to seamlessly integrate and manage 3D models.

Usage ​

To include and manipulate 3D models within your web applications, use the ThreeCanvas component. This component is designed to handle complex 3D model interactions with customizable settings:

html
<script setup lang="ts">
import { ThreeCanvas } from "@heyokajs/nuxt"
</script>

<template>
    <div>

    <ThreeCanvas
        position="fixed"
        :disableRender="false"
        :windowMode="true"
        :models="['/models/model.gltf']"
        :assets="[]"
    />
    </div>

Options ​

position ​

Specifies the CSS position property of the canvas container. In this setup, it's fixed, allowing the 3D canvas to stay in a specific position relative to the viewport.

disableRender ​

A Boolean that, when set to false, enables continuous rendering of the 3D scene. This is essential for dynamic scenes where the content changes or moves.

windowMode ​

A Boolean that indicates whether the canvas should adapt to the window size. Setting this to true makes the 3D canvas responsive, adjusting to the size of the browser window.

models ​

An array of strings specifying the paths to the 3D models to be loaded. This example uses a GLTF model located at /models/model.gltf, which allows for complex and detailed 3D graphics.

assets ​

An array meant to hold paths to additional assets required by the scene, though it's empty in this example. This could be used for textures, additional models, or other multimedia elements necessary for the 3D environment.