replace all shelves with 3d models

src/lib/3dmap/objectmodel.svelte

@@ -1,25 +1,15 @@
 <script context="module">
-	import { useGltf } from '@threlte/extras';
-	import { base } from '$app/paths';
-
-	// This is a simple cache that prevents the same model from being loaded multiple times.
-	let model_cache = {};
-	function getModel(filename) {
-		if (filename in model_cache) {
-			return model_cache[filename];
-		}
-
-		let model = useGltf(base + '/models/' + filename);
-		model_cache[filename] = model;
-		return model;
+	function randomSalt() {
+		return Math.random().toString(36).substring(2, 15);
 	}
 </script>
 
 <script>
 	import { objectsData, itemData, currentItem } from '$lib/appstore.js';
 	import ProductCard from '$lib/productcard.svelte';
 	import { T } from '@threlte/core';
-	import { HTML, Text } from '@threlte/extras';
+	import { GLTF, HTML, Text } from '@threlte/extras';
+	import { base } from '$app/paths';
 
 	export let id;
 	export let cardRotation = 0;
@@ -67,12 +57,14 @@
 
 	<!-- Display each part of the model. -->
 	{#if object.model}
-		{@const model = getModel(object.model)}
-		{#await model then model}
-			{#each Object.keys(model.nodes) as node (node)}
-				<T is={model.nodes[node]} castShadow />
-			{/each}
-		{/await}
+		<!-- The randomSalt is used to prevent the GLTF renderer from caching models. This causes
+	     them to not render (or rather, to be moved wherever the model is loaded last.
+		 It's pretty weird). -->
+		<GLTF
+			castShadow
+			receiveShadow
+			url={base + '/models/' + object.model + '?salt=' + randomSalt()}
+		/>
 	{:else}
 		<T.BoxGeometry args={[1, 2, 2]}></T.BoxGeometry>
 		<T.MeshStandardMaterial color="white" />

src/routes/app/objects.json

@@ -1,13 +1,32 @@
 {
 	"0": {
-		"pos": [4.5, 0, 1],
+		"pos": [4.5, 0, 2],
 		"rot": -90,
 		"scale": 0.5,
 		"name": "Dior",
 		"model": "MAKEUP_SHELF.glb",
 		"card_offset": [0, 7, 0]
 	},
-	"2": { "pos": [-4, 1, -4], "rot": 90, "name": "Men perfume", "card_offset": [0, 2.5, 0] },
-	"3": { "pos": [-4.5, 1, -2.5], "name": "Next Big Thing", "card_offset": [0, 2.5, 0] },
-	"4": { "pos": [2, 1, -2], "name": "Beauty Hub", "card_offset": [0, 2.5, 0] }
+	"2": {
+		"pos": [-4, 0, -4],
+		"rot": 90,
+		"scale": 0.5,
+		"name": "Men perfume",
+		"model": "MAKEUP_SHELF.glb",
+		"card_offset": [0, 7, 0]
+	},
+	"3": {
+		"pos": [-3.6, 0, 2],
+		"scale": 0.5,
+		"name": "Next Big Thing",
+		"model": "MAKEUP_SHELF.glb",
+		"card_offset": [0, 7, 0]
+	},
+	"4": {
+		"pos": [3, 0, -2],
+		"scale": 0.5,
+		"name": "Beauty Hub",
+		"model": "MAKEUP_SHELF.glb",
+		"card_offset": [0, 7, 0]
+	}
 }