provide default slot props in TresCanvas

[Joaquín Sánchez]

Description

Right now there is no way to access the TresCanvas context without hacking the script setup using TresCanvas:

Hack

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core';
import { computed, ref, onMounted } from 'vue';

import { extend, useTresContext } from '@tresjs/core';
import { OrbitControls } from 'three/addons/controls/OrbitControls';
import { TextGeometry } from 'three/addons/geometries/TextGeometry';

const trescanvas = ref();
const state = ref();

onMounted(() => {
  setTimeout(() => {
    state.value = trescanvas.value?.context;
  }, 0);
});

// Add the element to the catalogue
extend({ TextGeometry, OrbitControls });
</script>

<template>
  <TresCanvas ref="trescanvas" shadows alpha>
    <TresPerspectiveCamera :position="[5, 5, 5]" />
    <TresOrbitControls
      v-if="state?.renderer"
      :args="[state?.camera, state?.renderer?.domElement]"
    />
    <TresMesh>
      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
      <TresMeshMatcapMaterial :matcap="matcapTexture" />
    </TresMesh>
  </TresCanvas>
</template>

Suggested solution

Add default slot props, we¡ve the default slot there without any binding:

<canvas
    ref="canvas"
    :data-scene="scene.uuid"
    :class="$attrs.class"
    :data-tres="`tresjs ${pkg.version}`"
    :style="{
      display: 'block',
      width: '100%',
      height: '100%',
      position: windowSize ? 'fixed' : 'relative',
      top: 0,
      left: 0,
      pointerEvents: 'auto',
      touchAction: 'none',
      ...$attrs.style as Object,
    }"
 >
   <slot v-bind="context" />
</canvas>

then in the sfc template:

<TresCanvas shadows alpha v-slot="{ camera, renderer }">
  <TresPerspectiveCamera :position="[5, 5, 5]" />
  <TresOrbitControls
    v-if="renderer"
    :args="[camera, renderer.domElement]"
  />
</TresCanvas>

Alternative

check the hack in the description

Additional context

related #565

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[andretchen0]

Closed as duplicate. See #572 .