It works because aframe MVP

www/src/components/ARTest.svelte

@@ -1,192 +1,22 @@
-<script lang="ts">
+<script context="module">
-  import { beforeUpdate, afterUpdate, onMount, onDestroy } from 'svelte';
+  import 'aframe';
-  //import * as THREE from 'three';
+  import '@ar-js-org/ar.js/aframe/build/aframe-ar';
-  import * as THREE from '@ar-js-org/ar.js/node_modules/three/build/three';
-  import * as THREEx from '@ar-js-org/ar.js/three.js/build/ar-threex';
-  //import * as ARFr from "@ar-js-org/ar.js/aframe/build/aframe-ar-nft";
-
-  let container: HTMLElement;
-
-  //////////////////////////////////////////////////////////////////////////////////
-  //		Init
-  //////////////////////////////////////////////////////////////////////////////////
-
-  var renderer: THREE.WebGLRenderer = new THREE.WebGLRenderer({
-    antialias: true,
-    alpha: true,
-    precision: 'mediump',
-  });
-
-  var clock: THREE.Clock = new THREE.Clock();
-
-  // init scene and camera
-  var scene: THREE.Scene = new THREE.Scene();
-
-  //////////////////////////////////////////////////////////////////////////////////
-  //		Initialize a basic camera
-  //////////////////////////////////////////////////////////////////////////////////
-
-  // Create a camera
-  var camera: THREE.Camera = new THREE.Camera();
-  scene.add(camera);
-
-  var light: THREE.AmbientLight = new THREE.AmbientLight(0xffffff);
-  scene.add(light);
-
-  var markerRoot: THREE.Group = new THREE.Group();
-  scene.add(markerRoot);
-
-  ////////////////////////////////////////////////////////////////////////////////
-  //          handle arToolkitSource
-  ////////////////////////////////////////////////////////////////////////////////
-
-  var arToolkitSource = new THREEx.ArToolkitSource({
-    sourceType: 'webcam',
-    sourceWidth: 1920,
-    sourceHeight: 1080,
-  });
-
-  arToolkitSource.init(function onReady() {
-    // use a resize to fullscreen mobile devices
-    setTimeout(function () {
-      onResize();
-    }, 1000);
-  });
-
-  // handle resize
-  window.addEventListener('resize', function () {
-    onResize();
-  });
-
-  // listener for end loading of NFT marker
-  window.addEventListener('arjs-nft-loaded', function (ev) {
-    console.log(ev);
-  });
-
-  function onResize() {
-    arToolkitSource.onResizeElement();
-    arToolkitSource.copyElementSizeTo(renderer.domElement);
-    if (arToolkitContext.arController !== null) {
-      arToolkitSource.copyElementSizeTo(arToolkitContext.arController.canvas);
-    }
-  }
-
-  ////////////////////////////////////////////////////////////////////////////////
-  //          initialize arToolkitContext
-  ////////////////////////////////////////////////////////////////////////////////
-
-  // create atToolkitContext
-  var arToolkitContext = new THREEx.ArToolkitContext(
-    {
-      detectionMode: 'mono',
-      canvasWidth: 1920,
-      canvasHeight: 1080,
-    },
-    {
-      sourceWidth: 1920,
-      sourceHeight: 1080,
-    },
-  );
-
-  // initialize it
-  arToolkitContext.init(function onCompleted() {
-    // copy projection matrix to camera
-    camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
-  });
-  console.log(arToolkitContext);
-
-  ////////////////////////////////////////////////////////////////////////////////
-  //          Create a ArMarkerControls
-  ////////////////////////////////////////////////////////////////////////////////
-
-  // MARKER
-  var arMarkerControls = new THREEx.ArMarkerControls(
-    arToolkitContext,
-    markerRoot,
-    {
-      type: 'pattern',
-      patternUrl: '/patterns/patt.hiro',
-    },
-  );
-
-  scene.visible = false;
-
-  var root = new THREE.Object3D();
-  scene.add(root);
-
-  //////////////////////////////////////////////////////////////////////////////////
-  //		add an object in the scene
-  //////////////////////////////////////////////////////////////////////////////////
-
-  var threeGLTFLoader = new THREE.GLTFLoader();
-  var model;
-
-  threeGLTFLoader.load('/models/dingus_the_cat', function (gltf) {
-    model = gltf.scene.children[0];
-    model.name = 'dingus';
-
-    var animation = gltf.animations[0];
-    var mixer = new THREE.AnimationMixer(model);
-    var mixers = [mixer];
-    //
-    var action = mixer.clipAction(animation);
-    action.play();
-
-    root.matrixAutoUpdate = false;
-    root.add(model);
-
-    model.position.z = -100;
-    //model.position.z = 100;
-
-    /*
-    window.addEventListener('arjs-nft-init-data', function (nft) {
-      console.log(nft);
-      var msg = nft.detail;
-      model.position.y = ((msg.height / msg.dpi) * 2.54 * 10) / 2.0; //y axis?
-      model.position.x = ((msg.width / msg.dpi) * 2.54 * 10) / 2.0; //x axis?
-    });*/
-
-    //////////////////////////////////////////////////////////////////////////////////
-    //		render the whole thing on the page
-    //////////////////////////////////////////////////////////////////////////////////
-
-    var animate = function () {
-      requestAnimationFrame(animate);
-
-      if (mixers.length > 0) {
-        for (var i = 0; i < mixers.length; i++) {
-          mixers[i].update(clock.getDelta());
-        }
-      }
-
-      if (!arToolkitSource.ready) {
-        return;
-      }
-
-      arToolkitContext.update(arToolkitSource.domElement);
-
-      // update scene.visible if the marker is seen
-      scene.visible = camera.visible;
-
-      renderer.render(scene, camera);
-    };
-
-    requestAnimationFrame(animate);
-  });
-  onMount(() => {
-    renderer.setPixelRatio(window.devicePixelRatio);
-
-    renderer.setClearColor(new THREE.Color('lightgrey'), 0);
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    renderer.domElement.style.position = 'absolute';
-    renderer.domElement.style.top = '0px';
-    renderer.domElement.style.left = '0px';
-    container.appendChild(renderer.domElement);
-  });
 </script>
 
-<div class="Container" bind:this={container} />
+<script>
-<canvas
+  let Angle = 45;
-  id="CanvasAR"
+  setInterval(() => {
-  style="background-color: black; width: 100%; height: 100%"
+    Angle++;
+  }, 100);
+</script>
+
+<a-scene embedded arjs>
+  <a-marker preset="hiro">
+    <a-entity
+      position="0 0 0"
+      scale="0.10 0.10 0.10"
+      gltf-model="/models/dingus_the_cat.glb"
     />
+  </a-marker>
+  <a-entity camera />
+</a-scene>

www/src/pages/ViewAR.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import View3D from '../components/3DHandler.svelte';
-  import Camera from '../components/CameraHandler.svelte';
   import NavBar from '../components/NavBar.svelte';
   import ARTest from '../components/ARTest.svelte';