livecodingspace-app/public/vwf/view/aframe.js

"use strict";
/*
The MIT License (MIT)
Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)

Virtual World Framework Apache 2.0 license  (https://github.com/NikolaySuslov/livecodingspace/blob/master/licenses/LICENSE_VWF.md)
*/

// VWF & A-Frame view driver

define(["module", "vwf/view"], function (module, view) {
    var self;

    return view.load(module, {

        // == Module Definition ====================================================================

        initialize: function (options) {
            self = this;
            this.nodes = {};

            // this.tickTime = 0;
            // this.realTickDif = 50;
            // this.lastrealTickDif = 50;
            // this.lastRealTick = performance.now();

            this.state.appInitialized = false;
            this.state.showMobileJoystick = function(){
                let controlEl = document.querySelector('#avatarControl');
                if(controlEl){
                controlEl.setAttribute("virtual-gamepad-controls", {});
                controlEl.addEventListener("move", setJoystickMoveInput);
                }
            }
            this.state.hideMobileJoystick = function(){
                let controlEl = document.querySelector('#avatarControl');
                if(controlEl){
                controlEl.removeAttribute("virtual-gamepad-controls");
                controlEl.removeEventListener("move", setJoystickMoveInput);
                }
            }

            if (options === undefined) { options = {}; }

            if (typeof options == "object") {

                this.rootSelector = options["application-root"];
            }
            else {
                this.rootSelector = options;
            }

            this.gearvr = options.gearvr !== undefined ? options.gearvr : false;
            this.wmrright = options.wmrright !== undefined ? options.wmrright : false;
            this.wmrleft = options.wmrleft !== undefined ? options.wmrleft : false;
        },

        createdNode: function (nodeID, childID, childExtendsID, childImplementsIDs,
            childSource, childType, childIndex, childName, callback /* ( ready ) */) {

            var node = this.state.nodes[childID];

            // If the "nodes" object does not have this object in it, it must not be one that
            // this driver cares about
            if (!node) {
                return;
            }

            if (this.state.scenes[childID]) {
                let scene = this.state.scenes[childID];


                let prepairAvatar = new Promise((resolve, reject) => {

                    function cb() {
                        resolve("ok");
                    }
                    createAvatarControl(scene, cb);
                });


                prepairAvatar.then(res => {
                    // console.log(res);
                    createAvatar.call(self, childID);
                    postLoadAction.call(self, childID);

                    if (this.gearvr == true) {
                        console.log("CREATE GEARVR HERE!!");
                        if (AFRAME.utils.device.isMobileVR()) {
                            let nodeName = 'gearvr-' + self.kernel.moniker();
                            createGearVRControls();
                            createGearVRController.call(self, childID, nodeName);
                        }
                    }


                    if (this.wmrright == true) {
                        console.log("CREATE WMR RIGHT HERE!!");
                        if (AFRAME.utils.device.checkHasPositionalTracking()) {
                            let nodeName = 'wmrvr-right-' + self.kernel.moniker();
                            createWMRVRControls('right');
                            createWMRVR.call(this, childID, nodeName);
                        }
                    }

                    if (this.wmrleft == true) {
                        console.log("CREATE WMR LEFT HERE!!");
                        if (AFRAME.utils.device.checkHasPositionalTracking()) {
                            let nodeName = 'wmrvr-left-' + self.kernel.moniker();
                            createWMRVRControls('left');
                            createWMRVR.call(this, childID, nodeName);
                        }
                    }

                })
                // this.state.appInitialized  = true;

                document.body.appendChild(scene); //append is not working in Edge browser

            }

            if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj) {
                this.nodes[childID] = {
                    id: childID,
                    extends: childExtendsID,
                    liveBindings: {}
                    // lastTransformStep: 0,
                    // lastAnimationStep: 0 
                };
            }


            // if(this.state.nodes[childID]) {
            //     this.nodes[childID] = {id:childID,extends:childExtendsID};
            // } 
            // else if (this.state.nodes[childID] && this.state.nodes[childID].aframeObj.object3D instanceof THREE.Object3D) {
            //     this.nodes[childID] = {id:childID,extends:childExtendsID};
            // }

        },

        executed: function (nodeID, scriptText, scriptType) {

            var node = this.state.nodes[nodeID];

            if (!(node)) {
                return;
            }

            if (scriptText.includes('var print')) {
                let print = self.nodes[nodeID].liveBindings.print;

                let me = self.kernel.moniker();
                let sender = self.nodes[nodeID].liveBindings.sender;

                if (me == sender) {
                    let data = JSON.stringify(print); //lively.lang.obj.inspect(print); 
                    self.kernel.fireEvent(nodeID, "printEvent", [data]);
                }
            }

        },


        initializedNode: function (nodeID, childID) {

            var node = this.state.nodes[childID];
            if (!node) {
                return;
            }

            if (node.extendsID == "http://vwf.example.com/aframe/gearvrcontroller.vwf") {
                console.log("gearVR controller initialized")
            }


            // if (node.prototypes.includes("http://vwf.example.com/aframe/aentity.vwf")) {

            //     var clientThatSatProperty = self.kernel.client();
            //     var me = self.kernel.moniker();


            //     // If the transform property was initially updated by this view....
            //     if (clientThatSatProperty == me) {
            //         self.kernel.callMethod(childID, "setOwner", [me]);
            //     }
            // }


            // if (propertyName == 'ownedBy')
            // {
            //     // if (!node.aframeObj.el.getAttribute('ownedBy')){

            //     // }
            // }

        },

        createdProperty: function (nodeId, propertyName, propertyValue) {
            return this.satProperty(nodeId, propertyName, propertyValue);
        },

        initializedProperty: function (nodeId, propertyName, propertyValue) {
            return this.satProperty(nodeId, propertyName, propertyValue);
        },

        gotProperty: function (nodeId, propertyName, propertyValue) {
            var selfs = this;

            var node = this.state.nodes[nodeId];

            if (!(node && node.aframeObj)) {
                return;
            }




        },

        satProperty: function (nodeId, propertyName, propertyValue) {
            //var selfs = this;

            var node = this.state.nodes[nodeId];

            if (!(node && node.aframeObj)) {
                return;
            }

            // if (propertyName == 'arjs') {
            //     if(propertyValue) {
            //         node.aframeObj.setAttribute('arjs', {trackingMethod: "best", sourceType: "webcam", debugUIEnabled: "true"});

            //     // let sceneEl = document.querySelector('a-scene');
            //     // let marker = document.createElement('a-marker-camera');
            //     // marker.setAttribute('preset', 'hiro');
            //     // sceneEl.appendChild(marker);
            //         //<a-marker-camera preset='hiro'></a-marker-camera>

            //     } else {
            //         if(node.aframeObj.getAttribute('arjs')){
            //             node.aframeObj.removeAttribute('arjs')
            //         }
            //     }
            // }

            if (propertyName == 'position') {
                receiveModelTransformChanges(nodeId, 'position', propertyValue);
            }

            if (propertyName == 'rotation') {
                receiveModelTransformChanges(nodeId, 'rotation', propertyValue);
            }

            if (propertyName == 'scale') {
                receiveModelTransformChanges(nodeId, 'scale', propertyValue);
            }

            // if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {

            //     //console.log("sat new item");
            //     let elID = '#' + node.aframeObj.getAttribute('id');
            //     Object.entries(this.state.nodes).forEach(el => {
            //         let src = el[1].aframeObj.getAttribute('src');
            //         if (src){
            //            // console.log("my: " + src);
            //             if (src == elID)
            //             self.kernel.callMethod(el[0], "updateSrc", [elID])
            //         }
            //     })

            // }

            // if ( propertyName == "position" ) {
            //     receiveModelTransformChanges( nodeId, propertyValue );
            // }


            if (node.aframeObj.nodeName == "AUDIO" && propertyName == 'itemSrc') {

                //console.log("sat new item");
                let elID = '#' + node.aframeObj.getAttribute('id');
                Object.entries(this.state.nodes).forEach(el => {
                    let sound = el[1].aframeObj.getAttribute('sound');
                    if (sound) {

                        let soundID = vwf.find(el[0], 'sound');
                        self.kernel.callMethod(soundID, "refreshSrc", [elID])

                        // if (sound.src !== ""){
                        //     let src = '#' + sound.src.id;
                        //     if (src == elID){
                        //         let soundID = vwf.find(el[0], 'sound');
                        //         self.kernel.callMethod(soundID, "updateSrc", [elID])
                        //     }

                        // }

                    }

                })
            }


            if (node.aframeObj.nodeName == "IMG" && propertyName == 'itemSrc') {
                updateMaterial(node);
            }

            if (node.aframeObj.nodeName == "VIDEO" && propertyName == 'itemSrc') {
                updateMaterial(node);
            }

            if (node.aframeObj.nodeName == "A-ASSET-ITEM" && propertyName == 'itemSrc') {

                //console.log("sat new item");
                let elID = '#' + node.aframeObj.getAttribute('id');
                Object.entries(this.state.nodes).forEach(el => {
                    let src = el[1].aframeObj.getAttribute('src');
                    let mtl = el[1].aframeObj.getAttribute('mtl');
                    if (src) {
                        // console.log("my: " + src);
                        if (src == elID)
                            self.kernel.callMethod(el[0], "updateModel", [elID])
                    }
                    if (mtl) {
                        // console.log("my: " + mtl);
                        if (mtl == elID)
                            self.kernel.callMethod(el[0], "updateModelMtl", [elID])
                    }
                })

            }

            // var aframeObject = node.aframeObj;
            // switch (propertyName) {
            //     case "clickable":
            //         if (propertyValue) {
            //             aframeObject.addEventListener('click', function (evt) {
            //                 let cursorID = 'cursor-avatar-'+selfs.kernel.moniker();
            //                if (evt.detail.cursorEl.id == cursorID) {
            //                     vwf_view.kernel.fireEvent(nodeId, "clickEvent")
            //                }
            //             });
            //         }
            //         break;
            // }
        },

        deletedNode: function (childID) {
            delete this.nodes[childID];
        },

        firedEvent: function (nodeID, eventName, eventParameters) {

            var node = this.state.nodes[nodeID];

            if (!(node)) {
                return;
            }

            if (eventName == "printIt") {

                var clientThatSatProperty = self.kernel.client();
                var me = self.kernel.moniker();


                // If the transform property was initially updated by this view....
                if (clientThatSatProperty == me) {


                    let selectedText = eventParameters[0];
                    let printText = _app.helpers.replaceSubStringALL(selectedText, 'this', 'me');

                    if (!self.nodes[nodeID].liveBindings) {
                        self.nodes[nodeID].liveBindings = {}
                    }

                    //let bindObject = self.nodes[nodeID].liveBindings;
                    let bindString = 'vwf.views["vwf/view/aframe"].nodes["' + nodeID + '"].liveBindings';
                    let sender = JSON.stringify(eventParameters[1]);

                    let scriptText = 'let binding = ' + bindString + '; binding.me = this; binding.sender = ' + sender + '; lively.vm.syncEval("var print = ' + printText + '",{topLevelVarRecorder: binding});';
                    vwf_view.kernel.execute(nodeID, scriptText);

                }

            }



            if (eventName == "changingTransformFromView") {
                var clientThatSatProperty = self.kernel.client();
                var me = self.kernel.moniker();

                // If the transform property was initially updated by this view....
                if (clientThatSatProperty == me) {
                    var node = this.state.nodes[nodeID];
                    node.ignoreNextTransformUpdate = true;
                }
            }

            //var avatarID = vwf_view.kernel.find("", avatarName)

            // if (eventName == "postLoadAction") {

            //     Object.entries(self.state.nodes).forEach(el => {
            //         if (el[1].prototypes.includes("http://vwf.example.com/aframe/aentity.vwf")) {
            //             vwf_view.kernel.callMethod(el[0], "setOwner", [self.kernel.moniker()]);
            //         }

            //     });
            // }

            var avatarName = 'avatar-' + self.kernel.moniker();

            if (eventName == "createAvatar") {
                console.log("creating avatar...");

                // let avatarID = self.kernel.moniker();
                // var nodeName = 'avatar-' + avatarID;

                var newNode = {
                    "id": avatarName,
                    "uri": avatarName,
                    "extends": "http://vwf.example.com/aframe/avatar.vwf",
                    "properties": {
                        "localUrl": '',
                        "remoteUrl": '',
                        "displayName": 'Avatar ' + randId(),
                        "sharing": { audio: true, video: true },
                        "selectMode": false,
                        "position": [0, 1.6, 0]
                    }
                }

                if (!self.state.nodes[avatarName]) {
                   

                    if (_LCSUSER.is) {

                        _LCSUSER.get('profile').get('alias').once(alias => {
                                if (alias){

                                    newNode.properties.displayName = alias;
                                    //vwf_view.kernel.callMethod(avatarName, "setMyName", [alias]);
                                }
                                vwf_view.kernel.createChild(nodeID, avatarName, newNode);
                                });

                                    _LCSUSER.get('profile').get('avatarNode').once(res => {
                                        var myNode = null;
                                        if (res) {
                                            //myNode = JSON.parse(res.avatarNode);
                                            myNode = res;
                                            vwf_view.kernel.callMethod(avatarName, "createAvatarBody", [myNode, null]);
                                        } else {
                                            vwf_view.kernel.callMethod(avatarName, "createAvatarBody", []);
                                        }
                                       // newNode.properties.displayName = res.alias;
            
                                        
                                        //"/../assets/avatars/male/avatar1.gltf"
            
            
                                        //vwf_view.kernel.callMethod(avatarName, 'setUserAvatar', [res] );
                                    });


                                
                      
                    } else {

                        vwf_view.kernel.createChild(nodeID, avatarName, newNode);
                        vwf_view.kernel.callMethod(avatarName, "createAvatarBody", []);
                        //"/../assets/avatars/male/avatar1.gltf"
                    }

                    //
                    

                }


                // if(_LCSUSER.is){
                //     _LCSUSER.get('profile').get('alias').once(res => {
                //         vwf_view.kernel.callMethod(avatarName, 'setUserAvatar', [res] );
                //     })
                // }




            }

            let intersectEvents = ['hitstart', 'hitend', 'intersect', 'clearIntersect']; //'intersect', 

            let hitEvent = intersectEvents.filter(el=> el == eventName.slice(0,-5))[0]; //slice Event word
            if (hitEvent)
            {
                var clientThatSatProperty = self.kernel.client();
                var me = self.kernel.moniker();

                // If the transform property was initially updated by this view....
                if (clientThatSatProperty == me) {
                        let methodName = eventName +'Method';
                        vwf.callMethod(nodeID, methodName, [])
                }

            }
    


            if (eventName == "clickEvent") {

                if (self.kernel.moniker() == eventParameters[0]) {

                    let avatar = self.nodes[avatarName];
                    let mode = vwf.getProperty(avatarName, 'selectMode');


                    vwf_view.kernel.callMethod(nodeID, "clickEventMethod", [])

                    if (mode) {
                        console.log("allow to click!!!")
                        vwf_view.kernel.setProperty(avatarName, 'selectMode', false);

                        let editorDriver = vwf.views["vwf/view/editor-new"];
                        if (editorDriver) {
                            let selectSwitch = document.querySelector('#selectNodeSwitch');
                            // const selectSwitchComp = new mdc.iconButton.MDCIconButtonToggle(selectSwitch); //new mdc.select.MDCIconToggle
                            selectSwitch._comp.on = false;

                            let currentNodeDIV = document.querySelector('#currentNode');
                            if (currentNodeDIV) currentNodeDIV._setNode(nodeID);


                        }
                    }


                }


            }
        },

        ticked: function (vwfTime) {

            updateAvatarPosition();

            //update vr controllers
            if (this.gearvr == true) {
                updateHandControllerVR('gearvr-', '#gearvrcontrol');
            }
            if (this.wmrright == true) {
                updateHandControllerVR('wmrvr-right-', '#wmrvrcontrolright');
            }
            if (this.wmrleft == true) {
                updateHandControllerVR('wmrvr-left-', '#wmrvrcontrolleft');
            }

            //lerpTick ();
        },

        calledMethod: function (nodeID, methodName, methodParameters, methodValue) {

            var node = this.state.nodes[nodeID];

            if (!(node && node.aframeObj)) {
                return;
            }


            switch (methodName) {
                case "translateBy":
                case "translateTo":
                    //resetInterpolationFromViewDriver(nodeID, methodParameters, 'position')
                    break;
                // No need for rotateBy or rotateTo because they call the quaternion methods
                case "quaterniateBy":
                case "quaterniateTo":
                    //resetInterpolationFromViewDriver(nodeID, methodParameters, 'rotation')
                    break;
                case "scaleBy":
                case "scaleTo":
                // No need for transformBy or worldTransformBy because they call transformTo and worldTransformTo
                case "transformTo":
                case "worldTransformTo":
                    //resetInterpolationFromViewDriver(nodeID, methodParameters, 'rotation')
                    break;
            }

            if (this.nodes[nodeID].extends == "http://vwf.example.com/aframe/acamera.vwf") {
                if (methodName == "setCameraToActive") {
                    if (methodParameters[0] == vwf.moniker_) {
                        console.log("set active");
                        let offsetComp = node.aframeObj.getAttribute('viewoffset');
                        if (offsetComp) {
                            let offsetCompID = vwf.find(nodeID, 'viewoffset');
                            self.kernel.callMethod(offsetCompID, "setParams", []);
                        }
                        node.aframeObj.setAttribute('camera', 'active', true);

						document.querySelector('a-scene').emit('makeActiveCamera');
                    }
                }
            }

            // if (methodName == "createGooglePoly") {
            // }


        }


    });


    function resetInterpolationFromViewDriver(nodeID, methodParameters, propertyName) {

        if (methodParameters.length < 2 || methodParameters[1] == 0) {

            let viewNode = self.nodes[nodeID];
            if (viewNode.components.interpolation) {
                let interID = viewNode.components.interpolation;
                let viewComponentDriver = vwf.views["vwf/view/aframeComponent"];
                viewComponentDriver.resetInterpolation(interID, propertyName);
            }
        }
    }


    // Receive Model Transform Changes algorithm 
    // 1.0 If (own view changes) then IGNORE (only if no external changes have occurred since the user’s view 
    //       requested this change – otherwise, will need to treat like 1.1 or 1.2)
    // 1.1 Elseif (other external changes and no outstanding own view changes) then ADOPT
    // 1.2 Else Interpolate to the model’s transform (conflict b/w own view and external sourced model changes)

    function receiveModelTransformChanges(nodeID, propertyName, propertyValue) {

        var node = self.state.nodes[nodeID];

        // If the node does not exist in the state's list of nodes, then this update is from a prototype and we
        // should ignore it
        if (!node) {
            return;
        }

        // If the transform property was initially updated by this view....
        if (node.ignoreNextTransformUpdate) {
            node.outstandingTransformRequests.shift();
            node.ignoreNextTransformUpdate = false;
        } else {
            // adoptTransform( node, transformMatrix );

            let prop = self.state.setFromValue(propertyValue);

            if (propertyName == 'position') {
                let pos = goog.vec.Vec3.clone(prop);
                node.aframeObj.object3D.position.set(pos[0], pos[1], pos[2]);
            } else if (propertyName == 'rotation') {
                let rot = goog.vec.Vec3.clone(prop);

                node.aframeObj.object3D.rotation.set(
                    THREE.Math.degToRad(rot[0]),
                    THREE.Math.degToRad(rot[1]),
                    THREE.Math.degToRad(rot[2])
                )
                //node.aframeObj.object3D.rotation.set(rot[0], rot[1], rot[2]);
            } else if (propertyName == 'scale') {
                let scale = goog.vec.Vec3.clone(prop);
                node.aframeObj.object3D.scale.set(scale[0], scale[1], scale[2]);
            }

        }
    }


    function compareCoordinates(a, b, delta) {
        return Math.abs(a.x - b.x) > delta || Math.abs(a.y - b.y) > delta || Math.abs(a.z - b.z) > delta

    }

    function getWorldRotation(el, order) {

        var worldQuat = new THREE.Quaternion();
        el.object3D.getWorldQuaternion(worldQuat);

        //console.log(worldQuat);
        let angle = (new THREE.Euler()).setFromQuaternion(worldQuat, order);
        let rotation = (new THREE.Vector3(THREE.Math.radToDeg(angle.x),
            THREE.Math.radToDeg(angle.y), THREE.Math.radToDeg(angle.z)));

        return rotation
    }


    // function updateAvatarPosition() {
    //     let avatarName = 'avatar-' + self.kernel.moniker();
    //     var node = self.state.nodes[avatarName];
    //     if (!node) return;
    //     if (!node.aframeObj) return;

    //     let el = document.querySelector('#avatarControl');
    //     if (el) {
    //         //let position = el.object3D.getWorldPosition(); //el.getAttribute('position');

    //         let position = new THREE.Vector3();
    //         el.object3D.getWorldPosition(position);

    //         let rotation = getWorldRotation(el);
    //         vwf_view.kernel.callMethod(avatarName, "followAvatarControl", [position, rotation]);
    //     }


    // }

    function updateAvatarPosition() {

        let delta = 0.0001;

        let avatarName = 'avatar-' + self.kernel.moniker();
        var node = self.state.nodes[avatarName];
        if (!node) return;
        if (!node.aframeObj) return;

       let el = document.querySelector('#avatarControl');
        if (el) {
            //let position = el.object3D.getWorldPosition(); //el.getAttribute('position');

            let position = new THREE.Vector3();
            el.object3D.getWorldPosition(position);

            let rotation = el.getAttribute('rotation'); //getWorldRotation(el, 'YXZ');

            let lastRotation = self.nodes[avatarName].selfTickRotation;
            let lastPosition = self.nodes[avatarName].selfTickPosition;

            // let currentPosition = node.aframeObj.getAttribute('position');
            // let currentRotation = node.aframeObj.getAttribute('rotation');

            if (position && rotation && lastPosition && lastRotation) {
                if (compareCoordinates(position, lastPosition, delta) || Math.abs(rotation.y - lastRotation.y) > delta) {
                    console.log("not equal!!")
                    vwf_view.kernel.callMethod(avatarName, "followAvatarControl", [position, rotation]);
                }
            }
            self.nodes[avatarName].selfTickRotation = Object.assign({}, rotation);
            self.nodes[avatarName].selfTickPosition = Object.assign({}, position);
        }

    }


    function updateHandControllerVR(aName, aSelector) {
        //let avatarName = 'avatar-' + self.kernel.moniker();

        let delta = 0.0001

        let avatarName = aName + self.kernel.moniker();
        var node = self.state.nodes[avatarName];
        if (!node) return;
        if (!node.aframeObj) return;

        let el = document.querySelector(aSelector);
        if (el) {
            //let position = el.object3D.getWorldPosition() //el.getAttribute('position');

            let position = new THREE.Vector3();
            el.object3D.getWorldPosition(position);

            let rotation = getWorldRotation(el, 'XYZ');

            //let rotation = el.getAttribute('rotation');

            let lastRotation = self.nodes[avatarName].selfTickRotation;
            let lastPosition = self.nodes[avatarName].selfTickPosition;

            // let currentPosition = node.aframeObj.getAttribute('position');
            //let currentRotation = node.aframeObj.getAttribute('rotation');

            if (position && rotation && lastRotation && lastPosition) {
                if (compareCoordinates(position, lastPosition, delta) || compareCoordinates(rotation, lastRotation, delta)) {
                    console.log("not equal!!");
                    vwf_view.kernel.callMethod(avatarName, "updateVRControl", [position, rotation]);
                }
            }


            //vwf_view.kernel.callMethod(avatarName, "updateVRControl", [position, rotation]);

            self.nodes[avatarName].selfTickPosition = Object.assign({}, position);
            self.nodes[avatarName].selfTickRotation = Object.assign({}, rotation);

        }
    }


     function getMovementVector(el, vel) {
        var directionVector = new THREE.Vector3(0, 0, 0);
        var rotationEuler = new THREE.Euler(0, 0, 0, 'YXZ');
    
        
          var rotation = el.getAttribute('rotation');
          var velocity = vel;
    
          directionVector.copy(velocity);
          directionVector.multiplyScalar(0.05);
    
          // Absolute.
          if (!rotation) { return directionVector; }
    
          //xRotation = this.data.fly ? rotation.x : 0;
    
          // Transform direction relative to heading.
          rotationEuler.set(THREE.Math.degToRad(0), THREE.Math.degToRad(rotation.y), 0);
          directionVector.applyEuler(rotationEuler);
          return directionVector;
      }

    function setJoystickMoveInput (event) {
        const axes = event.detail.axis;
        //console.log(axes);
        let el = document.querySelector('#avatarControl');
        let position = new THREE.Vector3();
        el.object3D.getWorldPosition(position);
        let vel = new THREE.Vector3(axes[0], 0, -axes[1]);
        el.object3D.position.add(getMovementVector(el,vel));
    }

    function setJoystickRotateY (event) {
        const val = event.detail.value;
        //console.log(val);
        let el = document.querySelector('#avatarControl');
        let rotation = el.object3D.rotation;
        el.object3D.rotation.y += (-val)+rotation.y;
        //el.object3D.rotation.set(rotation.x,-val+rotation.y, rotation.z)
    }

    function setJoystickRotateX (event) {
        const val = event.detail.value;
        //console.log(val);
        let el = document.querySelector('#avatarControl');
        let rotation = el.object3D.rotation;
        el.object3D.rotation.x += val+rotation.x;
        //el.object3D.rotation.set(val+rotation.x, rotation.y, rotation.z)
    }

    function createAvatarControl(aScene, cb) {

        let avatarName = 'avatar-' + self.kernel.moniker();

        let avatarEl = document.createElement('a-entity');
        avatarEl.setAttribute('id', 'avatarControlParent');


        if (AFRAME.utils.device.isMobileVR()) {
            avatarEl.setAttribute('movement-controls', {});//{'controls': 'gamepad'});
            //avatarEl.setAttribute('position', '0 0 0');
        }

        //avatarEl.setAttribute('position', '0 1.6 0');

        let controlEl = document.createElement('a-camera');

        controlEl.setAttribute('id', 'avatarControl');
        controlEl.setAttribute('wasd-controls', {acceleration: 100});
        controlEl.setAttribute('look-controls', { pointerLockEnabled: false });
        //controlEl.setAttribute('gamepad-controls', {'controller': 0});

        if (AFRAME.utils.device.isMobile()) {
            //self.state.showMobileJoystick()
            controlEl.setAttribute("virtual-gamepad-controls", {});
            controlEl.addEventListener("move", setJoystickMoveInput);
        }
        //controlEl.addEventListener("rotateY", setJoystickRotateY);
        //controlEl.addEventListener("rotateX", setJoystickRotateX);
        

        //controlEl.setAttribute('gearvr-controls',{});

        // controlEl.setAttribute('camera', 'near', 0.51);


        //controlEl.setAttribute('position', '0 0 0');


        let cursorEl = document.createElement('a-cursor');
        cursorEl.setAttribute('id', 'cursor-' + avatarName);
        cursorEl.setAttribute('raycaster', {});
        cursorEl.setAttribute('raycaster', 'objects', '.clickable');
        cursorEl.setAttribute('raycaster', 'showLine', false);

        if (AFRAME.utils.device.isMobileVR()) { }

        // cursorEl.setAttribute('raycaster', {objects: '.intersectable', showLine: true, far: 100});
        // cursorEl.setAttribute('raycaster', 'showLine', true);
        controlEl.appendChild(cursorEl);

        avatarEl.appendChild(controlEl);
        aScene.appendChild(avatarEl);

        controlEl.setAttribute('camera', 'active', true);


        // let arControl = document.createElement('a-entity');
        // arControl.setAttribute('id', 'arControlParent');
        // arControl.setAttribute('camera', {
        //     active: true,
        //     "look-controls-enabled": false,
        //     "wasd-controls-enabled": false,
        //     "user-height": 0
        // });
        // aScene.appendChild(arControl);



        cb();

        // let gearVRControlsEl = document.createElement('a-entity');
        // gearVRControlsEl.setAttribute('id', 'gearvr-'+avatarName);
        // gearVRControlsEl.setAttribute('gearvr-controls', {});
        // aScene.appendChild(gearVRControlsEl);



        //     controlEl.addEventListener('componentchanged', function (evt) {
        //     if (evt.detail.name === 'position') {
        //         var eventParameters = evt.detail.newData;
        //          vwf_view.kernel.setProperty(avatarName, "position", [eventParameters.x, eventParameters.y, eventParameters.z]);
        //     }

        //      if (evt.detail.name === 'rotation') {
        //         var eventParameters = evt.detail.newData;
        //            vwf_view.kernel.setProperty(avatarName, "rotation", [eventParameters.x, eventParameters.y, eventParameters.z]);
        //     }

        // });

    }

    function createWMRVR(nodeID, nodeName) {

        var newNode = {
            "id": nodeName,
            "uri": nodeName,
            "extends": "http://vwf.example.com/aframe/wmrvrcontroller.vwf",
            "properties": {
            }
        }

        if (!self.state.nodes[nodeName]) {

            vwf_view.kernel.createChild(nodeID, nodeName, newNode);
            vwf_view.kernel.callMethod(nodeName, "createController", []);
            //"/../assets/controller/wmrvr.gltf"
        }
    }


    function createGearVRController(nodeID, nodeName) {

        var newNode = {
            "id": nodeName,
            "uri": nodeName,
            "extends": "http://vwf.example.com/aframe/gearvrcontroller.vwf",
            "properties": {
            }
        }

        if (!self.state.nodes[nodeName]) {

            vwf_view.kernel.createChild(nodeID, nodeName, newNode);
            vwf_view.kernel.callMethod(nodeName, "createController", []);
            //"/../assets/controller/gearvr.gltf"
        }
    }

    function postLoadAction(nodeID) {

        //vwf_view.kernel.fireEvent(nodeID, "postLoadAction")
    }

    function createAvatar(nodeID) {

        vwf_view.kernel.fireEvent(nodeID, "createAvatar")

        // let avatarID = self.kernel.moniker();
        // var nodeName = 'avatar-' + avatarID;

        // var newNode = {
        //     "id": nodeName,
        //     "uri": nodeName,
        //     "extends": "http://vwf.example.com/aframe/avatar.vwf"
        // }


        // vwf_view.kernel.createChild(nodeID, nodeName, newNode);
        // vwf_view.kernel.callMethod(nodeName, "createAvatarBody");
    }

    function randId() {
        return '_' + Math.random().toString(36).substr(2, 9);
    }

    function createGearVRControls() {

        let sceneEl = document.querySelector('a-scene');

        let avatarControl = document.querySelector('#avatarControlParent');

        let gearvr = document.createElement('a-entity');
        gearvr.setAttribute('id', 'gearvrcontrol');
        gearvr.setAttribute('gearvr-controls', {
            'hand': 'right',
            'model': true
        });
        // gearvr.setAttribute('gearvr-controls', 'hand', 'right');

        gearvr.setAttribute('gearvrcontrol', {});
        avatarControl.appendChild(gearvr);

    }

    function createWMRVRControls(hand) {

        let sceneEl = document.querySelector('a-scene');

        let avatarControl = document.querySelector('#avatarControlParent');

        let wmrvr = document.createElement('a-entity');
        wmrvr.setAttribute('id', 'wmrvrcontrol' + hand);
        wmrvr.setAttribute('windows-motion-controls', '');
        wmrvr.setAttribute('windows-motion-controls', 'hand', hand);
        wmrvr.setAttribute('wmrvrcontrol', { 'hand': hand });
        avatarControl.appendChild(wmrvr);
    }


    function updateMaterial(node) {

        let elID = '#' + node.aframeObj.getAttribute('id');
        Object.entries(self.state.nodes).forEach(el => {
            let material = el[1].aframeObj.getAttribute('material');
            if (material) {
                if (!material.src) {
                    let materialID = vwf.find(el[0], 'material');
                    self.kernel.callMethod(materialID, "refreshSrc", []);
                }
                else if (material.src) {
                    if (material.src !== "") {
                        let src = '#' + material.src.id;
                        if (src == elID) {
                            let materialID = vwf.find(el[0], 'material');
                            self.kernel.callMethod(materialID, "updateSrc", [elID])
                        }
                    }
                }
            }

        })

    }


});