svelthree sans le svel

www/package.json

@@ -24,7 +24,6 @@
     "svelte": "^3.0.0",
     "svelte-check": "^2.0.0",
     "svelte-preprocess": "^4.0.0",
-    "svelthree": "^0.119.0-5",
     "tslib": "^2.0.0",
     "typescript": "^4.0.0"
   },

www/src/components/test3D.svelte

@@ -1,43 +1,65 @@
-<script>
-  import {
-    Canvas,
-    Scene,
-    PerspectiveCamera,
-    DirectionalLight,
-    AmbientLight,
-    BoxBufferGeometry,
-    Mesh,
-    MeshStandardMaterial,
-    WebGLRenderer,
-  } from 'svelthree';
+<script lang="ts">
+    //import { onMount } from "lifecycle";
+    import { beforeUpdate, afterUpdate } from 'svelte';
+    import * as Three from 'three';
     
-  let cubeGeometry = new BoxBufferGeometry(1, 1, 1);
-  let cubeMaterial = new MeshStandardMaterial();
+
+  let innerWidth: number = 0;
+  let innerHeight: number = 0;
+  
+  let scene: Three.Scene = new Three.Scene();
+  let camera: Three.PerspectiveCamera = new Three.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
+
+  let renderer: Three.WebGLRenderer = new Three.WebGLRenderer();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+	document.body.appendChild(renderer.domElement);
+
+  let box: Three.BoxGeometry = new Three.BoxGeometry(1,1,1);
+  let mat: Three.MeshBasicMaterial = new Three.MeshBasicMaterial({ color: 0x00ff00 });
+  let cube = new Three.Mesh(box, mat);
+
+  scene.add(cube);
+
+  camera.position.z = 5;
+  camera.setViewOffset(window.innerWidth, window.innerHeight, 0, 0, window.innerWidth, window.innerHeight)
+	renderer.setSize(window.innerWidth, window.innerHeight);
+  
+  function animate() {
+			requestAnimationFrame(animate);
+
+			cube.rotation.x += 0.02;
+			cube.rotation.y += 0.02;
+
+			
+			renderer.render(scene, camera);
+		};
+	animate();
+
+  beforeUpdate(() => {
+
+  })
+
+  afterUpdate(() => {
+    camera.setViewOffset(window.innerWidth, window.innerHeight, 0, 0, window.innerWidth, window.innerHeight)
+	  renderer.setSize(window.innerWidth, window.innerHeight);
+  })
 </script>
 
-<Canvas let:sti w={500} h={500}>
+<svelte:window bind:innerWidth bind:innerHeight/>
 
-  <Scene {sti} let:scene id="scene1" props={{ background: 0xedf2f7 }}>
+<style>
+  html,
+  body {
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding: 0;
+  }
 
-    <PerspectiveCamera {scene} id="cam1" pos={[0, 0, 3]} lookAt={[0, 0, 0]} />
-    <AmbientLight {scene} intensity={1.25} />
-    <DirectionalLight {scene} pos={[3, 3, 3]} />
+  body {
+    position: relative;
+    margin: 0;
     
-    <Mesh
-      {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]} />
-
-  </Scene>
-
-  <WebGLRenderer
-    {sti}
-    sceneId="scene1"
-    camId="cam1"
-    config={{ antialias: true, alpha: true }} />
-
-</Canvas>
+    width: 100%;
+    height: 100%;
+  }
+</style>