|
|
|
|
@ -17,3 +17,57 @@ In order to have a better view of the different features accross branches see ht |
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
First communicated on https://twitter.com/utopiah/status/1531188862415929344 as way to work on (WebXR) code during a flight. |
|
|
|
|
|
|
|
|
|
!Minimalist example |
|
|
|
|
|
|
|
|
|
```html |
|
|
|
|
<!DOCTYPE html> |
|
|
|
|
<html lang="en"> |
|
|
|
|
<head> |
|
|
|
|
<meta charset="utf-8" /> |
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
|
|
<title>JXR minimalist template</title> |
|
|
|
|
|
|
|
|
|
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script> |
|
|
|
|
<script src="https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js"></script> |
|
|
|
|
<script src="https://cdn.jsdelivr.net/gh/kylebakerio/a-console@1.0.2/a-console.js"></script> |
|
|
|
|
|
|
|
|
|
<script src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/jxr.js"></script> |
|
|
|
|
<!-- use to define targets and left/right pinch interactions, respectively execute code and move targets --> |
|
|
|
|
</head> |
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
|
<div style="position:fixed;z-index:1; top: 0%; left: 0%; border-bottom: 70px solid transparent; border-left: 70px solid #eee;"> |
|
|
|
|
<a href="https://git.benetou.fr/utopiah/text-code-xr-engine/issues/"> |
|
|
|
|
<img style="position:fixed;left:10px;" title="code repository" |
|
|
|
|
src="https://fabien.benetou.fr/pub/home/future_of_text_demo/engine/gitea_logo.svg"> |
|
|
|
|
</a> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<button id="mainbutton" style="display:none; 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> |
|
|
|
|
<a-entity id="rig"> |
|
|
|
|
<a-entity id="player" |
|
|
|
|
hud camera look-controls wasd-controls waistattach="target: .movebypinch" position="0 1.6 0"></a-entity> |
|
|
|
|
<a-entity id="rightHand" pinchprimary hand-tracking-controls="hand: right;"></a-entity> |
|
|
|
|
<a-entity id="leftHand" pinchsecondary wristattachsecondary="target: #box" hand-tracking-controls="hand: left;"></a-entity> |
|
|
|
|
</a-entity> |
|
|
|
|
|
|
|
|
|
<a-troika-text value="SpaSca : Spatial Scaffolding" anchor="left" outline-width="5%" font="https://fabien.benetou.fr/pub/home/future_of_text_demo/content/ChakraPetch-Regular.ttf" position="-5.26197 6.54224 -1.81284" |
|
|
|
|
scale="4 4 5" rotation="90 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #c061cb"></a-troika-text> |
|
|
|
|
<a-sky hide-on-enter-ar color="black"></a-sky> |
|
|
|
|
|
|
|
|
|
<a-entity hide-on-enter-ar="" id="environmentsky" class="hidableenvironment" ></a-entity> |
|
|
|
|
<a-troika-text anchor="left" target value="instructions : \n--right pinch to move\n--left pinch to execute" position="0 0.65 -0.2" scale="0.1 0.1 0.1"></a-troika-text> |
|
|
|
|
|
|
|
|
|
<a-troika-text anchor=left target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.1" scale="0.1 0.1 0.1"></a-troika-text> |
|
|
|
|
<a-troika-text anchor=left target id="makeAnchorsVisibleOnTargets" value="jxr makeAnchorsVisibleOnTargets()" position="0 1.05 -0.1" scale="0.1 0.1 0.1"></a-troika-text> |
|
|
|
|
|
|
|
|
|
<a-console position="0 1.1 -0.8" rotation="-45 0 0" font-size="34" height="0.5" skip-intro="true"></a-console> |
|
|
|
|
|
|
|
|
|
</a-scene> |
|
|
|
|
|
|
|
|
|
</body> |
|
|
|
|
</html> |
|
|
|
|
``` |
|
|
|
|
|
