test3D

www/src/App.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	export let name: string;
+	// export let name: string;
+	import Test3D from "./components/test3D.svelte";
 </script>
 
 <main>
-	<h1>Hello {name}!</h1>
-	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+	<Test3D></Test3D>
 </main>
 
 <style>

www/src/components/test3D.svelte

@@ -0,0 +1,70 @@
+<script>
+  import {
+    CircleBufferGeometry,
+    MeshStandardMaterial,
+    BoxBufferGeometry,
+    DoubleSide,
+  } from "three";
+  import { DEG2RAD } from "three/src/math/MathUtils";
+  import {
+    AmbientLight,
+    Canvas,
+    DirectionalLight,
+    Group,
+    HemisphereLight,
+    Mesh,
+    OrbitControls,
+    PerspectiveCamera,
+  } from "@threlte/core";
+  import { spring } from "svelte/motion";
+
+  const scale = spring(1);
+</script>
+
+<div>
+  <Canvas>
+    <PerspectiveCamera position={{ x: 10, y: 10, z: 10 }} fov={24}>
+      <OrbitControls
+        maxPolarAngle={DEG2RAD * 80}
+        autoRotate={false}
+        enableZoom={false}
+        target={{ y: 0.5 }}
+      />
+    </PerspectiveCamera>
+
+    <DirectionalLight shadow position={{ x: 3, y: 10, z: 10 }} />
+    <DirectionalLight position={{ x: -3, y: 10, z: -10 }} intensity={0.2} />
+    <AmbientLight intensity={0.2} />
+
+    <!-- Cube -->
+    <Group scale={$scale}>
+      <Mesh
+        interactive
+        on:pointerenter={() => ($scale = 2)}
+        on:pointerleave={() => ($scale = 1)}
+        position={{ y: 0.5 }}
+        castShadow
+        geometry={new BoxBufferGeometry(1, 1, 1)}
+        material={new MeshStandardMaterial({ color: "#333333" })}
+      />
+    </Group>
+
+    <!-- Floor -->
+    <Mesh
+      receiveShadow
+      rotation={{ x: -90 * (Math.PI / 180) }}
+      geometry={new CircleBufferGeometry(3, 72)}
+      material={new MeshStandardMaterial({
+        side: DoubleSide,
+        color: "white",
+      })}
+    />
+  </Canvas>
+</div>
+
+<style>
+  div {
+    height: 100%;
+    width: 100%;
+  }
+</style>

www/src/main.ts

@@ -2,9 +2,9 @@ import App from './App.svelte';
 
 const app = new App({
   target: document.body,
-  props: {
-    name: 'tout tout le monde'
-  }
+  // props: {
+  //   name: 'tout tout le monde'
+  // }
 });
 
 export default app;