Rich-Harris / svelte-cubed

Svelte ❤️ Three
svelte-cubed.vercel.app
MIT License
1.19k stars 76 forks source link

I can't get it #65

Open Etilem opened 1 year ago

Etilem commented 1 year ago

I tried out to start animations on my GLTF import with no luck :

App.svelte

<script>
    import * as SC from 'svelte-cubed';
    import Mavic from './Mavic.svelte';
</script>

​<SC.Canvas antialias>
    <Mavic url={'/assets/scene.glb'} size={0.05} />
    <SC.PerspectiveCamera fov={50} near={0.1} far={10} position={[0, 0, 5]} />
    <SC.OrbitControls />
    <SC.AmbientLight intensity={1} />
    <SC.DirectionalLight color={0xffffff} intensity={2} position={[0, 0, 4]} />
    <SC.DirectionalLight color={0xffffff} intensity={2} position={[0, 0, -4]} />
    <SC.DirectionalLight color={0xffffff} intensity={2} position={[0, 4, 0]} />
    <SC.DirectionalLight color={0xffffff} intensity={2} position={[0, -4, 0]} />
</SC.Canvas>

Mavic.svelte

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

    export let url = '/assets/scene.glb';
    export let size = 1;
    /**
     * @type {import("three/examples/jsm/loaders/GLTFLoader.js").GLTF | null}
     */
    let model;

    function loadGLTF() {
        const loader = new GLTFLoader();
        return loader.loadAsync(url);
    }

    onMount(() => {
        loadGLTF()
            .then((_model) => (model = _model))
            .catch((err) => {
                console.log(err.message);
            });
    });

    let time = 0;
    const clock = new THREE.Clock();
    SC.onFrame(() => {
        let delta = clock.getDelta();
        time += 1 * delta;
    });
</script>

{#if model}
    <SC.Primitive object={model.scene} scale={[size, size, size]}>
        <SC.Animation clip={model.animations[0]} {time} />
    </SC.Primitive>
{/if}

it says : Uncaught (in promise) TypeError: action is undefined

what's wrong ???