How to bind to <sc.canvas>?

[Vanderscycle]

Hi Rich,

Thank you for everything svelte, I am really enjoying the integration of svelte and three together and can't wait to use svelte-cubed more indepth.

The old way of using Three or any library using three under the hood was to bind a div/canvas to the graph. I haven't been successful in doing so using svelte cubed.

<script lang="ts">
  import ForceGraph3D from "3d-force-graph";
  import * as SC from "svelte-cubed";

  let canvasDom: HTMLElement;

  // Random tree
  const N = 300;
 $: if (canvasDom) {
    Graph.graphData({
      nodes: [...Array(N).keys()].map((i) => ({ id: i })),
      links: [...Array(N).keys()]
        .filter((id) => id)
        .map((id) => ({
          source: id,
          target: Math.round(Math.random() * (id - 1)),
        })),
    });
  }
</script>

<template>
  <SC.Canvas bind:this={canvasDom} />
  <!-- <div class="w-screen h-screen" bind:this={canvasDom} /> -->
</template>

Thank you for your time

[DefinitelyMaybe]

Not entirely sure on this one but perhaps setting up the random tree via the html part of the svelte component using an each block might get you where you want to go

[Vanderscycle]

@DefinitelyMaybe

Thank you for replying, but I do not understand how I can use each in this scenario because I will end up with two canvas (one for Svelte cubed and one for Force3dGraph) and that isn't what I want to accomplish.

With Force 3d, I can add Threejs object to the scene and we can see that under the hood it uses Threejs. I was hoping to bind ForceGraph3d "canvas" to <SC.Canvas/> and then change anything Threejs related within the confines of Svelte cubed.

At compile time I saw that <SC.Canvas/> becomes a normal HTML canvas.

[DefinitelyMaybe]

Ah, I had no idea what 3d-force-graph was all about. Don't mind me.

[sebbasim]

The binding to SC.Canvas works, right? As in, your if statement is getting triggered.
Also, Graph doesn't seem to exist.

[Vanderscycle]

@sebbasim I created a repo to demonstrate my issue.