Spaces:
Running
Running
File size: 1,400 Bytes
3aea7c6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<script lang="ts">
import { T, useLoader } from '@threlte/core';
import type { InteractivityProps } from '@threlte/extras';
import { DoubleSide, type Side } from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
type Props = InteractivityProps & {
filename: string;
color?: string;
scale?: [number, number, number];
position?: [number, number, number];
rotation?: [number, number, number];
castShadow?: boolean;
receiveShadow?: boolean;
opacity?: number;
isInteractive?: boolean;
wireframe?: boolean;
side?: Side;
};
let {
filename,
color = '#ffffff',
scale = [1, 1, 1],
rotation = [0, 0, 0],
position = [0, 0, 0],
opacity = 1.0,
castShadow = true,
receiveShadow = true,
isInteractive = false,
wireframe = false,
side = DoubleSide,
...restProps
}: Props = $props();
const { load } = useLoader(OBJLoader);
// let obj = $state<undefined | Group>();
// const objLoader = new OBJLoader();
// objLoader.load(filename, (data: Group) => {
// obj = data;
// });
</script>
{#await load(filename) then obj}
{@html `<!-- include obj: ${filename} ${scale} -->`}
<T is={obj} {position} {rotation} {scale} {castShadow} {receiveShadow} {side} {...restProps}>
<T.MeshLambertMaterial {color} {opacity} transparent={opacity < 1.0} {wireframe} {side} />
</T>
{/await}
<!-- From https://github.com/brean/urdf-viewer -->
|