cone change as core feedback mecanics

trail
Fabien Benetou 1 year ago
parent b741848ebb
commit 87407c2552
  1. 26
      index.html
  2. 35
      jxr.js

@ -29,7 +29,7 @@
<!-- still experimenting, see webdav.html --> <!-- still experimenting, see webdav.html -->
<script src='dependencies/webdav.js'></script> <script src='dependencies/webdav.js'></script>
<script src='jxr.js'></script> <script src='jxr.js?12344'></script>
<!-- replacing with local copies as CDNs are like unpkg tend to be slow <!-- 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> <script type="module" src="https://unpkg.com/immers-client/dist/destination.bundle.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script> <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
@ -129,18 +129,18 @@
<!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position <!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position
<a-text target value="jxr qs #rig sa position 0 0 10" position="0 1.55 .5" rotation="0 180 0" scale="0.1 0.1 0.1"></a-text> <a-text target value="jxr qs #rig sa position 0 0 10" position="0 1.55 .5" rotation="0 180 0" scale="0.1 0.1 0.1"></a-text>
--> -->
<a-console position="0 2 -0.8" rotation="-5 0 0" font-size="34" height=1 skip-intro=true></a-console> <a-console position="2 2 0" rotation="0 -45 0" font-size="34" height=1 skip-intro=true></a-console>
<a-entity playground></a-entity> <a-gltf-model hide-on-enter-ar="" visible=false src="../content/room.gltf" position="0 0 0" rotation="0 0 0" ></a-gltf-model>
<a-troika-text value="Biggu's Gate" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="0 2 -0.5" <a-gltf-model hide-on-enter-ar="" src="../content/kitchen.gltf" position=".5 0 0" rotation="0 110 0" ></a-gltf-model>
rotation="25 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #00f"></a-troika-text>
<a-gltf-model hide-on-enter-ar="" src="../content/winterset/Mountains.glb" position="0 0 0" rotation="0 0 0" scale="10 10 10" class="clonableasset"></a-gltf-model> <a-cone changeover="color:red"position="0 0.1 -1.0" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
<a-cone changeover="color:red"position="0 0.1 -1.4" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
<a-gltf-model src="../content/winterset/Crystal.glb" position="-1 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model> <a-cone changeover="color:red"position="0 0.1 -1.8" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
<a-gltf-model id="fish" src="../content/winterset/Fish.glb" position="2 0 -2" rotation="0 0 0" scale=".01 .01 .01" class="clonableasset"></a-gltf-model> <a-cone changeover="color:red"position="0 0.1 -2.2" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
<a-gltf-model id="penguin" src="../content/winterset/Penguin.glb" position="0 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model> <a-cone changeover="color:red"position="0 0.1 -2.6" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
<a-cone changeover="color:red"position="0 0.1 -3.0" color="blue" height=".2" radius-bottom="0.02" radius-top="0"></a-cone>
<a-gltf-model src="../content/winterset/Pinetree.glb" position="0 3 -10" rotation="0 0 0" scale="5 5 5" class="clonableasset"></a-gltf-model> <a-torus position="0 0 -3" arc="180" color="#43A367" radius=".5" scale="1 4 1" height="10" radius-tubular="0.01"></a-torus>
<a-plane hide-on-enter-ar="" scale="50 50 50" rotation="-90 0 0" color="lightblue"></a-plane> <a-plane hide-on-enter-ar="" scale="50 50 50" rotation="-90 0 0" color="lightblue"></a-plane>
</a-scene> </a-scene>

@ -3513,13 +3513,12 @@ AFRAME.registerComponent('unpackable', {
}) })
AFRAME.registerComponent('trail', { AFRAME.registerComponent('trail', {
init: function () { init: function () {
let player = document.getElementById('player') // assuming single player, non networked let player = document.getElementById('player') // assuming single player, non networked
let previousPos let previousPos
setInterval( _ => { setInterval( _ => {
let pos = player.getAttribute('position').clone() let pos = player.getAttribute('position').clone()
pos.y = 1 pos.y = 0
// compare current pos with previous set ones and if below distance threshold, lose points // compare current pos with previous set ones and if below distance threshold, lose points
let hits = Array.from(document.querySelectorAll('.trail')) let hits = Array.from(document.querySelectorAll('.trail'))
.filter( e => e.getAttribute("visible") == true) .filter( e => e.getAttribute("visible") == true)
@ -3532,16 +3531,16 @@ AFRAME.registerComponent('trail', {
} }
if (previousPos && previousPos.distanceTo(pos) < 0.1) return // threshold to avoid cluttering if (previousPos && previousPos.distanceTo(pos) < 0.1) return // threshold to avoid cluttering
let el = document.createElement('a-cylinder') let el = document.createElement('a-cylinder')
el.setAttribute('scale', '.2 2 .2') el.setAttribute('scale', '.2 .2 .2')
el.setAttribute('position', AFRAME.utils.coordinates.stringify( pos ) ) el.setAttribute('position', AFRAME.utils.coordinates.stringify( pos ) )
el.setAttribute('color', 'green') el.setAttribute('color', 'green')
el.setAttribute('opacity', '0.3') el.setAttribute('opacity', '0.03')
el.setAttribute('segments-radial', '6') el.setAttribute('segments-radial', '6')
el.setAttribute('segments-height', '2') el.setAttribute('segments-height', '2')
el.className += 'trail' el.className += 'trail'
this.el.appendChild(el) this.el.appendChild(el)
previousPos = player.getAttribute('position').clone() previousPos = player.getAttribute('position').clone()
previousPos.y = 1 previousPos.y = 0
}, 50) }, 50)
}, },
remove: function () { remove: function () {
@ -3549,6 +3548,32 @@ AFRAME.registerComponent('trail', {
} }
}) })
let changeovercheck
AFRAME.registerComponent('changeover', {
schema: { color : {type: 'string'} },
init: function () {
// (this.el, this.data.content)
if (changeovercheck) return
let player = document.getElementById('player') // assuming single player, non networked
console.log('adding timer')
changeovercheck = setInterval( _ => {
let pos = player.getAttribute('position').clone()
pos.y = 0.1 // hard coded but should be from component element
let hits = Array.from(document.querySelectorAll('[changeover]'))
.filter( e => e.getAttribute("visible") == true)
.map( t => { return { el: t, dist : pos.distanceTo(t.getAttribute("position") ) } })
.filter( t => t.dist < 0.02 )
.sort( (a,b) => a.dist > b.dist)
console.log(hits.length)
if (hits.length>0) {
setFeedbackHUD('touching cone')
console.log('touching cone')
hits[hits.length-1].el.setAttribute('color', 'red')
}
}, 50)
}
})
// used for testing, now that jxr.js is outside of index.html, could consider putting this back in index.html instead to keep behavior one would expect from a library // used for testing, now that jxr.js is outside of index.html, could consider putting this back in index.html instead to keep behavior one would expect from a library
// does indeed create problems, namely other pages relying on it do get this testing behavior // does indeed create problems, namely other pages relying on it do get this testing behavior
AFRAME.registerComponent('startfunctions', { AFRAME.registerComponent('startfunctions', {

Loading…
Cancel
Save