main: work in progress [might break]

coderofsalvation · Jun 25, 2024 · 3f37b63 · 3f37b63
1 parent b9ddcba
commit 3f37b63
Show file tree

Hide file tree

Showing 10 changed files with 119 additions and 0 deletions.
diff --git a/example/aframe/export/assets b/example/aframe/export/assets
@@ -0,0 +1 @@
+../../assets
diff --git a/example/aframe/export/dist b/example/aframe/export/dist
@@ -0,0 +1 @@
+../../../dist
diff --git a/example/aframe/sandbox/equirect.jpg → example/aframe/export/equirect.jpg b/example/aframe/sandbox/equirect.jpg → example/aframe/export/equirect.jpg
diff --git a/example/aframe/export/index.glb b/example/aframe/export/index.glb
@@ -0,0 +1 @@
+assets/index.glb
diff --git a/example/aframe/export/index.html b/example/aframe/export/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>XR Fragments aframe exporter</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+    <!-- AFRAME v1.5.0 + extra THREE.js extra loaders --> 
+    <script src="./../../../dist/aframe.min.js"></script> 
+    <script src="./../../../dist/xrfragment.aframe.js"></script>
+
+    <!-- environment component -->
+    <script src="https://unpkg.com/[email protected]/dist/aframe-environment-component.min.js"></script>
+
+    <!-- important: allow touchevents in AR -->
+    <style type="text/css"> canvas.a-dom-overlay:not(.a-no-style) { padding: 0; pointer-events: auto; }</style>
+
+  </head>
+  <body>
+    <a-scene xr-mode-ui="XRMode: xr"  
+             renderer="colorManagement: true"
+             device-orientation-permission-ui
+             light="defaultLightsEnabled: true"
+             xrf>
+
+      <a-entity xrf="#pos=place1" environment>
+
+        <a-entity id="place1">
+          <a-plane position="0 0.01 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
+          <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
+          <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
+          <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
+          <a-box position="0 1.2 -2" depth="0.1" width="1.2" height="0.6" color="#222222" href="#pos=place2" billboard>
+            <a-text value="click me" position="-0.4 0.02 0.1"></a-text>
+          </a-box>
+        </a-entity>
+
+        <a-entity id="place2" position="0 0 3">
+          <a-plane position="0 0.01 0" rotation="-90 0 0" width="4" height="4" color="#FF00FF"></a-plane>
+        </a-entity>
+
+      </a-entity>
+
+      <a-entity id="player" movement-controls touch-controls wasd-controls="fly:false" look-controls="magicWindowTrackingEnabled:true">
+        <a-entity camera="fov:90" position="0 1.6 0" id="camera"></a-entity>
+        <a-entity id="left-hand" hand-tracking-grab-controls="hand:left;modelColor:#cccccc" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor">
+          <a-entity rotation="-35 0 0" position="0 0.1 0" id="navigator"> 
+            <a-entity id="back" xrf-button="label: <; width:0.05; action: history.back()"    position="-0.025 0 0" class="ray"></a-entity>
+            <a-entity id="next" xrf-button="label: >; width:0.05; action: history.forward()" position=" 0.025 0 0" class="ray"></a-entity>
+          </a-entity>
+        </a-entity>
+        <a-entity id="right-hand" hand-tracking-grab-controls="hand:right;modelColor:#cccccc" laser-controls="hand: right" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor" xrf-pinchmove="rig: #player"></a-entity>
+      </a-entity>
+
+    </a-scene>
+
+    <div class="menu">
+      <b>WARNING:</b> this AFRAME-to-Model exporter is very incomplete<br><br>
+      <button onclick="exportModel()">export to 3D model</button>
+    </div>
+
+    <style type="text/css">
+      .menu { position:fixed; width: 300px; height: 90px; background: #000; display: block; top: 0px; left: 0px; padding: 20px; color: #CCC; font-family: Arial; }
+    </style>
+
+    <!-- billboarding component -->
+    <script>
+      AFRAME.registerComponent('billboard', {
+        schema: {
+          target: {type: 'string', default: 'camera'}
+        },
+        init: function () { },
+        update: function () { },
+        tick: function () {
+          const targetEl = document.getElementById(this.data.target).object3D;
+          const el = this.el.object3D;
+          const vec = new THREE.Vector3();
+          targetEl.getWorldDirection(vec);
+          vec.y = 0;
+          vec.add(el.position)
+          el.lookAt(vec);
+        }
+      });
+
+      function exportModel(){
+        function download(dataurl, filename) {
+          var a = document.createElement("a");
+          a.href = URL.createObjectURL( new Blob([dataurl]) );
+          a.setAttribute("download", filename);
+          a.click();
+          return false;
+        }
+        // setup exporters
+        let defaultExporter = THREE.GLTFExporter
+        xrf.loaders['gltf'].exporter    = defaultExporter
+        xrf.loaders['glb'].exporter     = defaultExporter
+        const exporter = new THREE.GLTFExporter() 
+        exporter.parse(
+          xrf.model.scene,
+          function ( glb   ) { download(glb, `index.glb`) },    // ready
+          function ( error ) { console.error(error) },   // error
+          {
+            binary:true, 
+            onlyVisible: false, 
+            animations: xrf.model.animations,
+            includeCustomExtensions: true,
+            trs:true
+          } 
+        );
+      }
+
+    </script>
+
+  </body>
+</html>
diff --git a/example/aframe/export/other.glb b/example/aframe/export/other.glb
@@ -0,0 +1 @@
+../../assets/other.glb
diff --git a/example/aframe/sandbox/arrow.jpg b/example/aframe/sandbox/arrow.jpg
diff --git a/example/aframe/sandbox/assetsfoo.glb b/example/aframe/sandbox/assetsfoo.glb
diff --git a/example/aframe/sandbox/gradient2.png b/example/aframe/sandbox/gradient2.png
diff --git a/example/aframe/sandbox/sky.jpg b/example/aframe/sandbox/sky.jpg