Svelthree

www/src/components/test3D.svelte

@@ -1,70 +1,43 @@
 <script>
   import {
-    CircleBufferGeometry,
-    MeshStandardMaterial,
-    BoxBufferGeometry,
-    DoubleSide,
-  } from "three";
-  import { DEG2RAD } from "three/src/math/MathUtils";
-  import {
-    AmbientLight,
     Canvas,
-    DirectionalLight,
-    Group,
-    HemisphereLight,
-    Mesh,
-    OrbitControls,
+    Scene,
     PerspectiveCamera,
-  } from "@threlte/core";
-  import { spring } from "svelte/motion";
+    DirectionalLight,
+    AmbientLight,
+    BoxBufferGeometry,
+    Mesh,
+    MeshStandardMaterial,
+    WebGLRenderer,
+  } from 'svelthree';
 
-  const scale = spring(1);
+  let cubeGeometry = new BoxBufferGeometry(1, 1, 1);
+  let cubeMaterial = new MeshStandardMaterial();
 </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>
+<Canvas let:sti w={500} h={500}>
 
-    <DirectionalLight shadow position={{ x: 3, y: 10, z: 10 }} />
-    <DirectionalLight position={{ x: -3, y: 10, z: -10 }} intensity={0.2} />
-    <AmbientLight intensity={0.2} />
+  <Scene {sti} let:scene id="scene1" props={{ background: 0xedf2f7 }}>
 
-    <!-- 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>
+    <PerspectiveCamera {scene} id="cam1" pos={[0, 0, 3]} lookAt={[0, 0, 0]} />
+    <AmbientLight {scene} intensity={1.25} />
+    <DirectionalLight {scene} pos={[3, 3, 3]} />
 
-    <!-- Floor -->
     <Mesh
-      receiveShadow
-      rotation={{ x: -90 * (Math.PI / 180) }}
-      geometry={new CircleBufferGeometry(3, 72)}
-      material={new MeshStandardMaterial({
-        side: DoubleSide,
-        color: "white",
-      })}
-    />
-  </Canvas>
-</div>
+      {scene}
+      geometry={cubeGeometry}
+      material={cubeMaterial}
+      mat={{ roughness: 0.5, metalness: 0.5, color: 0xff3e00 }}
+      pos={[0, 0, 0]}
+      rot={[0.5, 0.6, 0]}
+      scale={[1, 1, 1]} />
 
-<style>
-  div {
-    height: 100%;
-    width: 100%;
-  }
-</style>
+  </Scene>
+
+  <WebGLRenderer
+    {sti}
+    sceneId="scene1"
+    camId="cam1"
+    config={{ antialias: true, alpha: true }} />
+
+</Canvas>

www/src/main.ts

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