AR.js
3.4.6
Теперь вы можете владеть первым коммитом AR.JS! Opensea
AR.JS-это легкая библиотека для дополненной реальности в Интернете, в которой есть такие функции, как отслеживание изображений, AR на основе местоположения и отслеживание маркеров.
ОБНОВЛЕНИЕ 30/12/21: В настоящее время есть новая библиотека OSS Web AR JS под названием Миндар. Если вам нужна отличная функция отслеживания изображений (также несколько отслеживания изображений) и отслеживание лица, проверьте это!
Что касается на данный момент, AR.JS по -прежнему является единственной библиотекой, предоставляющей маркерные и основанные на местоположении функции AR.
Этот проект был создан @jeromeetienne, ранее управляемый Николо Карпиньоли, и теперь он поддерживается AR.JS Org.
Для частых обновлений AR.JS вы можете подписаться на учетную запись @the Official? (Twitter) и посмотреть этот репо!
Логотип любезно предоставлен Саймоном Поултером.
Если вы хотите сначала взглянуть на потенциал AR.JS, вы можете продолжить эту ReadMe.
⚡ AR.JS появляется в разных сборках. Они оба поддерживаются. Они эксклюзивны.
Пожалуйста, импортируйте тот, который вам нужен для вашего проекта, а не оба:
AR.JS с отслеживанием изображений + на основе местоположения AR (Aframe):
AR.JS с отслеживанием маркеров + местоположение AR (Aframe):
AR.JS с отслеживанием изображений + отслеживание маркеров (ThreeJS):
Если вам нужен Import Ar.js ARJS -пространство имен:
AR.JS с местом AR (ThreeJS):
Вы также можете импортировать определенную версию, заменяющую master ключевое слово с помощью тега версии:
< script src =" https://raw.githack.com/AR-js-org/AR.js/3.4.6/aframe/build/aframe-ar-nft.js " > Пожалуйста, следуйте этим простым шагам:
< script src =" https://cdn.jsdelivr.net/gh/aframevr/[email protected]/dist/aframe-master.min.js " > </ script >
< script src =" https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js " > </ script >
< 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 >
< body style =" margin : 0px; overflow: hidden; " >
<!-- minimal loader shown until image descriptors are loaded -->
< div class =" arjs-loader " >
< div > Loading, please wait... </ div >
</ div >
< a-scene
vr-mode-ui =" enabled: false; "
renderer =" logarithmicDepthBuffer: true; precision: medium; "
embedded
arjs =" trackingMethod: best; sourceType: webcam;debugUIEnabled: false; "
>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
< a-nft
type =" nft "
url =" your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex "
smooth =" true "
smoothCount =" 10 "
smoothTolerance =" .01 "
smoothThreshold =" 5 "
>
< a-entity
gltf-model =" your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf "
scale =" 5 5 5 "
position =" 150 300 -100 "
>
</ a-entity >
</ a-nft >
< a-entity camera > </ a-entity >
</ a-scene >
</ body >Пожалуйста, следуйте этим простым шагам:
add-your-latitude и add-your-longitude с вашей широты и долготы, без <> . <!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " />
< meta http-equiv =" X-UA-Compatible " content =" IE=edge " />
< title > GeoAR.js demo </ title >
< script src =" https://aframe.io/releases/1.6.0/aframe.min.js " > </ script >
< script src =" https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js " > </ script >
< script src =" https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js " > </ script >
</ head >
< body >
< a-scene
vr-mode-ui =" enabled: false "
arjs =" sourceType: webcam; videoTexture: true; debugUIEnabled: false; "
>
< a-text
value =" This content will always face you. "
look-at =" [gps-camera] "
scale =" 120 120 120 "
gps-entity-place =" latitude: <add-your-latitude>; longitude: <add-your-longitude>; "
> </ a-text >
< a-camera gps-camera rotation-reader > </ a-camera >
</ a-scene >
</ body >
</ html >Пожалуйста, следуйте этим простым шагам:
<!DOCTYPE html >
< html >
< script src =" https://aframe.io/releases/1.6.0/aframe.min.js " > </ script >
<!-- we import arjs version without NFT but with marker + location based support -->
< script src =" https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js " > </ script >
< body style =" margin : 0px; overflow: hidden; " >
< a-scene embedded arjs >
< a-marker preset =" hiro " >
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
< a-entity
position =" 0 0 0 "
scale =" 0.05 0.05 0.05 "
gltf-model =" your-server/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf "
> </ a-entity >
</ a-marker >
< a-entity camera > </ a-entity >
</ a-scene >
</ body >
</ html >Важный! Имейте в виду, что если вы имеете в виду внешние ресурсы, в любом приложении, особенно тех, которые используют NFT, вы столкнетесь с проблемами CORS, если эти ресурсы не находятся на одном и том же сервере кода. Если вы не видите отслеживания, пожалуйста, откройте инструменты Dev Browser и проверьте, есть ли у вас ошибки CORS в консоли. Если это так, вы должны исправить эти ошибки, чтобы увидеть ваш контент. Правильное исправление состоит в том, чтобы поместить ваши ресурсы на тот же сервер вашего кода.
Если вы не можете этого сделать, вы можете разместить прокси-сервер в любом месте для решения этого (https://github.com/rob-w/cors- Anywhere). Обратите внимание, что в нескольких службах хостинга есть политики, которые не позволяют использовать такой сервер. Всегда проверяйте политики служб хостинга перед использованием их, чтобы избежать приостановки учетной записи
Узнайте больше о официальной документации AR.JS.
Вы можете установить AR.JS с NPM и использовать в любом совместимом проекте, который поддерживает модули NPM (React.js, Vue.js, Next.js или Whatelse), чтобы установить его запуск:
// Install with npm
npm install @ar-js-org/ar.js
// Install with yarn
yarn add @ar-js-org/ar.js
Для некоторых примеров прочитайте эту проблему.
ar-threex.mjs и ar.mjs С последними обновлениями (3.4.6) three.js теперь можно импортировать с помощью синтаксиса модуля ES. Чтобы соответствовать этому стандарту, ar-threex.mjs , ar.mjs и ar-threex-location-only.mjs также должны быть импортированы таким же образом, используя карту импорта. Вот пример того, как импортировать эти модули в вашем проекте:
// Example importing ar-threex.mjs
< script type =" importmap " >
{
"imports" : {
"three" : "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js" ,
"threex" : "./path/to/ar-threex.mjs" ,
}
}
</ script >
< script type =" module " >
import * as THREE from 'three' ;
import { ArToolkitSource , ArToolkitContext , ArMarkerControls } from 'threex'
// Your AR.js code here
</ script >Прочитайте примеры, включенные в этот репозиторий для получения дополнительной информации, но в основном единственное изменение - это синтаксис импорта.
Вы можете найти большую помощь по вопросам репозиториев Old AR.JS. Пожалуйста, найдите в открытых/закрытых вопросах, вы можете найти интересные вещи.
От открытия отчета об ошибке до создания запроса на привлечение: каждый вклад ценится и приветствуется. Если вы планируете реализовать новую функцию или изменить API, сначала создайте проблему. Таким образом, мы можем гарантировать, что ваша драгоценная работа не была напрасной.
Если у вас проблемы с конфигурацией или настройкой, пожалуйста, опубликуйте вопрос в Stackoverflow. Вы также можете рассмотреть нам вопрос в нашем чате -в чате Gitter
Если вы обнаружили ошибку или имеете предложение функции, не стесняйтесь создавать проблему на GitHub.
Получив отзывы, подтолкните свою вилку и отправьте запрос на притяжение. Мы можем предложить некоторые изменения, улучшения или альтернативы, но для небольших изменений ваш запрос на вытягивание должен быть принят быстро.
Некоторые вещи, которые увеличат вероятность того, что ваш запрос на привлечение будет принят:
Это все с открытым исходным кодом ! Artoolkit5-JS находится под лицензией LGPLV3 и дополнительным разрешением. И весь мой код в репозитории AR.JS находится под лицензией MIT. :)
Для получения юридических данных обязательно проверьте лицензию Artoolkit5-JS и лицензию AR.JS.
Полный вариант изменений: ar.js Changelog
