Существуют ли какие-либо установленные правила / требования для создания успешных маркеров AR? - PullRequest
Новая
       26

Существуют ли какие-либо установленные правила / требования для создания успешных маркеров AR?

2 голосов
/ 04 апреля 2020

В настоящее время я работаю над проектом, использующим библиотеку AFAME, которая позволяет пользователям персонализировать контент и функции текста, которые будут просматриваться в AR, с помощью маркеров или геолокации. Я хотел сделать несколько маркеров AR, которые бы соответствовали брендингу продукта, поэтому я создал несколько маркеров для этого, используя мои собственные созданные в Photoshop изображения, введенные в этот сайт , но очень немногие из них действительно работали, когда запускать их .PATT файлы и просматривать изображения с моей камеры. Например, Этот маркер в данный момент работает, а этот этот маркер - нет. Я понимаю, что должны быть четкие линии и асимметричные символы c, но если первый работает, то почему не второй? Я использовал следующий код: 

<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<!-- support 3D text -->
<script src="js/aframe-text-geometry-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/3.0.2/aframe/build/aframe-ar-nft.js"></script>

</head>

<body style="background: #888888; margin: 0px; overflow: hidden;">


<script>

AFRAME.registerComponent("registerevents", {
    init: function () 
    {

        this.firstDetection = false;
        this.markerVisible = false;
        this.marker = this.el;
        this.root = document.querySelector("#root");
        this.word = document.querySelector("#words");

        this.root.object3D.visible = false;

        let self = this;

        this.marker.addEventListener('markerFound', function() {
            self.markerVisible = true;
        });

        this.marker.addEventListener('markerLost', function() {
            self.markerVisible = false;
        });

        this.p = new THREE.Vector3();
        this.q = new THREE.Quaternion();
        this.s = new THREE.Vector3();   
    },

    tick: function (time, deltaTime) 
    {
         // check if marker is found for the first time;
         //  if so, make object visible and align position/rotation.
         if ( this.markerVisible && !this.firstDetection )
         {
            this.firstDetection = true;
            this.root.object3D.visible = true;
            let words = document.querySelector("#words");
            words.setAttribute("animation__rise", "autoplay", "true");
            words.setAttribute("animation__fade", "autoplay", "true");
        }

        // if marker is visible, align the entity to the marker
        if (this.markerVisible)
        {
            // sync position of marker and 3D objects
            let lerpAmount = 0.5;
            this.marker.object3D.getWorldPosition(this.p);
            this.marker.object3D.getWorldQuaternion(this.q);
            this.marker.object3D.getWorldScale(this.s);
            this.root.object3D.position.lerp(this.p, lerpAmount);
            this.root.object3D.quaternion.slerp(this.q, lerpAmount);
            this.root.object3D.scale.lerp(this.s, lerpAmount);

            this.word.setAttribute("color", "green");
        } 
        else
        {
            // marker lost
            this.word.setAttribute("color", "red");            
        }
    }
});

</script>
    <a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <a-marker type = "pattern" url = "/application/static/markers/Marker3.patt" id = "innocent">
        <a-entity 
            id="words" 
            text-geometry="value: Hello, world!;"
            material="color: yellow; repeat: 0.5 0.5;" 
            rotation="9 0 0"
            animation__rise = "property: position; dur: 5000; easing: linear; dir: normal; from:-1 0 0; to: -1 0 -2; loop: true;"
            animation__fade = "property: material.opacity; dur: 4000; from: 1.0; to: 0.0; loop:true; delay: 1000;"
            ></a-entity>
        </a-marker>

     <a-entity camera></a-entity>
    </a-scene>

</body>
</html>

Когда код запускает маркер с 3, проблем в консоли или на локальном хосте нет, но на экране все равно не отображаются значения. Маркер с 1 имеет тот же фон и находится в той же папке, и отображает нужный текст. Существуют ли какие-либо инструменты или советы, которые могут улучшить создание уникальных маркеров AR?

...