Spaces:
Running
Running
File size: 3,095 Bytes
a296c4d |
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<script lang="ts">
import { createEventDispatcher, tick, onMount } from "svelte";
import { Upload, ModifyUpload } from "@gradio/upload";
import type { FileData } from "@gradio/client";
import { BlockLabel } from "@gradio/atoms";
import { File } from "@gradio/icons";
import { add_new_model, reset_camera_position } from "./utils";
export let value: null | FileData;
export let clear_color: [number, number, number, number] = [0, 0, 0, 0];
export let label = "";
export let show_label: boolean;
export let root: string;
export let i18n: I18nFormatter;
export let zoom_speed = 1;
export let pan_speed = 1;
// alpha, beta, radius
export let camera_position: [number | null, number | null, number | null] = [
null,
null,
null,
];
let mounted = false;
let canvas: HTMLCanvasElement;
let scene: BABYLON.Scene;
let engine: BABYLON.Engine;
function reset_scene(): void {
scene = add_new_model(
canvas,
scene,
engine,
value,
clear_color,
camera_position,
zoom_speed,
pan_speed
);
}
onMount(() => {
if (value != null) {
reset_scene();
}
mounted = true;
});
$: ({ path } = value || {
path: undefined,
});
$: canvas && mounted && path != null && reset_scene();
async function handle_upload({
detail,
}: CustomEvent<FileData>): Promise<void> {
value = detail;
await tick();
reset_scene();
dispatch("change", value);
}
async function handle_clear(): Promise<void> {
if (scene && engine) {
scene.dispose();
engine.dispose();
}
value = null;
await tick();
dispatch("clear");
}
async function handle_undo(): Promise<void> {
reset_camera_position(scene, camera_position, zoom_speed, pan_speed);
}
const dispatch = createEventDispatcher<{
change: FileData | null;
clear: undefined;
drag: boolean;
}>();
let dragging = false;
import BABYLON from "babylonjs";
import BABYLON_LOADERS from "babylonjs-loaders";
import type { I18nFormatter } from "@gradio/utils";
$: {
if (
BABYLON_LOADERS.OBJFileLoader != undefined &&
!BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS
) {
BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
}
}
$: dispatch("drag", dragging);
</script>
<BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
{#if value === null}
<Upload
on:load={handle_upload}
{root}
filetype=".obj, .gltf, .glb"
bind:dragging
>
<slot />
</Upload>
{:else}
<div class="input-model">
<ModifyUpload
undoable
on:clear={handle_clear}
{i18n}
on:undo={handle_undo}
absolute
/>
<canvas bind:this={canvas} />
</div>
{/if}
<style>
.input-model {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: var(--size-full);
height: var(--size-full);
}
canvas {
width: var(--size-full);
height: var(--size-full);
object-fit: contain;
overflow: hidden;
}
</style>
|