Get best of the week

أنشئ تجربة واقع افتراضي بصري سمعي باستخدام A-Frame و Tone.js

مرحبا يا هابر! أقدم لكم ترجمة المقالة "إنشاء تجربة سمعية / بصرية للواقع الافتراضي على الويب باستخدام A-Frame و Tone.js" لشون سوليفان.

فايرفوكس الواقع في Oculus Go

A-Frame هو إطار عمل لإنشاء واقع افتراضي على الويب. باستخدام رابط فقط ، يمكن لأي شخص لديه خوذة VR أو هاتف ذكي مزود بتقنية الواقع الافتراضي أن ينغمس في مساحة ثلاثية الأبعاد. Tone.js هي مكتبة جافا سكريبت لإنشاء الأصوات. دعونا نرى ما يحدث إذا تم دمجها.

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

<!DOCTYPE html>
<html>
<head>
  <title>Basic Scene with Environment - A-Frame</title>
  <meta name="description" content="Basic Scene with Environment - A-Frame">
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js">  </script>
  <script src="https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
</head>
<body>
  <a-scene environment="preset: starry">
    <a-camera>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
      </a-entity>    
    </a-camera>
  </a-scene>
</body>
</html>

انتبه للعنصر:
<a-entity cursor>
إنه داخل زنزانتنا. بعد ذلك بقليل ، سيسمح لك بالتواصل مع مركبنا. ولكن قبل البدء ، يجب عليك التأكد من تحميل المشروع بشكل صحيح.

عند فتح الصفحة ، يجب أن تشاهد سماء ثلاثية الأبعاد ونجوم وشبكة على الأرض. كل هذا تم إنشاؤه بواسطة مكون بيئة aframe عندما حددنا البيئة:

<a-scene environment=”preset: starry”>

إذا رغبت في ذلك ، يمكن تغيير البيئة ، فقط قم بإضافة قالب آخر. في وقت كتابة هذه السطور ، كان هناك 16 نموذجًا مختلفًا للبيئة من اختيارك.

السماء المرصعة بالنجوم

يعجبني أن مركبنا موجود في الفضاء ، والفضاء رائع. دعونا نجعل بيئتنا أشبه بسطح كوكب.

أولاً ، سنقوم بإزالة الشبكة وإضافة نسيج الأرض ، وتغيير:

<a-scene environment="preset: starry">

على ال

<a-scene environment="preset: starry; grid: none; groundTexture: walkernoise">

بعد أن بدأت الصفحة الآن ، سنرى أن كوكبنا لا يزال مظلماً للغاية بحيث لا يمكن رؤية شيء ما على الأرض. قم بإصلاح هذا عن طريق إضافة مصدر ضوء لمشهدنا.

<a-entity light="type: ambient; color: #CCC"></a-entity>

مع ذلك ، يجب أن يبدو المشهد شيئًا مثل هذا:

المشهد بالضوء

الآن بعد أن اكتشفنا المناطق المحيطة ، فلنبدأ في تطوير مركب.

إنشاء مكون


A-Frame مبني على نظام مكون - كيان . يسمح لك بإنشاء مكونات وإضافتها إلى الكيانات في مشهدنا.

لنقم بإنشاء ملف synth.js لمكوننا .

AFRAME.registerComponent('synth', {
  schema: {
    //   .
  },

  init: function () {
    //     .
  },

  update: function () {
    //     .
  },

  remove: function () {
    //       .
  },
  tick: function (time, timeDelta) {
    //     ()  .
  }
});

كما ترى ، تم دمج طرق دورة الحياة في A-Frame ، وهذا يجعل من السهل إضافة التفاعل إلى مشاريع WebVR الخاصة بنا. قاعدة المكونات جاهزة ، فلنلقِ نظرة على عملية إنشاء مركب باستخدام Tone.js.

Tone.js


Tone.js - إطار عمل لإنشاء موسيقى تفاعلية في مستعرض ، يعد مجمعا لواجهة برمجة تطبيقات Web Audio. إنشاء مُركِّب باستخدام tone.js أمر بسيط - ما عليك سوى كتابة سطر:

var synth = new Tone.Synth().toMaster()

لكننا سننشئ مذبذبًا ونضيف العديد من المعلمات لتبسيط المزيد من التخصيص:

const synth = new Tone.Synth({
  volume: -15, // -15dB
  oscillator: {
    type: 'triangle' //   -  ""
  },
  envelope: {
    attack: 0.05, //  -  
    release: 2 //   - 
  }
}).toMaster()

أضف هذا الكود مباشرة أعلى مكوننا في ملف synth.js . لدينا الآن مُركِّب ، لكننا نحتاج إلى تزويد مكوننا بطريقة للوصول إليه. هل تتذكر <مؤشر الكيان> الذي أضفناه إلى الكاميرا؟ يحتوي هذا المؤشر على معلمة fuse = "true" . سيسمح لنا هذا بتتبع كيفية تفاعل المؤشر مع الكيانات. أضف EventListener إلى المكون للصهر.

سنقوم بإنشاء EventListener في الحرف الأول طريقة لل دورة وإنشاء أسلوب جديد يسمى الزناد الذي يطلق Tone.js.

...
init: function () {
  //  EventListener     fuse
  this.el.addEventListener('fusing', this.trigger.bind(this))
},
//  ,  tone.js
trigger: function () {
  //tone.js ,     
  synth.triggerAttackRelease(this.data.note, this.data.duration)
},
...

أضف مكون المزج إلى المشهد.


لقد أنشأنا المكون ، لقد حان الوقت لإضافته إلى مشهد A-Frame.

للبدء ، أضفت Tone.js ومكون المزج إلى ترميزنا. انتبه لترتيب توصيل الملفات - يتم تحميل synth.js بعد Tone.js.

...
<script src="https://unpkg.com/tone@13.8.25/build/Tone.js"></script>
<script src="synth.js"></script>
</head>
...

نحتاج أيضًا إلى العديد من الكيانات التي سنرفق بها المكون. أضف بعض أشكال A-Frame القياسية للاستخدام في مشهدنا.

<a-scene>
...
<a-box synth="note: E4" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere synth="note: C4" position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder synth="note: G4" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
...

لاحظ سمة المركب . هذا هو العنصر الذي أنشأناه. "المركب" هو الاسم الذي سجلنا به
AFRAME.registerComponent ('synth'، {})
وأعلننا "ملاحظة" في مخطط المكون. هناك أيضًا خاصية "Duration" - يمكننا استخدامها لتغيير طول الملاحظة. على سبيل المثال:
synth = "note: E4؛ المدة: 8n »
سيلعب 1/8 من النوتة الكاملة ، وليس المعيار 1/4.

الآن ، بعد أن فتحت المشهد في المتصفح ، سنرى أرقامنا ، وعندما تحوم فوقها ، يجب تشغيل الملاحظة من مكون المزج الخاص بنا.

شخصيات موسيقية

استخدام وحدة تحكم Oculus Go


يعمل المشهد الآن على هذا النحو - يتم إصلاح المؤشر في وسط الشاشة. على خوذات الواقع الافتراضي ، يسمى هذا التحكم "المرئي". عند تدوير الرأس ، يتحرك المؤشر في اتجاه حركة المستخدم. هذه تجربة طبيعية تمامًا وتعمل جيدًا للعديد من المشاريع. ولكن ماذا لو أردنا التحكم في المزج باستخدام وحدة تحكم VR؟ تحريك ذراعيك وجعل الموسيقى تبدو ممتعة ، لذا دعنا نغير المشهد لاستخدام وحدة تحكم Oculus Go.

أولاً ، أضف بعض الكيانات إلى مشهدنا - وحدة التحكم و raycaster.

...
<a-entity oculus-go-controls>
<a-entity laser-controls raycaster="far: 200; interval: 100"></a-entity>
...

هنا لدينا كياننا الخاص للتحكم في Oculus Go ، بالإضافة إلى كيان واحد لـ raycaster ، والذي سيتم تشغيله كل 100 مللي ثانية.

الآن دعنا نعدل مكون المزج للتحكم في Oculus. نقوم بذلك عن طريق إضافة raycaster حسب مكوننا.

AFRAME.registerComponent('synth', {
  dependencies: ['raycaster'],
...

بعد ذلك ، في طريقة التهيئة ، قم بتغيير EventListener - يجب أن يتتبع الحدث:
تقاطع raycaster


init: function () {
  this.el.addEventListener('raycaster-intersection', this.trigger.bind(this))
},
...

يجب أن تُظهر بداية المشهد في Oculus Go وحدة التحكم الخاصة بك - ويجب أن يبدأ عنصر التحكم بالليزر في المزج الذي يقوم بتشغيل الملاحظات عند المرور فوق الأرقام.

يذهب كوة

إذا كنت ترغب في إلقاء نظرة فاحصة على المشروع ، يمكنك تشغيله ورؤية شفرة المصدر هنا - glitch.com/~space-synth-vr

قيد التوقيف


الآن لدينا مشهد بسيط مع مُركِّب للواقع الافتراضي وهناك عدد كبير من الفرص لتحسينه. يمكننا إضافة المزيد من الكائنات للتفاعل والمزيد من المُركِّبات والتأثيرات للمكون. يمكننا تحريك الأشياء بناءً على بعض الأحداث. مع نمو المشهد ، يجب أن تفكر في الأداء. لحسن الحظ ، يحتوي A-Frame على العديد من الميزات المضمنة التي يمكن أن تساعد في هذه المشكلة.

فيما يلي بعض الروابط المفيدة تفاعل

مكونات
Raycaster
والتحكم في
Tone.js
رمز مصدر المشروع

شكرًا لقراءتك.

More articles:


All Articles