80 lines
20 KiB
JavaScript
80 lines
20 KiB
JavaScript
|
// original site - https://github.com/mrturck/aframe-joystick
|
||
|
|
// modified
|
||
|
|
|
||
|
|
// copy of nippleJS library
|
||
|
|
!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.nipplejs=t()}}(function(){function t(){}function e(t,i){return this.identifier=i.identifier,this.position=i.position,this.frontPosition=i.frontPosition,this.collection=t,this.defaults={size:100,threshold:.1,color:"white",fadeTime:250,dataOnly:!1,restJoystick:!0,restOpacity:.5,mode:"dynamic",zone:document.body},this.config(i),"dynamic"===this.options.mode&&(this.options.restOpacity=0),this.id=e.id,e.id+=1,this.buildEl().stylize(),this.instance={el:this.ui.el,on:this.on.bind(this),off:this.off.bind(this),show:this.show.bind(this),hide:this.hide.bind(this),add:this.addToDom.bind(this),remove:this.removeFromDom.bind(this),destroy:this.destroy.bind(this),resetDirection:this.resetDirection.bind(this),computeDirection:this.computeDirection.bind(this),trigger:this.trigger.bind(this),position:this.position,frontPosition:this.frontPosition,ui:this.ui,identifier:this.identifier,id:this.id,options:this.options},this.instance}function i(t,e){var n=this;return n.nipples=[],n.idles=[],n.actives=[],n.ids=[],n.pressureIntervals={},n.manager=t,n.id=i.id,i.id+=1,n.defaults={zone:document.body,multitouch:!1,maxNumberOfNipples:10,mode:"dynamic",position:{top:0,left:0},catchDistance:200,size:100,threshold:.1,color:"white",fadeTime:250,dataOnly:!1,restJoystick:!0,restOpacity:.5},n.config(e),"static"!==n.options.mode&&"semi"!==n.options.mode||(n.options.multitouch=!1),n.options.multitouch||(n.options.maxNumberOfNipples=1),n.updateBox(),n.prepareNipples(),n.bindings(),n.begin(),n.nipples}function n(t){var e=this;e.ids={},e.index=0,e.collections=[],e.config(t),e.prepareCollections();var i;return c.bindEvt(window,"resize",function(t){clearTimeout(i),i=setTimeout(function(){var t,i=c.getScroll();e.collections.forEach(function(e){e.forEach(function(e){t=e.el.getBoundingClientRect(),e.position={x:i.x+t.left,y:i.y+t.top}})})},100)}),e.collections}var o,r=!!("ontouchstart"in window),s=!!window.PointerEvent,d=!!window.MSPointerEvent,a={touch:{start:"touchstart",move:"touchmove",end:"touchend, touchcancel"},mouse:{start:"mousedown",move:"mousemove",end:"mouseup"},pointer:{start:"pointerdown",move:"pointermove",end:"pointerup"},MSPointer:{start:"MSPointerDown",move:"MSPointerMove",end:"MSPointerUp"}},p={};s?o=a.pointer:d?o=a.MSPointer:r?(o=a.touch,p=a.mouse):o=a.mouse;var c={};c.distance=function(t,e){var i=e.x-t.x,n=e.y-t.y;return Math.sqrt(i*i+n*n)},c.angle=function(t,e){var i=e.x-t.x,n=e.y-t.y;return c.degrees(Math.atan2(n,i))},c.findCoord=function(t,e,i){var n={x:0,y:0};return i=c.radians(i),n.x=t.x-e*Math.cos(i),n.y=t.y-e*Math.sin(i),n},c.radians=function(t){return t*(Math.PI/180)},c.degrees=function(t){return t*(180/Math.PI)},c.bindEvt=function(t,e,i){for(var n,o=e.split(/[ ,]+/g),r=0;r<o.length;r+=1)n=o[r],t.addEventListener?t.addEventListener(n,i,!1):t.attachEvent&&t.attachEvent(n,i)},c.unbindEvt=function(t,e,i){for(var n,o=e.split(/[ ,]+/g),r=0;r<o.length;r+=1)n=o[r],t.removeEventListener?t.removeEventListener(n,i):t.detachEvent&&t.detachEvent(n,i)},c.trigger=function(t,e,i){var n=new CustomEvent(e,i);t.dispatchEvent(n)},c.prepareEvent=function(t){return t.preventDefault(),t.type.match(/^touch/)?t.changedTouches:t},c.getScroll=function(){return{x:void 0!==window.pageXOffset?window.pageXOffset:(document.documentElement||document.body.parentNode||document.body).scrollLeft,y:void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop}},c.applyPosition=function(t,e){e.x&&e.y?(t.style.left=e.x+"px",t.style.top=e.y+"px"):(e.top||e.right||e.bottom||e.left)&&(t.style.top=e.top,t.style.right=e.right,t.style.bottom=e.bottom,t.style.left=e.left)},c.getTransitionStyle=function(t,e,i){var n=c.configStylePropertyObject(t);for(var o in n)if(n.hasOwnProperty(o))if("string"==typeof e)n[o]=e+" "+i;else{for(var r="",s=0,d=e.length;s<d;s+=1)
|
||
|
|
|
||
|
|
//const style = "position:fixed;display:block;width:100px;height:100px;left:25px;bottom:20px;background-color:#c8c8c880;z-index:20;border-radius: 50%;border: 3px solid gray;background-image: url('/resources/image/upload.png');"
|
||
|
|
|
||
|
|
|
||
|
|
function initJoystick() {
|
||
|
|
// create element
|
||
|
|
let d = document.createElement("DIV");
|
||
|
|
d.setAttribute("id","np");
|
||
|
|
d.setAttribute("class","controller");
|
||
|
|
//d.setAttribute("style",style)
|
||
|
|
document.querySelector("body").appendChild(d)
|
||
|
|
|
||
|
|
// create text overlay
|
||
|
|
//var p = document.createElement("p")
|
||
|
|
//p.setAttribute("style","text-align: center;margin-top:40px;font-size:12px Roboto; opacity:.5;");
|
||
|
|
//p.innerHTML="hold and drag to move"
|
||
|
|
//d.appendChild(p)
|
||
|
|
}
|
||
|
|
|
||
|
|
var moveData ="";
|
||
|
|
|
||
|
|
// create standard NipplesJS joystick
|
||
|
|
function createJoystick() {
|
||
|
|
initJoystick()
|
||
|
|
var options= {
|
||
|
|
mode: 'dynamic',
|
||
|
|
zone: document.getElementById('np'),
|
||
|
|
color: "#0F0000",
|
||
|
|
fadeTime: 10
|
||
|
|
}
|
||
|
|
|
||
|
|
var manager = nipplejs.create(options);
|
||
|
|
bindNipple();
|
||
|
|
|
||
|
|
function bindNipple () {
|
||
|
|
manager.on('move', function (evt, data) {
|
||
|
|
moveData = data;
|
||
|
|
});
|
||
|
|
manager.on('end', function (evt, data) {
|
||
|
|
moveData = "";
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// turn joystick data into WASD movement in AFRAME
|
||
|
|
var f; var ang; var x_vec; var y_vec; var cam;
|
||
|
|
|
||
|
|
function updatePosition(data) {
|
||
|
|
f = data.force;
|
||
|
|
ang = data.angle.radian
|
||
|
|
cam = document.getElementById("camera");
|
||
|
|
|
||
|
|
|
||
|
|
x_vec = Math.cos(ang + 3.14/180*cam.getAttribute('rotation')['y']) ;
|
||
|
|
y_vec = Math.sin(ang + 3.14/180*cam.getAttribute('rotation')['y']) ;
|
||
|
|
|
||
|
|
x = cam.getAttribute("position")["x"] + f/15*(x_vec ) ;
|
||
|
|
y = cam.getAttribute("position")["y"]
|
||
|
|
z = cam.getAttribute("position")["z"] - f/15*(y_vec ) ;
|
||
|
|
|
||
|
|
cam.setAttribute("position",`${x} ${y} ${z}`)
|
||
|
|
}
|
||
|
|
|
||
|
|
AFRAME.registerComponent('joystick', {
|
||
|
|
init: function() {
|
||
|
|
createJoystick();
|
||
|
|
},
|
||
|
|
tick: function (time, timeDelta) {
|
||
|
|
if (moveData != "") {
|
||
|
|
updatePosition(moveData)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|