Отслеживание изображений и основанная на местоположении AR с A-Frame и AR. js 3, имеющая проблему с дескрипторами - PullRequest
Новая
       42

Отслеживание изображений и основанная на местоположении AR с A-Frame и AR. js 3, имеющая проблему с дескрипторами

0 голосов
/ 17 апреля 2020

Я действительно новичок в A-Frame и Ar. js, буквально узнал об этом и начал работать над этим сегодня. Это для проекта, который я делаю, и я использую этот урок https://aframe.io/blog/arjs3/#creating -image-descriptors Я следовал инструкциям и загрузил изображение «динозавра» в создатель NFT. Он сказал, что я получу три загруженных изображения, я сделал, и они заканчиваются fset3, fset и iset. Я попытался щелкнуть по загруженным изображениям и получил сообщение «Нет приложения, настроенного на открытие документа и имеющего ссылку на изображение. (Кстати, я использую ma c). Вот код: 

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Image based tracking AR.js demo</title>
    <!-- import aframe and then ar.js with image tracking / location based features -->
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

    <!-- style for the loader -->
    <style>
      .arjs-loader {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .arjs-loader div {
        text-align: center;
        font-size: 1.25em;
        color: white;
      }
    </style>
  </head>

  <body style="margin : 0px; overflow: hidden;">
    <!-- minimal loader shown until image descriptors are loaded. Loading may take a while according to the device computational power -->
    <div class="arjs-loader">
      <div>Loading, please wait...</div>
    </div>

    <!-- a-frame scene -->
    <a-scene
      vr-mode-ui="enabled: false;"
      renderer="logarithmicDepthBuffer: true;"
      embedded
      arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;">
      <!-- a-nft is the anchor that defines an Image Tracking entity -->
      <!-- on 'url' use the path to the Image Descriptors created before. -->
      <!-- the path should end with the name without the extension e.g. if file is trex.fset' the path should end with trex -->
      <a-nft
        type="nft"
        url="<path-to-your-image-descriptors>"
        smooth="true"
        smoothCount="10"
        smoothTolerance=".01"
        smoothThreshold="5">
          <!-- as a child of the a-nft entity, you can define the content to show. here's a GLTF model entity -->
          <a-entity
          gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
              scale="5 5 5"
              position="100 100 0"
          >
          </a-entity>
      </a-nft>
      <!-- static camera that moves according to the device movemenents -->
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>```

I understand that I need to input the image descriptor in "url="<path-to-your-image-descriptors>" but I'm stuck on getting to that point.

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Как развернуть приложение WebAR с помощью маркеров NFT

  1. Сначала создайте свой код (HTML, javascript, css ...)
  2. Во-вторых, создайте свои NFT дескрипторы с NFT-Marker-Creator прочтите эту другую статью stackoverflow
  3. В-третьих, установите правильные путь к папке / расположение дескрипторов ( NFT маркеры)

если ваши дескрипторы, три файла с расширением .fset .iset .fset3 с именем trex находятся в папке trex-descriptors : 

<a-nft
   type="nft"
   url="./trex-descriptors/trex"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5">

Обратите внимание, что в пути к файлам нет расширения. НЕ поставить расширение !!!

Тестирование

В конце, если вы хотите выполнить тестирование на локальном хосте (на вашем устройстве), запустите сервер.

Для сервера python (необходимо установить python) запустите: 

// Python 2.x
python -m SimpleHTTPServer

// Python 3.x
python -m http.server

Ваша страница будет обслуживаться по этому адресу в браузере:

http://localhost: 8000 /

Если вы предпочитаете запустить сервер nodejs, установите серверный модуль узла: 

npm install http-server -g

, затем выполните: 

http-server . -p 8000

таким образом ваша страница будет обслуживаться по адресу:

http://localhost: 8000 /

Хостинг на веб-сервере (страницы Github)

Если ваш код размещен на Github, вам, вероятно, понадобится

для изменения URL. это связано с тем, как github обрабатывает URL-адреса путей. Если вы являетесь владельцем профиля на github и его имя профиля myprofile:

https://github.com/myprofile

и вы являетесь владельцем репозитория myrepository в своем профиле:

https://github.com/myprofile/myrepository

Вы должны добавить myrepository к URL-адресу nft: 

<a-nft
   type="nft"
   url="./myrepository/trex-descriptors/trex"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5">

или, если хотите: 

<a-nft
   type="nft"
   url="https://github.com/myprofile/myrepository/trex-descriptors/trex"
   smooth="true"
   smoothCount="10"
   smoothTolerance=".01"
   smoothThreshold="5">

, но это победило не работает на localhost. Вы можете настроить ветку gh-pages в своем хранилище и изменить URL-адрес, чтобы в основной ветке версия, работающая на localhost, и другая версия для gh-страниц служили веб-сайтом.

ПРИМЕР :

https://github.com/kalwalt/kalwalt-interactivity-AR/blob/master/arjs/basic-nft-aframe.html основная ветка

https://github.com/kalwalt/kalwalt-interactivity-AR/blob/gh-pages/arjs/basic-nft-aframe.html ветвь gh-pages

Пример тестирования: https://kalwalt.github.io/kalwalt-interactivity-AR/arjs/basic-nft-aframe.html

0 голосов
/ 19 апреля 2020

Если вы используете его на веб-сервере, <path-yo-your-image-descriptors> будет выглядеть как

https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex

, фокусируясь на URL-адресе, последнем, trex-image/trex

trex-image - это папка, содержащая trex.fset, trex.fset3, trex.iset. Следовательно /trex в конце URL 

trex-image
   | -- trex.fset
   | -- trex.fset3
   | -- trex.iset


Или вы можете использовать localhost как XAMPP. См .: { ссылка }

Дополнительная информация: AR. js Отслеживание изображений

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...