Add shelf text (#39)

* add the base into the scene

* start placing things

* all shelves

* update product card appearance

* fix camera orientation

* fix camer

* put items in objects

* fix product cards

* fix highlights

* add text

* merge

* update label opacity

src/lib/3dmap/labels.json

@@ -0,0 +1,95 @@
+[
+	{
+		"text": "Parfum Femmes",
+		"position": [-65, 15, -28],
+		"rotation": [-1.57, 0, 1.57],
+		"fontSize": 6
+	},
+	{
+		"text": "Parfum Hommes",
+		"position": [66, 15, -80],
+		"rotation": [-1.57, 0, -1.57],
+		"fontSize": 6
+	},
+	{
+		"text": "Too Faced",
+		"position": [-20, 8, -34]
+	},
+	{
+		"text": "Huda Beauty",
+		"position": [-20, 8, -28]
+	},
+	{
+		"text": "Rare Beauty",
+		"position": [-20, 8, -28],
+		"rotation": [-1.57, 0, 1.57],
+		"fontSize": 2
+	},
+	{
+		"text": "Beauty\nHub",
+		"position": [-22, 12, -45]
+	},
+	{
+		"text": "Tarte",
+		"position": [-45, 8, -66],
+		"rotation": [-1.57, 0, 1.57],
+		"fontSize": 2
+	},
+	{
+		"text": "Dior",
+		"position": [-25, 8, -64],
+		"fontSize": 6
+	},
+	{
+		"text": "Fenty Beauty",
+		"position": [-18, 8, -62],
+		"rotation": [-1.57, 0, 1.57],
+		"fontSize": 2
+	},
+	{
+		"text": "Coffrets\nen promo",
+		"position": [-21, 8, -80],
+		"rotation": [-1.57, 0, 1.57],
+		"fontSize": 3
+	},
+	{
+		"text": "Sephora Collection",
+		"position": [-13, 8, -105],
+		"fontSize": 4
+	},
+	{
+		"text": "Clarins",
+		"position": [25, 8, -15]
+	},
+	{
+		"text": "Skincare",
+		"position": [36, 8, -32]
+	},
+	{
+		"text": "Beauty\nHub",
+		"position": [30, 12, -45]
+	},
+	{
+		"text": "Sephora",
+		"position": [41, 8, -64],
+		"fontSize": 5
+	},
+	{
+		"text": "Hot on\nsocial media",
+		"position": [41, 8, -80],
+		"fontSize": 4
+	},
+	{
+		"text": "Séphora",
+		"position": [15, 30, 30],
+		"rotation": [0, 3.14, 0],
+		"fontSize": 8,
+		"color": "gray"
+	},
+	{
+		"text": "Entrance",
+		"position": [15, 0, -110],
+		"fontSize": 8,
+		"color": "gray"
+	}
+]

src/lib/3dmap/scene.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { GLTF, interactivity } from '@threlte/extras';
+	import { GLTF, interactivity, Text } from '@threlte/extras';
 	import { T } from '@threlte/core';
 	import CameraControls from './cameracontrols.svelte';
 	import {
@@ -13,6 +13,7 @@
 	import ObjectModel from './objectmodel.svelte';
 	import { onMount } from 'svelte';
 	import { base } from '$app/paths';
+	import labelsList from './labels.json';
 
 	let objects = $objectsData;
 	let categories = $categoryData;
@@ -139,3 +140,14 @@
 
 <!-- Floor -->
 <GLTF url={base + '/models/base.glb'} rotation={[0, 1.57, 0]} />
+
+<!-- Labels -->
+{#each labelsList as label}
+	{@const text = label.text || ''}
+	{@const fontSize = label.fontSize || 3}
+	{@const position = label.position || [0, 20, 0]}
+	{@const scale = label.scale || [1, 1, 1]}
+	{@const color = label.color || 'black'}
+	{@const rotation = label.rotation || [-1.57, 0, Math.PI]}
+	<Text {text} {fontSize} {position} {scale} {color} {rotation} fillOpacity={0.25} />
+{/each}