phsics

index.html

@@ -23,6 +23,7 @@
     <!-- still experimenting, see webdav.html -->
     <script src='dependencies/webdav.js'></script> 
     <script src="https://unpkg.com/shiki"></script>
+    <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-physics-system@v4.2.2/dist/aframe-physics-system.min.js"></script>
 
     <!-- replacing with local copies as CDNs are like unpkg tend to be slow
     <script type="module" src="https://unpkg.com/immers-client/dist/destination.bundle.js"></script>
@@ -2352,6 +2353,21 @@ function highlight(code = `console.log("Here is your code."); var x = 5;`, langu
 // code = 'let x = 42;'; el = addNewNote(code); el.setAttribute("troika-text", {colorRanges: highlight(code)})
 // color scheme not compatible with threejs
 
+// physics should become static when target picked then dynamic after
+AFRAME.registerComponent('dynamic-unless-picked', {
+	init: function(){
+		let el = this.el
+		el.setAttribute('dynamic-body', "")
+		this.el.addEventListener('picked', function (event) {
+			el.setAttribute('static-body', "")
+		})
+		this.el.addEventListener('released', function (event) {
+			el.setAttribute('dynamic-body', "")
+		})
+	}
+	// should unregister on remove
+})
+
 </script>
 <div id="observablehq-key">
     <div id="observablehq-viewof-offsetExample-ab4c1560"></div>
@@ -2359,7 +2375,7 @@ function highlight(code = `console.log("Here is your code."); var x = 5;`, langu
 </div>
  <button id=mainbutton style="z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick="startExperience()">Start the experience (hand tracking recommended)</button>
 
-<a-scene cursor="rayOrigin: mouse" raycaster="objects: [html]; interval:100;" adjust-height-in-vr
+<a-scene physics="debug:true" cursor="rayOrigin: mouse" raycaster="objects: [html]; interval:100;" adjust-height-in-vr
 	toolbox disable-components-via-url enable-components-via-url NOcommands-from-external-json keyboard >
 	<!-- screenstack dynamic-view selectionboxonpinches glossary timeline issues fot
 	networked-scene="serverURL: https://naf.benetou.fr/; adapter: easyrtc; audio: true;"
@@ -2383,6 +2399,16 @@ function highlight(code = `console.log("Here is your code."); var x = 5;`, langu
 		<a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity>
       </a-entity>
 
+  <!-- Floor -->
+  <a-plane rotation="-90 0 0" scale="5 5 5" position="0 1 0" opacity=.5 static-body></a-plane>
+
+  <!-- Immovable box -->
+  <a-box static-body position="0 0.5 -5" width="3" height="1" depth="1"></a-box>
+
+  <!-- Dynamic box -->
+  <a-box dynamic-unless-picked position="0 1.4 -.3" target scale=".1 .1 .1"></a-box>
+  <a-box position=".3 1.2 -.3" target scale=".1 .1 .1"></a-box>
+
       <a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink"></a-box>
       <!-- could attach functions here... BUT then they have to be activable with the other hand! -->
       <!-- visual reminders of shortcuts, a poster on the far left/right of keyboard shortcuts -->