این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

با استفاده از WebXR Device API یک برنامه واقعیت افزوده (AR) بسازید

۱. قبل از شروع

این آزمایشگاه کد، نمونه‌ای از ساخت یک اپلیکیشن وب واقعیت افزوده را بررسی می‌کند. این اپلیکیشن از جاوا اسکریپت برای رندر کردن مدل‌های سه‌بعدی استفاده می‌کند که گویی در دنیای واقعی وجود دارند.

شما از API دستگاه WebXR استفاده می‌کنید که قابلیت‌های AR و واقعیت مجازی (VR) را با هم ترکیب می‌کند. شما بر روی افزونه‌های AR برای API دستگاه WebXR تمرکز می‌کنید تا یک برنامه AR ساده ایجاد کنید که روی وب تعاملی اجرا شود.

واقعیت افزوده (AR) چیست؟

واقعیت افزوده (AR) اصطلاحی است که معمولاً برای توصیف ترکیب گرافیک‌های تولید شده توسط کامپیوتر با دنیای واقعی به کار می‌رود. در مورد واقعیت افزوده مبتنی بر تلفن، این به معنای قرار دادن گرافیک‌های کامپیوتری به طور قانع‌کننده‌ای روی یک تصویر زنده دوربین است. برای اینکه این جلوه با حرکت تلفن در جهان واقعی باقی بماند، دستگاه دارای قابلیت واقعیت افزوده باید جهانی را که در آن حرکت می‌کند درک کند و موقعیت (موقعیت و جهت) خود را در فضای سه‌بعدی تعیین کند. این ممکن است شامل تشخیص سطوح و تخمین روشنایی محیط باشد.

واقعیت افزوده (AR) پس از انتشار ARCore گوگل و ARKit اپل، چه برای فیلترهای سلفی و چه برای بازی‌های مبتنی بر واقعیت افزوده، به طور گسترده در برنامه‌ها مورد استفاده قرار گرفته است.

آنچه خواهید ساخت

در این آزمایشگاه کد، شما یک برنامه وب می‌سازید که با استفاده از واقعیت افزوده، یک مدل را در دنیای واقعی قرار می‌دهد. برنامه شما:

از حسگرهای دستگاه هدف برای تعیین و ردیابی موقعیت و جهت آن در جهان استفاده کنید
رندر کردن یک مدل سه بعدی ترکیب شده روی نمای دوربین زنده
اجرای تست‌های ضربه برای قرار دادن اشیاء روی سطوح کشف‌شده در دنیای واقعی

آنچه یاد خواهید گرفت

نحوه استفاده از API دستگاه WebXR
نحوه پیکربندی یک صحنه AR پایه
چگونه با استفاده از تست‌های ضربه AR، سطح مورد نظر را پیدا کنیم؟
نحوه بارگذاری و رندر یک مدل سه‌بعدی هماهنگ با فید دوربین دنیای واقعی
نحوه رندر کردن سایه‌ها بر اساس مدل سه‌بعدی

این آزمایشگاه کد بر روی APIهای AR تمرکز دارد. مفاهیم و بلوک‌های کد نامربوط نادیده گرفته شده و در کد مخزن مربوطه برای شما ارائه شده‌اند.

آنچه نیاز دارید

یک ایستگاه کاری برای کدنویسی و میزبانی محتوای وب استاتیک
دستگاه اندرویدی سازگار با ARCore که اندروید ۸.۰ اوریو را اجرا می‌کند
گوگل کروم
سرویس‌های گوگل پلی برای واقعیت افزوده نصب شده باشند (کروم به‌طور خودکار از شما می‌خواهد که آن را روی دستگاه‌های سازگار نصب کنید)
یک وب سرور به دلخواه شما
کابل USB برای اتصال دستگاه واقعیت افزوده به ایستگاه کاری
کد نمونه
یک ویرایشگر متن
آشنایی اولیه با HTML، CSS، جاوا اسکریپت و ابزارهای توسعه‌دهندگان گوگل کروم

برای امتحان کردن اولین مرحله از این آزمایشگاه کد، روی «امتحان کردن روی دستگاه واقعیت افزوده» کلیک کنید. اگر صفحه‌ای با پیام «مرورگر شما ویژگی‌های واقعیت افزوده ندارد» دریافت کردید، بررسی کنید که آیا سرویس گوگل پلی برای واقعیت افزوده روی دستگاه اندروید شما نصب شده است یا خیر.

۲. محیط توسعه خود را تنظیم کنید

کد را دانلود کنید

برای دانلود تمام کدهای این codelab روی کامپیوترتان، روی لینک زیر کلیک کنید:

فایل زیپ دانلود شده را از حالت فشرده خارج کنید. این کار یک پوشه ریشه ( ar-with-webxr-master ) را از حالت فشرده خارج می‌کند که شامل دایرکتوری‌های چندین مرحله از این codelab به همراه تمام منابع مورد نیاز شماست.

پوشه‌های step-03 و step-04 شامل وضعیت نهایی مطلوب مراحل سوم و چهارم این codelab و همچنین نتیجه final هستند. آنها برای مرجع در آنجا قرار دارند.

شما تمام کارهای کدنویسی خود را در دایرکتوری work انجام می‌دهید.

نصب وب سرور

شما می‌توانید از وب سرور خودتان استفاده کنید. اگر از قبل وب سروری راه‌اندازی نکرده‌اید، این بخش نحوه‌ی راه‌اندازی وب سرور برای کروم را شرح می‌دهد.
اگر هنوز آن برنامه را روی سیستم خود نصب نکرده‌اید، می‌توانید آن را از فروشگاه وب کروم نصب کنید.

پس از نصب برنامه وب سرور برای کروم، به chrome://apps بروید و روی آیکون وب سرور کلیک کنید:

در مرحله بعد این کادر محاوره‌ای را مشاهده می‌کنید که به شما امکان پیکربندی سرور وب محلی‌تان را می‌دهد:

پیکربندی وب سرور کروم

روی choose folder کلیک کنید و پوشه ar-with-webxr-master را انتخاب کنید. این به شما امکان می‌دهد کار در حال انجام خود را از طریق URL هایلایت شده در کادر گفتگوی وب سرور (در بخش URL(های) وب سرور ) ارائه دهید.
در قسمت گزینه‌ها (نیاز به راه‌اندازی مجدد دارد) ، کادر انتخاب « نمایش خودکار index.html» را علامت بزنید.
وب سرور را به حالت توقف (Stop ) و سپس به حالت آغاز شده (Started) برگردانید.
تأیید کنید که حداقل یک آدرس وب سرور نمایش داده شود: http://127.0.0.1:8887—آدرس پیش‌فرض میزبان محلی.

تنظیم فورواردینگ پورت

دستگاه واقعیت افزوده خود را طوری پیکربندی کنید که هنگام مراجعه به localhost:8887 در ایستگاه کاری، به همان پورت روی آن دسترسی داشته باشد.

در ایستگاه کاری توسعه خود، به chrome://inspect بروید و روی Port forwarding... کلیک کنید:
از پنجره تنظیمات Port forwarding برای ارسال پورت ۸۸۸۷ به localhost:8887 استفاده کنید.
کادر انتخاب فعال کردن انتقال پورت را علامت بزنید:

پیکربندی پورت فورواردینگ

تنظیمات خود را تأیید کنید

اتصال خود را آزمایش کنید:

دستگاه واقعیت افزوده خود را با کابل USB به ایستگاه کاری خود وصل کنید.
در دستگاه واقعیت افزوده خود در کروم، آدرس http://localhost:8887 را در نوار آدرس وارد کنید. دستگاه واقعیت افزوده شما باید این درخواست را به وب سرور ایستگاه کاری توسعه شما ارسال کند. باید فهرستی از فایل‌ها را مشاهده کنید.
در دستگاه واقعیت افزوده خود، روی step-03 کلیک کنید تا فایل step-03/index.html در مرورگر شما بارگذاری شود.

شما باید صفحه‌ای را ببینید که حاوی دکمه‌ی «شروع واقعیت افزوده» است.	با این حال، اگر صفحه خطای مرورگر پشتیبانی نشده را مشاهده کردید، احتمالاً دستگاه شما سازگار نیست.

اتصال به سرور وب شما اکنون باید با دستگاه AR شما کار کند.

روی شروع واقعیت افزوده کلیک کنید. ممکن است از شما خواسته شود ARCore را نصب کنید.

نصب ARCore prompt

اولین باری که یک برنامه واقعیت افزوده را اجرا می‌کنید، درخواست دسترسی دوربین را مشاهده می‌کنید.

کروم درخواست مجوز دوربین می‌کند → پنجره‌ی محاوره‌ای مجوزها

وقتی همه چیز آماده باشد، باید صحنه‌ای از مکعب‌ها را ببینید که روی تصویر دوربین قرار گرفته‌اند. با تجزیه و تحلیل بیشتر جهان توسط دوربین، درک صحنه بهبود می‌یابد، بنابراین حرکت در اطراف می‌تواند به تثبیت چیزها کمک کند.

۳. پیکربندی WebXR

در این مرحله، شما یاد می‌گیرید که چگونه یک جلسه WebXR و یک صحنه AR اولیه راه‌اندازی کنید. صفحه HTML با استایل CSS و جاوا اسکریپت برای فعال کردن قابلیت‌های اولیه AR ارائه شده است. این امر روند راه‌اندازی را سرعت می‌بخشد و به codelab اجازه می‌دهد تا روی ویژگی‌های AR تمرکز کند.

صفحه HTML

شما با استفاده از فناوری‌های وب موجود، یک تجربه واقعیت افزوده را در یک صفحه وب سنتی ایجاد می‌کنید. در این تجربه، از یک بوم رندر تمام صفحه استفاده می‌کنید، بنابراین فایل HTML نیازی به پیچیدگی بیش از حد ندارد.

ویژگی‌های واقعیت افزوده برای شروع به یک حرکت کاربر نیاز دارند، بنابراین برخی از اجزای طراحی متریال برای نمایش دکمه شروع واقعیت افزوده و پیام عدم پشتیبانی مرورگر وجود دارد.

فایل index.html که از قبل در دایرکتوری work شما قرار دارد، باید چیزی شبیه به کد زیر باشد. این بخشی از محتوای اصلی است؛ این کد را در فایل خود کپی نکنید!

<!-- Don't copy this code into your file! -->
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Building an augmented reality application with the WebXR Device API</title>
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

    <!-- three.js -->
    <script src="https://unpkg.com/three@0.123.0/build/three.js"></script>
    <script src="https://unpkg.com/three@0.123.0/examples/js/loaders/GLTFLoader.js"></script>

    <script src="../shared/utils.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <!-- Information about AR removed for brevity. -->

  <!-- Starting an immersive WebXR session requires user interaction. Start the WebXR experience with a simple button. -->
  <a onclick="activateXR()" class="mdc-button mdc-button--raised mdc-button--accent">
    Start augmented reality
  </a>

</body>
</html>

کد جاوا اسکریپت کلیدی را باز کنید

نقطه شروع برنامه شما در app.js است. این فایل برخی از دستورالعمل‌های کلی برای راه‌اندازی یک تجربه واقعیت افزوده را ارائه می‌دهد.

دایرکتوری کاری شما از قبل شامل کد برنامه ( app.js ) نیز می‌شود.

پشتیبانی WebXR و AR را بررسی کنید

قبل از اینکه کاربر بتواند با واقعیت افزوده (AR) کار کند، وجود navigator.xr و ویژگی‌های لازم XR را بررسی کنید. شیء navigator.xr نقطه ورود برای API دستگاه WebXR است، بنابراین اگر دستگاه سازگار باشد، باید وجود داشته باشد. همچنین، بررسی کنید که حالت جلسه "immersive-ar" پشتیبانی می‌شود.

اگر همه چیز خوب باشد، کلیک روی دکمه‌ی Enter augmented reality تلاش می‌کند تا یک جلسه‌ی XR ایجاد کند. در غیر این صورت، onNoXRDevice() فراخوانی می‌شود (در shared/utils.js ) که پیامی مبنی بر عدم پشتیبانی از AR را نمایش می‌دهد.

این کد از قبل در app.js وجود دارد، بنابراین نیازی به تغییر نیست.

(async function() {
  if (navigator.xr && await navigator.xr.isSessionSupported("immersive-ar")) {
    document.getElementById("enter-ar").addEventListener("click", activateXR)
  } else {
    onNoXRDevice();
  }
})();

درخواست `XRSession`

وقتی روی «ورود به واقعیت افزوده» کلیک می‌کنید، کد تابع activateXR() را فراخوانی می‌کند. این کار تجربه واقعیت افزوده را آغاز می‌کند.

تابع activateXR() را در app.js پیدا کنید. بخشی از کد از قلم افتاده است:

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = /* TODO */;

  // Omitted for brevity
}

نقطه ورود به WebXR از طریق XRSystem.requestSession() است. از حالت immersive-ar استفاده کنید تا محتوای رندر شده در یک محیط دنیای واقعی مشاهده شود.

مقداردهی اولیه this.xrSession با استفاده از حالت "immersive-ar" :

activateXR = async () => {
  // Initialize a WebXR session using "immersive-ar".
  this.xrSession = await navigator.xr.requestSession("immersive-ar");

  // ...
}

مقداردهی اولیه `XRReferenceSpace`

یک XRReferenceSpace سیستم مختصات مورد استفاده برای اشیاء در دنیای مجازی را توصیف می‌کند. حالت 'local' برای یک تجربه AR مناسب‌ترین حالت است، با یک فضای مرجع که مبدأ آن نزدیک به بیننده است و ردیابی پایداری دارد.

this.localReferenceSpace در onSessionStarted() با کد زیر مقداردهی اولیه کنید:

this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

تعریف حلقه انیمیشن

requestAnimationFrame مربوط به XRSession برای شروع یک حلقه رندرینگ، مشابه window.requestAnimationFrame ، استفاده کنید.

در هر فریم، onXRFrame با یک timestamp و یک XRFrame فراخوانی می‌شود.

پیاده‌سازی onXRFrame را تکمیل کنید. وقتی یک فریم ترسیم شد، درخواست بعدی را با اضافه کردن موارد زیر در صف قرار دهید:

// Queue up the next draw request.
this.xrSession.requestAnimationFrame(this.onXRFrame);

کد مربوط به تنظیم محیط گرافیکی را به انتهای onXRFrame اضافه کنید:

// Bind the graphics framebuffer to the baseLayer's framebuffer.
const framebuffer = this.xrSession.renderState.baseLayer.framebuffer;
this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer);
this.renderer.setFramebuffer(framebuffer);

برای تعیین موقعیت بیننده، از XRFrame.getViewerPose() استفاده کنید. این XRViewerPose موقعیت و جهت دستگاه را در فضا توصیف می‌کند. همچنین شامل آرایه‌ای از XRView ها است که هر دیدگاهی را که صحنه باید از آن رندر شود تا به درستی روی دستگاه فعلی نمایش داده شود، توصیف می‌کند. در حالی که واقعیت مجازی استریوسکوپیک دو دیدگاه (یکی برای هر چشم) دارد، دستگاه‌های واقعیت افزوده فقط یک دیدگاه دارند.
اطلاعات موجود در pose.views معمولاً برای پیکربندی ماتریس دید و ماتریس تصویر دوربین مجازی استفاده می‌شود. این امر بر نحوه چیدمان صحنه به صورت سه‌بعدی تأثیر می‌گذارد. وقتی دوربین پیکربندی شود، صحنه قابل رندر شدن است.
به پایین onXRFrame اضافه کنید:

// Retrieve the pose of the device.
// XRFrame.getViewerPose can return null while the session attempts to establish tracking.
const pose = frame.getViewerPose(this.localReferenceSpace);
if (pose) {
  // In mobile AR, we only have one view.
  const view = pose.views[0];

  const viewport = this.xrSession.renderState.baseLayer.getViewport(view);
  this.renderer.setSize(viewport.width, viewport.height);

  // Use the view's transform matrix and projection matrix to configure the THREE.camera.
  this.camera.matrix.fromArray(view.transform.matrix);
  this.camera.projectionMatrix.fromArray(view.projectionMatrix);
  this.camera.updateMatrixWorld(true);

  // Render the scene with THREE.WebGLRenderer.
  this.renderer.render(this.scene, this.camera);
}

آن را آزمایش کنید

برنامه را اجرا کنید؛ در دستگاه در حال توسعه خود، به work/index.html مراجعه کنید. باید تصویر دوربین خود را با مکعب‌هایی که در فضا شناور هستند و با حرکت دستگاه، پرسپکتیو آنها تغییر می‌کند، ببینید. ردیابی با حرکت بیشتر شما بهبود می‌یابد، بنابراین بررسی کنید که چه چیزی برای شما و دستگاهتان مناسب است.

اگر در اجرای برنامه مشکلی دارید، بخش‌های مقدمه و راه‌اندازی محیط توسعه را بررسی کنید.

۴. یک رتیکل هدف‌گیری اضافه کنید

با راه‌اندازی اولیه صحنه واقعیت افزوده، زمان آن رسیده است که با استفاده از یک تست ضربه، تعامل با دنیای واقعی را آغاز کنید. در این بخش، شما یک تست ضربه را برنامه‌ریزی می‌کنید و از آن برای یافتن یک سطح در دنیای واقعی استفاده می‌کنید.

درک تست ضربه

تست برخورد عموماً روشی برای ترسیم یک خط مستقیم از یک نقطه در فضا در جهتی خاص و تعیین این است که آیا با اشیاء مورد نظر تلاقی می‌کند یا خیر. در این مثال، شما دستگاه را به سمت مکانی در دنیای واقعی نشانه می‌گیرید. تصور کنید که یک پرتو از دوربین دستگاه شما حرکت می‌کند و مستقیماً به دنیای فیزیکی روبروی آن می‌رسد.

رابط برنامه‌نویسی کاربردی دستگاه WebXR به شما این امکان را می‌دهد که بدانید آیا این پرتو با اشیاء موجود در دنیای واقعی برخورد کرده است یا خیر، که این امر با قابلیت‌های اساسی واقعیت افزوده و درک شما از جهان تعیین می‌شود.

توضیح دهنده تست ضربه

درخواست `XRSession` با ویژگی‌های اضافی

برای انجام تست‌های ضربه، هنگام درخواست XRSession به ویژگی‌های اضافی نیاز است.

در app.js ، فایل navigator.xr.requestSession را پیدا کنید.
ویژگی‌های "hit-test" و "dom-overlay" را در صورت requiredFeature به شرح زیر اضافه کنید:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"]
});

DOM overlay را پیکربندی کنید. عنصر document.body را روی نمای دوربین AR به صورت زیر لایه بندی کنید:

this.xrSession = await navigator.xr.requestSession("immersive-ar", {
  requiredFeatures: ["hit-test", "dom-overlay"],
  domOverlay: { root: document.body }
});

یک اعلان حرکت اضافه کنید

ARCore زمانی بهترین عملکرد را دارد که درک کافی از محیط ایجاد شده باشد. این امر از طریق فرآیندی به نام محلی‌سازی و نقشه‌برداری همزمان (SLAM) حاصل می‌شود که در آن از نقاط ویژگی بصری متمایز برای محاسبه تغییر در مکان و ویژگی‌های محیط استفاده می‌شود.

از "dom-overlay" مرحله قبل برای نمایش اعلان حرکت در بالای جریان دوربین استفاده کنید.

یک <div> به index.html با شناسه stabilization اضافه کنید. این <div> یک انیمیشن به کاربران نشان می‌دهد که وضعیت تثبیت را نشان می‌دهد و از آنها می‌خواهد که با دستگاه خود حرکت کنند تا فرآیند SLAM بهبود یابد. این انیمیشن زمانی نمایش داده می‌شود که کاربر در حالت واقعیت افزوده (AR) قرار دارد و زمانی که رتیکل سطحی را پیدا می‌کند، پنهان می‌شود که توسط کلاس‌های <body> کنترل می‌شود.

  <div id="stabilization"></div>

</body>
</html>

یک رتیکل اضافه کنید

از یک رتیکل برای نشان دادن مکانی که نمای دستگاه به آن اشاره می‌کند استفاده کنید.

در app.js ، فراخوانی DemoUtils.createCubeScene() در setupThreeJs() را با یک Three.Scene() خالی جایگزین کنید.

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
}

صحنه جدید را با یک شیء که نشان دهنده نقطه برخورد است، پر کنید. کلاس Reticle ارائه شده، بارگذاری مدل reticle را در shared/utils.js مدیریت می‌کند.
Reticle در setupThreeJs() به صحنه اضافه کنید:

setupThreeJs() {
  // ...

  // this.scene = DemoUtils.createCubeScene();
  this.scene = DemoUtils.createLitScene();
  this.reticle = new Reticle();
  this.scene.add(this.reticle);
}

برای انجام تست برخورد، از یک XRReferenceSpace جدید استفاده می‌کنید. این فضای مرجع، یک سیستم مختصات جدید را از دید بیننده نشان می‌دهد تا پرتویی ایجاد کند که با جهت دید همسو باشد. این سیستم مختصات در XRSession.requestHitTestSource() استفاده می‌شود که می‌تواند تست‌های برخورد را محاسبه کند.

کد زیر را به onSessionStarted() در app.js اضافه کنید:

async onSessionStarted() {
  // ...

  // Setup an XRReferenceSpace using the "local" coordinate system.
  this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

  // Add these lines:
  // Create another XRReferenceSpace that has the viewer as the origin.
  this.viewerSpace = await this.xrSession.requestReferenceSpace("viewer");
  // Perform hit testing using the viewer as origin.
  this.hitTestSource = await this.xrSession.requestHitTestSource({ space: this.viewerSpace });

  // ...
}

با استفاده از این hitTestSource ، هر فریم را تست ضربه (hit test) انجام دهید:
- اگر هیچ نتیجه‌ای برای تست ضربه وجود نداشته باشد، ARCore زمان کافی برای ایجاد درک از محیط نداشته است. در این حالت، با استفاده از <div> تثبیت‌کننده، از کاربر بخواهید دستگاه را حرکت دهد.
- اگر نتیجه‌ای حاصل شد، رتیکل را به آن مکان منتقل کنید.
برای جابجایی رتیکل onXRFrame تغییر دهید:

onXRFrame = (time, frame) => {
  // ... some code omitted ...
  this.camera.updateMatrixWorld(true);

  // Add the following:
  const hitTestResults = frame.getHitTestResults(this.hitTestSource);

  if (!this.stabilized && hitTestResults.length > 0) {
    this.stabilized = true;
    document.body.classList.add("stabilized");
  }
  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(this.localReferenceSpace);

    // update the reticle position
    this.reticle.visible = true;
    this.reticle.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z)
    this.reticle.updateMatrixWorld(true);
  }
  // More code omitted.
}

افزودن رفتار با لمس صفحه

یک XRSession می‌تواند رویدادهایی را بر اساس تعامل کاربر از طریق رویداد select منتشر کند، که نشان دهنده اقدام اصلی است. در WebXR در دستگاه‌های تلفن همراه، اقدام اصلی ضربه زدن روی صفحه نمایش است.

یک شنونده رویداد select در پایین onSessionStarted اضافه کنید:

this.xrSession.addEventListener("select", this.onSelect);

در این مثال، ضربه روی صفحه باعث می‌شود یک گل آفتابگردان در محل نشانه‌گیری قرار گیرد.

یک پیاده‌سازی برای onSelect در کلاس App ایجاد کنید:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);
  }
}

برنامه را تست کنید

شما یک نشانه‌گیری ایجاد کرده‌اید که می‌توانید با استفاده از دستگاه خود و با استفاده از تست‌های ضربه، آن را هدف‌گیری کنید. هنگام ضربه زدن روی صفحه، باید بتوانید یک گل آفتابگردان را در مکانی که نشانه‌گیری تعیین می‌کند، قرار دهید.

هنگام اجرای برنامه، باید بتوانید یک رتیکل را که سطح زمین را ردیابی می‌کند، ببینید. اگر اینطور نیست، سعی کنید با تلفن خود به آرامی اطراف را نگاه کنید.
وقتی رتیکل را دیدید، روی آن ضربه بزنید. یک گل آفتابگردان باید روی آن قرار گیرد. ممکن است لازم باشد کمی جابجا شوید تا پلتفرم واقعیت افزوده زیرین بتواند سطوح دنیای واقعی را بهتر تشخیص دهد. نور کم و سطوح بدون ویژگی، کیفیت درک صحنه را کاهش می‌دهد و احتمال پیدا نشدن هدف را افزایش می‌دهد. اگر با مشکلی مواجه شدید، کد step-04/app.js را بررسی کنید تا نمونه‌ای از این مرحله را ببینید.

۵. سایه اضافه کنید

خلق یک صحنه واقع‌گرایانه شامل عناصری مانند نورپردازی مناسب و سایه‌ها روی اشیاء دیجیتال است که واقع‌گرایی و حس غوطه‌وری در صحنه را افزایش می‌دهد.

نورپردازی و سایه‌ها توسط three.js مدیریت می‌شوند. می‌توانید مشخص کنید که کدام نورها باید سایه ایجاد کنند، کدام متریال‌ها باید این سایه‌ها را دریافت و رندر کنند و کدام مش‌ها می‌توانند سایه ایجاد کنند. صحنه این برنامه شامل نوری است که سایه ایجاد می‌کند و یک سطح صاف برای رندر کردن سایه‌ها.

سایه‌ها را در WebGLRenderer three.js فعال کنید. پس از ایجاد رندرر، مقادیر زیر را در shadowMap آن تنظیم کنید:

setupThreeJs() {
  ...
  this.renderer = new THREE.WebGLRenderer(...);
  ...
  this.renderer.shadowMap.enabled = true;
  this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  ...
}

صحنه نمونه ایجاد شده در DemoUtils.createLitScene() شامل یک شیء به نام shadowMesh است، یک سطح صاف و افقی که فقط سایه‌ها را رندر می‌کند. این سطح در ابتدا دارای موقعیت Y برابر با 10000 واحد است. پس از قرار دادن یک گل آفتابگردان، shadowMesh را طوری حرکت دهید که هم ارتفاع سطح دنیای واقعی باشد، به طوری که سایه گل روی زمین دنیای واقعی رندر شود.

در onSelect ، پس از افزودن clone به صحنه، کدی را برای تغییر موقعیت صفحه سایه اضافه کنید:

onSelect = () => {
  if (window.sunflower) {
    const clone = window.sunflower.clone();
    clone.position.copy(this.reticle.position);
    this.scene.add(clone);

    const shadowMesh = this.scene.children.find(c => c.name === "shadowMesh");
    shadowMesh.position.y = clone.position.y;
  }
}

آن را آزمایش کنید

هنگام قرار دادن گل آفتابگردان، باید بتوانید سایه آن را ببینید. اگر با هر مشکلی مواجه شدید، کد final/app.js را بررسی کنید تا مثالی از این مرحله را ببینید.

۶. منابع اضافی

تبریک! به پایان این آزمایشگاه کدنویسی در مورد واقعیت افزوده با استفاده از WebXR رسیدید.

با استفاده از WebXR Device API یک برنامه واقعیت افزوده (AR) بسازید

۱. قبل از شروع

واقعیت افزوده (AR) چیست؟

آنچه خواهید ساخت

آنچه یاد خواهید گرفت

آنچه نیاز دارید

۲. محیط توسعه خود را تنظیم کنید

کد را دانلود کنید

نصب وب سرور

تنظیم فورواردینگ پورت

تنظیمات خود را تأیید کنید

۳. پیکربندی WebXR

صفحه HTML

کد جاوا اسکریپت کلیدی را باز کنید

پشتیبانی WebXR و AR را بررسی کنید

درخواست XRSession

مقداردهی اولیه XRReferenceSpace

تعریف حلقه انیمیشن

آن را آزمایش کنید

۴. یک رتیکل هدف‌گیری اضافه کنید

درک تست ضربه

درخواست XRSession با ویژگی‌های اضافی

یک اعلان حرکت اضافه کنید

یک رتیکل اضافه کنید

افزودن رفتار با لمس صفحه

برنامه را تست کنید

۵. سایه اضافه کنید

آن را آزمایش کنید

۶. منابع اضافی

بیشتر بدانید

درخواست `XRSession`

مقداردهی اولیه `XRReferenceSpace`

درخواست `XRSession` با ویژگی‌های اضافی