How could we include a GLB file in a svelte-cubed scene?
brianorwhatever opened this issue · 4 comments
brianorwhatever commented
Can someone point me in the right direction?
andriusmv commented
Same here, do you have any update on this? (loading any 3d models in general into svelte cubed)
brianorwhatever commented
unfortunately, I have not.
gongbughim commented
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
See also #41 to make a model receives and casts shadow.
AlexWarnes commented
@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