brilliantsole 0.0.1

package/examples/utils/aframe/fingertip-button-component.js

@@ -0,0 +1,201 @@
+AFRAME.registerComponent("fingertip-button", {
+    schema: {
+        hands: { default: ["left", "right"] },
+        fingers: { default: ["index"] },
+
+        color: { type: "color", default: "white" },
+
+        text: { type: "string", default: "hello world!" },
+        textColor: { type: "color", default: "black" },
+        subtitle: { type: "string", default: "" },
+
+        disabled: { default: false },
+        disabledColor: { type: "color", default: "grey" },
+
+        scale: { default: 0.15 },
+        rotation: { type: "vec3" },
+
+        height: { type: "number", default: 0.2 },
+        width: { type: "number", default: 1.4 },
+        depth: { type: "number", default: 0.3 },
+    },
+
+    init: function () {
+        this.box3 = new THREE.Box3();
+        this.matrix4 = new THREE.Matrix4();
+
+        this.container = document.createElement("a-entity");
+        this.el.appendChild(this.container);
+
+        this.box = document.createElement("a-box");
+        this.container.appendChild(this.box);
+
+        // causes an error if the box with text nodes is used for obb-collider
+        this.colliderBox = document.createElement("a-box");
+        //this.colliderBox.setAttribute("obb-collider", "");
+        this.colliderBox.hideCollider = () => this.colliderBox?.components?.["obb-collider"]?.hideCollider?.();
+        this.colliderBox.setAttribute("material", "opacity: 0;");
+        this.container.appendChild(this.colliderBox);
+
+        this.text = document.createElement("a-text");
+        this.text.setAttribute("rotation", "-90 0 0");
+        this.text.setAttribute("align", "center");
+        this.text.setAttribute("width", "5");
+        this.box.appendChild(this.text);
+
+        this.subtitle = document.createElement("a-text");
+        this.subtitle.setAttribute("align", "center");
+        this.subtitle.setAttribute("scale", "0.7 0.7 0.7");
+        this.subtitle.setAttribute("baseline", "bottom");
+        this.box.appendChild(this.subtitle);
+
+        this.el.setAttribute("fingertip-collider-target", {
+            hands: this.data.hands,
+            fingers: this.data.fingers,
+            maxTouches: 1,
+            disabled: this.data.disabled,
+        });
+
+        this.el.addEventListener("touchstarted", () => {
+            this.el.dispatchEvent(new Event("click"));
+        });
+    },
+
+    calculateTextSize: function (textEntity) {
+        const mesh = textEntity.components?.text?.mesh;
+        if (!mesh) {
+            return;
+        }
+        const box3 = this.box3;
+        box3.setFromObject(mesh);
+        this.matrix4.makeRotationFromQuaternion(this.box.object3D.quaternion);
+        this.matrix4.invert();
+        box3.applyMatrix4(this.matrix4);
+
+        let width = box3.max.x - box3.min.x;
+        width *= 8;
+
+        let height = box3.max.z - box3.min.z;
+        height *= 8;
+
+        return {
+            width,
+            height,
+        };
+    },
+
+    update: function (oldData) {
+        const diff = AFRAME.utils.diff(oldData, this.data);
+
+        const diffKeys = Object.keys(diff);
+
+        //console.log({ diffKeys });
+
+        diffKeys.forEach((diffKey) => {
+            switch (diffKey) {
+                case "text":
+                    this.text.setAttribute("value", this.data.text);
+                    let text = this.data.text;
+                    let timeoutId = setInterval(() => {
+                        if (this.data.text != text) {
+                            clearInterval(timeoutId);
+                            return;
+                        }
+
+                        const textSize = this.calculateTextSize(this.text);
+                        if (textSize) {
+                            const { width, height } = textSize;
+                            clearInterval(timeoutId);
+                            this.el.setAttribute("fingertip-button", "width", width);
+                            this.el.setAttribute("fingertip-button", "depth", height);
+                            this.updateCollider();
+                        }
+                    }, 10);
+                    break;
+                case "subtitle":
+                    this.subtitle.setAttribute("value", this.data.subtitle);
+                    break;
+                case "textColor":
+                    this.text.setAttribute("color", this.data.textColor);
+                    this.subtitle.setAttribute("color", this.data.textColor);
+                    break;
+                case "color":
+                    if (this.data.disabled) {
+                        break;
+                    }
+                    this.box.setAttribute("color", this.data.color);
+                    break;
+                case "disabledColor":
+                    if (!this.data.disabled) {
+                        break;
+                    }
+                    this.box.setAttribute("color", this.data.disabledColor);
+                    break;
+                case "disabled":
+                    if (this.data.disabled) {
+                        this.colliderBox.removeAttribute("obb-collider");
+                        this.box.classList.remove("clickable");
+                    } else {
+                        this.colliderBox.setAttribute("obb-collider", "");
+                        this.box.classList.add("clickable");
+                    }
+
+                    this.el.setAttribute("fingertip-collider-target", { disabled: this.data.disabled });
+                    this.box.setAttribute("color", this.data.disabled ? this.data.disabledColor : this.data.color);
+                    break;
+                case "width":
+                    this.box.setAttribute("width", this.data.width);
+                    this.colliderBox.setAttribute("width", this.data.width);
+                    this.updateCollider();
+                    break;
+                case "depth":
+                    this.box.setAttribute("depth", this.data.depth);
+                    this.colliderBox.setAttribute("depth", this.data.depth);
+                    this.updateCollider();
+                    break;
+                case "height":
+                    this.box.setAttribute("height", this.data.height);
+                    this.colliderBox.setAttribute("height", this.data.height);
+
+                    this.box.setAttribute("position", `0 ${(this.data.height * this.data.scale) / 2} 0`);
+                    this.colliderBox.setAttribute("position", `0 ${(this.data.height * this.data.scale) / 2} 0`);
+
+                    this.text.setAttribute("position", `0 ${this.data.height / 2} 0`);
+                    this.subtitle.setAttribute("position", `0 ${-this.data.height / 2} ${this.data.depth / 2}`);
+
+                    this.updateCollider();
+                    break;
+                case "scale":
+                    {
+                        const scaleString = new Array(3).fill(this.data.scale).join(" ");
+                        this.box.setAttribute("scale", scaleString);
+                        this.colliderBox.setAttribute("scale", scaleString);
+                        this.updateCollider();
+                    }
+                    break;
+                case "rotation":
+                    {
+                        const rotationString = AFRAME.utils.coordinates.stringify(this.data.rotation);
+                        this.box.setAttribute("rotation", rotationString);
+                        this.colliderBox.setAttribute("rotation", rotationString);
+                        this.updateCollider();
+                    }
+                    break;
+            }
+        });
+    },
+
+    updateCollider: function () {
+        if (this.data.disabled) {
+            return;
+        }
+        setTimeout(() => {
+            this.colliderBox.components["obb-collider"]?.updateCollider();
+        }, 0);
+    },
+
+    remove: function () {
+        this.el.removeAttribute("fingertip-collider-target");
+        this.box.remove();
+    },
+});

package/examples/utils/aframe/fingertip-collider-target-component.js

@@ -0,0 +1,102 @@
+AFRAME.registerComponent("fingertip-collider-target", {
+    schema: {
+        hands: { default: ["left", "right"] },
+        fingers: { default: ["index"] },
+        maxTouches: { default: 1 },
+        disabled: { default: false },
+    },
+
+    init: function () {
+        this.touches = []; // [...{hand, finger}]
+
+        this.checkTouches = AFRAME.utils.throttle(this.checkTouches, 20, this);
+        this.onFingertipTouchStarted = AFRAME.utils.throttle(this.onFingertipTouchStarted, 300, this);
+
+        this.boundOnFingertipTouch = this.onFingertipTouch.bind(this);
+        this.el.addEventListener("fingertiptouchstarted", this.boundOnFingertipTouch);
+        this.el.addEventListener("fingertiptouchended", this.boundOnFingertipTouch);
+    },
+
+    onFingertipTouch: function (event) {
+        if (this.data.disabled) {
+            return;
+        }
+
+        //console.log(event);
+        const isTouchStart = event.type == "fingertiptouchstarted";
+        const { target } = event;
+        const { hand, finger, getJointAPI } = event.detail;
+
+        const touch = { hand, finger, getJointAPI, target };
+        //console.log(touch);
+
+        if (!this.data.hands.includes(hand)) {
+            return;
+        }
+        if (!this.data.fingers.includes(finger)) {
+            return;
+        }
+
+        if (isTouchStart) {
+            this.onFingertipTouchStarted(touch);
+        } else {
+            this.onFingertipTouchEnded(touch);
+        }
+
+        event.stopPropagation();
+    },
+
+    getExistingTouch: function (touch) {
+        return this.touches.find(({ hand, finger }) => touch.hand == hand && touch.finger == finger);
+    },
+
+    onFingertipTouchStarted: function (touch) {
+        const existingTouch = this.getExistingTouch(touch);
+        if (existingTouch) {
+            return;
+        }
+        if (this.touches.length >= this.data.maxTouches) {
+            return;
+        }
+        this.touches.push(Object.assign({}, touch));
+        this.el.emit("touchstarted", touch);
+    },
+    onFingertipTouchEnded: function (touch) {
+        const existingTouch = this.getExistingTouch(touch);
+        if (!existingTouch) {
+            return;
+        }
+        this.touches.splice(this.touches.indexOf(existingTouch), 1);
+        this.el.emit("touchended", existingTouch);
+    },
+
+    tick: function (time, timeDelta) {
+        this.checkTouches(time, timeDelta);
+    },
+
+    checkTouches: function (time, timeDelta) {
+        this.touches.forEach((touch) => {
+            const { hand, finger, getJointAPI, target } = touch;
+            const position = getJointAPI().getPosition();
+            // FILL - get normalized position within collider
+            //console.log(position);
+            this.el.emit("touchmoved", { hand, finger, position, target });
+        });
+    },
+
+    update: function (oldData) {
+        const diff = AFRAME.utils.diff(oldData, this.data);
+
+        const diffKeys = Object.keys(diff);
+
+        diffKeys.forEach((diffKey) => {
+            switch (diffKey) {
+                case "disabled":
+                    if (this.data.disabled) {
+                        this.touches.forEach((touch) => this.onFingertipTouchEnded(touch));
+                    }
+                    break;
+            }
+        });
+    },
+});

package/examples/utils/aframe/fingertip-colliders-component.js

@@ -0,0 +1,147 @@
+// requires hand-tracking-controls-extras (https://github.com/gftruj/aframe-hand-tracking-controls-extras)
+
+AFRAME.registerComponent("fingertip-colliders", {
+    schema: {
+        fingers: { default: ["index"] }, // ["thumb", "index", "middle", "ring", "little"]
+    },
+
+    init: function () {
+        console.log(this);
+
+        if (!this.el.hasAttribute("hand-tracking-extras")) {
+            this.el.setAttribute("hand-tracking-extras", "");
+        }
+
+        this.isHandVisible = false;
+
+        this.isInVR = false;
+        this.el.sceneEl.addEventListener("enter-vr", () => {
+            this.isInVR = true;
+        });
+        this.el.sceneEl.addEventListener("exit-vr", () => {
+            this.isInVR = false;
+        });
+
+        this.hand = this.el.components["hand-tracking-controls"].data.hand;
+
+        /** @type {Object.<string, HTMLElement>} */
+        this.fingertipEntities = {};
+
+        this.boundOnOBBCollision = this.onOBBCollision.bind(this);
+        this.obbColliderAttributeValue = "size: 0.015 0.015 0.015;";
+
+        const onHandTrackingExtrasReady = () => {
+            console.log("jointsAPI", this.hand, this.jointsAPI);
+            const clearHand = () => {
+                const material = this.el.components["hand-tracking-controls"]?.skinnedMesh?.material;
+                if (material) {
+                    console.log(material);
+                    material.colorWrite = false;
+                    clearInterval(intervalId);
+                }
+            };
+            let intervalId = setInterval(() => {
+                clearHand();
+            }, 1000);
+
+            this.data.fingers.forEach((finger) => {
+                const capitalizedfinger = this.capitalizeFirstLetter(finger);
+
+                const fingertipEntity = document.createElement("a-entity");
+
+                fingertipEntity.dataset.finger = finger;
+                fingertipEntity.dataset.hand = this.hand;
+
+                fingertipEntity.getJointAPI = () => this.jointsAPI[`get${capitalizedfinger}Tip`]();
+                //fingertipEntity.setAttribute("obb-collider", this.obbColliderAttributeValue);
+
+                fingertipEntity.addEventListener("obbcollisionstarted", this.boundOnOBBCollision);
+                fingertipEntity.addEventListener("obbcollisionended", this.boundOnOBBCollision);
+
+                this.fingertipEntities[finger] = fingertipEntity;
+                this.el.sceneEl.appendChild(fingertipEntity);
+            });
+            clearHand();
+        };
+
+        this.jointsAPI = this.el?.components?.["hand-tracking-extras"]?.HandData?.jointAPI;
+        if (this.jointsAPI) {
+            onHandTrackingExtrasReady();
+        } else {
+            this.el.addEventListener(
+                "hand-tracking-extras-ready",
+                (event) => {
+                    this.jointsAPI = event.detail.data.jointAPI;
+                    onHandTrackingExtrasReady();
+                },
+                { once: true }
+            );
+        }
+
+        this.updateFingertipEntities = AFRAME.utils.throttle(this.updateFingertipEntities, 20, this);
+    },
+
+    onOBBCollision: function (event) {
+        //console.log(event);
+        const isCollisionStart = event.type == "obbcollisionstarted";
+        const fingerTipEntity = event.target;
+        const finger = fingerTipEntity.dataset.finger;
+        const withEl = event.detail.withEl;
+        const withFinger = withEl.dataset.finger;
+        const onSameHand = withFinger && withEl.dataset.hand == this.hand;
+
+        //console.log({ finger, withEl, withFinger, onSameHand });
+
+        const eventType = `fingertiptouch${isCollisionStart ? "started" : "ended"}`;
+        this.el.emit(eventType, { finger, withEl, withFinger, onSameHand });
+        if (!withFinger) {
+            const { getJointAPI } = fingerTipEntity;
+            withEl.emit(eventType, { finger, hand: this.hand, getJointAPI });
+        }
+    },
+
+    /** @param {string} string */
+    capitalizeFirstLetter: function (string) {
+        return string[0].toUpperCase() + string.slice(1);
+    },
+
+    tick: function (time, timeDelta) {
+        if (!this.isInVR) {
+            return;
+        }
+        this.updateFingertipEntities(time, timeDelta);
+    },
+
+    checkIfHandIsVisible: function () {
+        const isHandVisible = this.getIsHandVisible();
+        if (this.isHandVisible != isHandVisible) {
+            this.isHandVisible = isHandVisible;
+            Object.entries(this.fingertipEntities).forEach(([finger, fingertipEntity]) => {
+                if (this.isHandVisible) {
+                    fingertipEntity.setAttribute("obb-collider", this.obbColliderAttributeValue);
+                } else {
+                    //fingertipEntity.removeAttribute("obb-collider");
+                }
+            });
+        }
+    },
+    getIsHandVisible: function () {
+        return this.el.components["hand-tracking-controls"]?.mesh?.visible;
+    },
+
+    updateFingertipEntities: function (time, timeDelta) {
+        if (!this.jointsAPI) {
+            return;
+        }
+        this.checkIfHandIsVisible();
+        if (!this.isHandVisible) {
+            return;
+        }
+
+        Object.entries(this.fingertipEntities).forEach(([finger, fingertipEntity]) => {
+            const jointAPI = fingertipEntity.getJointAPI();
+            const fingertipPosition = jointAPI.getPosition();
+            fingertipEntity.object3D.position.copy(fingertipPosition);
+        });
+    },
+});