تنزيل AR.js - تنزيل رمز المصدر AR.js

AR.js

شفرة المصدر الأخرى

3.4.6

تنزيل

AR.JS - الواقع المعزز على الويب

يمكنك الآن امتلاك الالتزام الأول لـ AR.JS! Opensea

AR.JS هي مكتبة خفيفة الوزن للواقع المعزز على الويب ، وتأتي بميزات مثل تتبع الصور وتتبع AR القائم على الموقع وتتبع العلامات.

30/12/21 تحديث: هناك الآن أيضًا مكتبة جديدة على شبكة الإنترنت OSS ، تسمى Mindar. إذا كنت بحاجة إلى ميزة تتبع الصور الرائعة (أيضًا تتبع الصور المتعدد) وتتبع الوجه ، فابحث عن ذلك!
أما الآن ، فإن AR.JS لا تزال المكتبة الوحيدة التي توفر ميزات AR القائمة على العلامات والموقع.

تم إنشاء هذا المشروع بواسطة @Jeromeetienne ، الذي كان يديره سابقًا بواسطة Nicolò Carpignoli ويتم الحفاظ عليه الآن بواسطة AR.JS Org.

للحصول على تحديثات متكررة على AR.JS ، يمكنك متابعة حساب الرسمي؟ (Twitter) ومشاهدة هذا الريبو!

الشعار من باب المجاملة سيمون بولتر.

⚡ar.js لديها الآن وثائق رسمية! ⚡

تحقق من ذلك: الوثائق الرسمية AR.JS.

إذا كنت ترغب في إلقاء نظرة أولى على إمكانات AR.JS ، فيمكنك المتابعة مع هذه القراءة.

⚡ AR.JS قادم في بنيات مختلفة. كلاهما يتم الحفاظ عليه. هم حصريون.

الرجاء استيراد الشخص الذي تحتاجه لمشروعك ، وليس على حد سواء:

AR.JS مع تتبع الصور + AR المستند إلى الموقع (AFRAME):
- https://raw.githack.com/ar-js-org/ar.js/master/aframe/build/aframe-ar-nft.js
AR.JS مع تتبع العلامات + AR المستند إلى الموقع (AFRAME):
- https://raw.githack.com/ar-js-org/ar.js/master/aframe/build/aframe-ar.js
AR.JS مع تتبع الصور + تتبع العلامات (ثلاثة ج):
- https://raw.githack.com/ar-js-org/ar.js/master/three.js/build/ar-thereex.js
إذا كنت بحاجة إلى مساحة اسم ARJS ، استيراد AR.JS:
- https://raw.githack.com/ar-js-org/ar.js/master/three.js/build/ar.js
AR.JS مع AR القائم على الموقع (ThreeJs):
- https://raw.githack.com/ar-js-org/ar.js/master/three.js/build/ar-treex-location-only.js

يمكنك أيضًا استيراد إصدار محدد يحل محل الكلمة الرئيسية 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 مع خط العرض وخطوط الطول ، دون <> .
قم بتشغيله على خادم
قم بتنشيط GPS على هاتفك وانتقل إلى عنوان URL على سبيل المثال
انظر حولي. يجب أن ترى النص ينظر إليك ، ويظهر في الموضع المطلوب ، حتى لو نظرت حولك وانتقلت.

 <!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 والتحقق مما إذا كان لديك أخطاء في وحدة التحكم. إذا كان الأمر كذلك ، يجب عليك إصلاح هذه الأخطاء من أجل رؤية المحتوى الخاص بك. الإصلاح الصحيح هو وضع مواردك على نفس الخادم من الرمز الخاص بك.

إذا لم تتمكن من القيام بذلك ، فيمكنك استضافة خادم وكيل في أي مكان لحل ذلك (https://github.com/rob-w/cors-anywhere). يرجى ملاحظة أن العديد من خدمات الاستضافة لديها سياسات لا تسمح باستخدام هذا الخادم. تحقق دائمًا من سياسات الاستضافة للخدمات قبل استخدامها لتجنب معلقات الحساب

تعرف على المزيد على الوثائق الرسمية AR.JS.

حزمة ES6 NPM

يمكنك تثبيت 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. لتتماشى مع هذا المعيار ، يجب أيضًا استيراد MJs 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 القديمة. يرجى البحث عن مشكلات مفتوحة/مغلقة ، قد تجد أشياء مثيرة للاهتمام.

المساهمة

من فتح تقرير الأخطاء إلى إنشاء طلب سحب: يتم تقدير كل مساهمة ومرحب بها. إذا كنت تخطط لتنفيذ ميزة جديدة أو تغيير واجهة برمجة التطبيقات ، فيرجى إنشاء مشكلة أولاً. وبهذه الطريقة يمكننا التأكد من أن عملك الثمين ليس عبثا.

مشاكل

إذا كنت تعاني من مشاكل التكوين أو الإعداد ، فيرجى نشر سؤال إلى StackOverflow. يمكنك أيضًا معالجة السؤال إلينا في غرفة الدردشة

إذا اكتشفت خطأً أو لديك اقتراح ميزة ، فلا تتردد في إنشاء مشكلة على Github.

تقديم التغييرات

بعد الحصول على بعض التعليقات ، ادفع إلى شوكةك وتقديم طلب سحب. قد نقترح بعض التغييرات أو التحسينات أو البدائل ، ولكن يجب قبول طلب السحب الخاص بك بسرعة.

بعض الأشياء التي ستزيد من فرصة قبول طلب السحب الخاص بك: