You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
7.0 KiB
151 lines
7.0 KiB
5 years ago
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Think + Relax space by Iterative Explorations</title>
|
||
|
|
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
|
||
|
|
<script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
|
||
|
|
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v4.1.2/dist/aframe-extras.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/super-hands@3.0.0/dist/super-hands.min.js"></script>
|
||
|
|
<script src="pimvrhelpers.js"></script>
|
||
|
|
</head>
|
||
|
|
<script>
|
||
|
|
// could add an in VR edit mode for the categories, to position them, name them, etc
|
||
|
|
// should be mostly for adjustments
|
||
|
|
var timer = AFRAME.utils.getUrlParameter('timer')
|
||
|
|
if (!timer) timer = 300 //5min
|
||
|
|
|
||
|
|
function saveNewItemsPosition(){
|
||
|
|
var selector = ".notes";
|
||
|
|
var pos = ""
|
||
|
|
document.querySelectorAll(selector).forEach(
|
||
|
|
e => pos += "\n" + AFRAME.utils.coordinates.stringify( e.getAttribute("position") )
|
||
|
|
)
|
||
|
|
pimvrSaveRemote("WeWorkTest", pos) // from pimvrhelpers.js
|
||
|
|
// should be saved by username by space
|
||
|
|
// could be pointed at from the database file (thus having multiple storages)
|
||
|
|
}
|
||
|
|
|
||
|
|
AFRAME.registerComponent("watch", {
|
||
|
|
init: function() {
|
||
|
|
document.querySelector("#timer").setAttribute("text","value:"+timer)
|
||
|
|
this.tick = AFRAME.utils.throttleTick(this.tick, 1000, this);
|
||
|
|
// details https://aframe.io/docs/1.0.0/core/utils.html#aframe-utils-throttle-function-minimuminterval-optionalcontext
|
||
|
|
},
|
||
|
|
|
||
|
|
tick: function (t, dt) {
|
||
|
|
var time = Number( document.querySelector("#timer").getAttribute("text").value )
|
||
|
|
time--
|
||
|
|
document.querySelector("#timer").setAttribute("text","value:"+(time))
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
AFRAME.registerComponent("relaxing-introduction", {
|
||
|
|
init: function() {
|
||
|
|
// get in flow state
|
||
|
|
// for now controlled just with AFrame animation
|
||
|
|
// cf https://aframe.io/docs/1.0.0/components/animation.html
|
||
|
|
|
||
|
|
setTimeout(function(){
|
||
|
|
for (var note of document.querySelectorAll(".notes")){ note.emit("fadein") }
|
||
|
|
}, 10 * 1000) // arbitrary 10s, should be instead after the introduction is finished
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
AFRAME.registerComponent("decompression-conclusion", {
|
||
|
|
init: function() {
|
||
|
|
// cf PoC at 2017 W3C web authoring workshop with Roland Dubois
|
||
|
|
setTimeout(function(){
|
||
|
|
var intructions = document.querySelector("#instructions")
|
||
|
|
instructions.setAttribute("position", "-1 1.5 -1") // assumes the user is roughtly centered... could force on camera instead
|
||
|
|
instructions.setAttribute("text", "value", "Your session will end soon\n\nVisit https://learnWebVR.xyz/flat.html\n\nto work outside of VR.")
|
||
|
|
instructions.setAttribute("opacity", "1") // could be animated instead
|
||
|
|
|
||
|
|
console.log("X min voice over and notes fade-out with contextual information (time, weather, etc)")
|
||
|
|
|
||
|
|
document.querySelector("[environment]").setAttribute("environment", "preset:checkerboard")
|
||
|
|
}, timer * 1000);
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
AFRAME.registerComponent("environment-by-url", {
|
||
|
|
schema: {},
|
||
|
|
init: function() {
|
||
|
|
var environment = AFRAME.utils.getUrlParameter('environment')
|
||
|
|
if (environment) document.querySelector("[environment]").setAttribute("environment", "preset:" + environment)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
AFRAME.registerComponent("photo-importer", {
|
||
|
|
schema: {},
|
||
|
|
init: function() {
|
||
|
|
var baseURL = "setup/"
|
||
|
|
var images = AFRAME.utils.getUrlParameter('customimages').split(',');
|
||
|
|
if (images.length == 1) window.location = baseURL; // no images? must be configured first
|
||
|
|
// could also display a tutorial instead
|
||
|
|
var i=1
|
||
|
|
for (var image of images){
|
||
|
|
if (image){
|
||
|
|
var id = "placeholder"+i
|
||
|
|
var placeholder = document.querySelector("#"+id)
|
||
|
|
if (!placeholder){
|
||
|
|
// TODO somehow not interactable anymore?!
|
||
|
|
// had a similar silly issue before but can't recall how I fixed it :(
|
||
|
|
// something basic about entities or hierarchy...
|
||
|
|
placeholder = document.createElement("a-box")
|
||
|
|
placeholder.id = id
|
||
|
|
placeholder.setAttribute("material", "shader:flat")
|
||
|
|
placeholder.setAttribute("hoverable", "")
|
||
|
|
placeholder.setAttribute("grabbable", "")
|
||
|
|
placeholder.setAttribute("draggable", "")
|
||
|
|
placeholder.setAttribute("dropppable", "")
|
||
|
|
// somehow does appear visually correct but are NOT interactable!
|
||
|
|
placeholder.setAttribute("position", "" + i/1.5-1.5 + " 1.5 -0.7")
|
||
|
|
placeholder.setAttribute("scale", "0.5 0.3 0.01")
|
||
|
|
// assume 1 * 1.5 photo ratio (landscape)
|
||
|
|
AFRAME.scenes[0].appendChild(placeholder)
|
||
|
|
}
|
||
|
|
placeholder.className += "notes"
|
||
|
|
placeholder.setAttribute("opacity", "0")
|
||
|
|
placeholder.setAttribute("animation", "property: components.material.material.opacity; to: 1; dur: 1500; easing: linear; startEvents: fadein;")
|
||
|
|
placeholder.setAttribute("src", baseURL+image)
|
||
|
|
i++
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<body>
|
||
|
|
<a-scene photo-importer environment-by-url relaxing-introduction decompression-conclusion>
|
||
|
|
<a-entity environment="preset: forest;"></a-entity>
|
||
|
|
|
||
|
|
<a-entity sphere-collider="objects: a-box" super-hands hand-controls="left"></a-entity>
|
||
|
|
<a-entity sphere-collider="objects: a-box" super-hands hand-controls="right"></a-entity>
|
||
|
|
|
||
|
|
<!-- could be wrist watch as I've done via Twitter years ago -->
|
||
|
|
<a-text watch id="timer" rotation="180 0 180" position="0 1 2" value="time"></a-text>
|
||
|
|
|
||
|
|
<a-text id="instructions" position="-1 1.5 -0.65" value="welcome to your\n\nthink+relax space" opacity="0"
|
||
|
|
animation__fadein="property: components.text.material.uniforms.opacity.value; to: 0.99; dur: 1500; easing: linear"
|
||
|
|
animation__fadeout="property: components.text.material.uniforms.opacity.value; to: 0.01; dur: 1500; easing: linear; startEvents: fadeout;"
|
||
|
|
animation__leave="property: object3D.position.z; to: -100; dur: 15000; easing: linear; delay: 2500;"
|
||
|
|
></a-text>
|
||
|
|
|
||
|
|
|
||
|
|
<a-text rotation="-20 20 0" position="-2 0.2 -2" scale="1 1 1" value="waiting"></a-text>
|
||
|
|
<a-box material="wireframe:true" color="orange" position="-2 1 -2" scale="2 2 2"></a-box>
|
||
|
|
<a-text rotation="-20 0 0" position=" 0 0.2 -2" scale="1 1 1" value="in progress"></a-text>
|
||
|
|
<a-box material="wireframe:true" color="red" position="0 1 -2" scale="2 2 2"></a-box>
|
||
|
|
<a-text rotation="-20 -20 0" position=" 2 0.2 -2" scale="1 1 1" value="completed"></a-text>
|
||
|
|
<a-box material="wireframe:true" color="green" position="2 1 -2" scale="2 2 2"></a-box>
|
||
|
|
|
||
|
|
<a-box material="shader:flat" id="placeholder1" hoverable grabbable stretchable draggable dropppable position="0.5 1.5 -0.5" scale="0.5 0.3 0.01"></a-box>
|
||
|
|
<a-box material="shader:flat" id="placeholder2" hoverable grabbable stretchable draggable dropppable position="0 1.9 -0.7" scale="0.5 0.3 0.01"></a-box>
|
||
|
|
<a-box material="shader:flat" id="placeholder3" hoverable grabbable stretchable draggable dropppable position="-0.5 1.5 -0.7" scale="0.5 0.3 0.01"></a-box>
|
||
|
|
<!-- somehow creating dynamically fails... even though it did (!) work at some point (but wasn't saved via git)-->
|
||
|
|
<!-- until then will rely on a pool of objects -->
|
||
|
|
|
||
|
|
</a-scene>
|
||
|
|
</body>
|