Rich-Harris/svelte-cubed

How could we include a GLB file in a svelte-cubed scene?

brianorwhatever opened this issue · 4 comments

Can someone point me in the right direction?

Same here, do you have any update on this? (loading any 3d models in general into svelte cubed)

unfortunately, I have not.

Here's an example:

https://github.com/gongbughim/blog/blob/main/src/components/SvelteCubedExample2.svelte

You can see it work here:

https://gbg.pages.dev/posts/svelte-cubed

image

See also #41 to make a model receives and casts shadow.

@brianorwhatever and @andriusmv for sure. You use the standard GLTFLoader loader from threejs, then pass your model into the `<SC.Primitive object={model.scene} /> like so:

<script>
  import * as THREE from "three";
  import * as SC from "svelte-cubed";
  import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
  import { onMount } from "svelte";

  const modelURL = "https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/models/gltf/RobotExpressive/RobotExpressive.glb";
  let robot = null;
	
  function loadModel() {
    const loader = new GLTFLoader();
    return loader.loadAsync(modelURL)
  }

  onMount(() => {
    loadModel().then(model => robot = model);
  })
	
</script>

  {#if robot}
    <SC.Primitive object={robot.scene} />
  {/if}

Edit: removed ugly tabs