Эффект отверстия в маркере с 8thWall - PullRequest
Новая
       30

Эффект отверстия в маркере с 8thWall

0 голосов
/ 22 октября 2019

Я пытаюсь получить тот же эффект с 8thwall и a-frame, что и в следующей теме: Как объявить материал "маски" с помощью A-Frame.js

Рабочий пример здесь: https://codepen.io/gftruj/pen/QRgVVp

Мне удалось получить эффект cloak, но отверстие не выровнено по моему маркеру изображения, даже если я играл с позицией и началом координат сетки.

Cf пример видео, который я сделал: https://drive.google.com/file/d/10WMcF3OEzlRM2a3zzXQHfa9kWiuttZnD/view?usp=sharing

Вот код, который я использую для отображения отверстия: 

// Mask outer surface of box
AFRAME.registerComponent('cloak', {
    init: function() {
      let geometry = new THREE.BoxGeometry(1, 1, 1)
      geometry.faces.splice(4, 2) // cut out the top faces 
      let material = new THREE.MeshBasicMaterial({
         colorWrite: false
      })
      let mesh = new THREE.Mesh(geometry, material)
      mesh.scale.set(1.1, 1.1, 1.1)
      this.el.object3D.add(mesh)
    }
});

// Generate objects 
AFRAME.registerComponent('overlapimage', {
    schema: {
      name: { type: 'string' }
    },
    init: function () {
        // const debug = document.querySelector(".debug");
        const object3D = this.el.object3D
        const name = this.data.name
        object3D.visible = false
        const size = {x: 1, y: 0.7777777, z: 1};

        // Inside of the hole
        const holeInside = document.createElement('a-entity');
        holeInside.setAttribute('material', 'side: back; src: #tiles; shader: flat; transparent: false; opacity: 1');
        holeInside.setAttribute('geometry', `primitive: box;`);
        holeInside.setAttribute('scale', `${size.x} ${size.y} ${size.z}`);
        holeInside.setAttribute('cloak');
        this.el.appendChild(holeInside);

        const showImage = ({detail}) => {
            if (name != detail.name) return;
            const {x, y, z} = detail.position;
            object3D.position.set(x, y, z - (size.z / 2));

            object3D.quaternion.copy(detail.rotation);
            object3D.scale.set(detail.scale, detail.scale, detail.scale);
            object3D.visible = true;
        };

        const hideImage = ({detail}) => {
            if (name != detail.name) return;
            object3D.visible = false;
        };

        this.el.sceneEl.addEventListener('xrimagefound', showImage);
        this.el.sceneEl.addEventListener('xrimageupdated', showImage);
        this.el.sceneEl.addEventListener('xrimagelost', hideImage);
    }
});

// xrextras-generate-image-targets uses this primitive to automatically populate multiple image targets
AFRAME.registerPrimitive('overlap-image', {
    defaultComponents: {
        overlapimage: {},
    },

    mappings: {
      name: 'overlapimage.name',
      rotated: 'overlapimage.rotated',
      metadata: 'overlapimage.metadata',
    }
});
...