AR.js
3.4.6
ตอนนี้คุณสามารถเป็นเจ้าของการกระทำครั้งแรกของ ar.js! opensea
AR.JS เป็นห้องสมุดที่มีน้ำหนักเบาสำหรับความเป็นจริงที่เพิ่มขึ้นบนเว็บมาพร้อมกับคุณสมบัติเช่นการติดตามภาพการติดตาม AR และเครื่องหมาย
การอัปเดต 30/12/21: ตอนนี้ยังมีห้องสมุด OSS Web AR JS ใหม่ที่เรียกว่า Mindar หากคุณต้องการคุณสมบัติการติดตามภาพที่ยอดเยี่ยม (เช่นการติดตามรูปภาพหลายภาพ) และการติดตามใบหน้าให้ลองดูสิ!
สำหรับตอนนี้ AR.JS ยังคงเป็นห้องสมุดเดียวที่ให้บริการคุณสมบัติ AR และสถานที่ตั้ง
โครงการนี้ถูกสร้างขึ้นโดย @Jeromeetienne ซึ่งได้รับการจัดการก่อนหน้านี้โดยNicolò Carpignoli และตอนนี้ได้รับการดูแลโดย AR.JS ORG
สำหรับการอัปเดตบ่อยครั้งเกี่ยวกับ AR.JS คุณสามารถติดตาม @THE Official? (Twitter) บัญชีและดู repo นี้!
โลโก้ได้รับความอนุเคราะห์จาก Simon Poulter
หากคุณต้องการที่จะให้ดูที่ศักยภาพของ AR.js เป็นครั้งแรกคุณสามารถดำเนินการต่อกับ readme นี้ได้
⚡ ar.js กำลังมาในงานสร้างที่แตกต่างกัน พวกเขาทั้งคู่ได้รับการดูแล พวกเขาเป็นเอกสิทธิ์
โปรดนำเข้าโครงการที่คุณต้องการสำหรับโครงการของคุณไม่ใช่ทั้งสองอย่าง:
ar.js พร้อมการติดตามรูปภาพ + ตำแหน่งตาม AR (Aframe):
AR.JS พร้อมการติดตามเครื่องหมาย + ตำแหน่ง AR (Aframe):
ar.js พร้อมการติดตามรูปภาพ + การติดตามเครื่องหมาย (สามเจ):
หากคุณต้องการ Arjs namespace import ar.js:
ar.js พร้อมตำแหน่ง AR (สามเจ):
นอกจากนี้คุณยังสามารถนำเข้าเวอร์ชันเฉพาะแทนที่คำหลัก 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 เบราว์เซอร์ของคุณและตรวจสอบว่าคุณมีข้อผิดพลาด CORS ในคอนโซลหรือไม่ ถ้าเป็นเช่นนั้นคุณต้องแก้ไขข้อผิดพลาดเหล่านั้นเพื่อดูเนื้อหาของคุณ การแก้ไขที่ถูกต้องคือการวางทรัพยากรของคุณบนเซิร์ฟเวอร์เดียวกันของรหัสของคุณ
หากคุณไม่สามารถทำได้คุณสามารถโฮสต์เซิร์ฟเวอร์ Proxy Anywhere เพื่อแก้ปัญหานั้น (https://github.com/rob-w/cors-anyanywhere) โปรดทราบว่าบริการโฮสติ้งหลายแห่งมีนโยบายที่ไม่อนุญาตให้ใช้เซิร์ฟเวอร์ดังกล่าว ตรวจสอบนโยบายบริการโฮสติ้งก่อนที่จะใช้เพื่อหลีกเลี่ยงการระงับบัญชี
เรียนรู้เพิ่มเติมเกี่ยวกับเอกสารทางการ AR.JS
คุณสามารถติดตั้ง AR.JS ด้วย NPM และใช้ในโครงการที่เข้ากันได้ใด ๆ ที่รองรับโมดูล NPM (React.js, vue.js, next.js หรือ whatelse) เพื่อติดตั้ง Run:
// 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 >อ่านตัวอย่างที่รวมอยู่ในที่เก็บข้อมูลนี้สำหรับข้อมูลเพิ่มเติม แต่โดยทั่วไปการเปลี่ยนแปลงเพียงอย่างเดียวคือไวยากรณ์นำเข้า
คุณสามารถค้นหาความช่วยเหลือมากมายเกี่ยวกับปัญหาที่เก็บ AR.JS เก่า โปรดค้นหาปัญหาที่เปิด/ปิดคุณอาจพบสิ่งที่น่าสนใจ
จากการเปิดรายงานข้อผิดพลาดไปจนถึงการสร้างคำขอดึง: การบริจาคทุกครั้งจะได้รับการชื่นชมและยินดีต้อนรับ หากคุณวางแผนที่จะใช้คุณสมบัติใหม่หรือเปลี่ยน API โปรดสร้างปัญหาก่อน วิธีนี้เราสามารถมั่นใจได้ว่างานอันมีค่าของคุณไม่ได้ไร้ประโยชน์
หากคุณมีปัญหาการกำหนดค่าหรือการตั้งค่าโปรดโพสต์คำถามไปยัง StackOverFlow นอกจากนี้คุณยังสามารถตอบคำถามให้เราได้ในห้องแชท Gitter ของเรา
หากคุณค้นพบข้อผิดพลาดหรือมีข้อเสนอแนะคุณสมบัติโปรดสร้างปัญหาเกี่ยวกับ GitHub
หลังจากได้รับคำติชมแล้วส่งไปที่ส้อมของคุณและส่งคำขอดึง เราอาจแนะนำการเปลี่ยนแปลงหรือการปรับปรุงหรือทางเลือกบางอย่าง แต่สำหรับการเปลี่ยนแปลงเล็กน้อยคำขอดึงของคุณควรได้รับการยอมรับอย่างรวดเร็ว
บางสิ่งที่จะเพิ่มโอกาสที่คำขอดึงของคุณได้รับการยอมรับ:
มันคือ โอเพ่นซอร์สทั้งหมด ! Artoolkit5-JS อยู่ภายใต้ใบอนุญาต LGPLV3 และได้รับอนุญาตเพิ่มเติม และรหัสทั้งหมดของฉันในที่เก็บ AR.JS อยู่ภายใต้ใบอนุญาต MIT -
สำหรับรายละเอียดทางกฎหมายอย่าลืมตรวจสอบใบอนุญาต artoolkit5-js และใบอนุญาต AR.JS
Full Changelog: ar.js changelog
