يضمن نظام الرسوم المتحركة three.js ، إمكانية تحريك الخصائص المختلفة لنماذجك: عظام [page:SkinnedMesh skinned and rigged model] ، [page:Geometry.morphTargets morph targets] ، خصائص مادة مختلفة (ألوان ، عتامة ، منطقية) ، الرؤية والتحولات. يمكن أن تتلاشى الخصائص المتحركة، أو تتلاشى وتتشوه. يمكن تغيير مقاييس الوزن والوقت للرسوم المتحركة المتزامنة المختلفة على نفس الكائن وكذلك على كائنات مختلفة بشكل مستقل. يمكن مزامنة الرسوم المتحركة المختلفة على نفس الشيء وعلى كائنات مختلفة.
<br/><br/>
لتحقيق كل هذا في نظام واحد متجانس ، نظام الرسوم المتحركة three.js شعد تغييرا هامًا في عام [link:https://github.com/mrdoob/three.js/issues/6881 2015] (احذر من المعلومات القديمة!) ، ولديه الآن بنية مشابهة لـ Unity / Unreal Engine 4. تقدم هذه الصفحة لمحة موجزة عن المكونات الرئيسية للنظام وكيف تعمل معًا.
</p>
<h3>مقاطع الحركات</h3>
<pclass="desc">
إذا قمت باستيراد كائن ثلاثي الأبعاد متحرك بنجاح (لا يهم ما إذا كان يحتوي على عظام أو أهداف تشكيل أو كليهما) - على سبيل المثال تصديره من Blender مع [link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter] وتحميله في مشهد three.js باستخدام 333 - يضمن أن توجد مصفوفة تسمى "الرسوم المتحركة" ، تحتوي على 444 لهذا النموذج (انظر قائمة برامج التحميل المتوفرة أدناه).
<br/><br/>
يحتفظ كل مقطع *AnimationClip* عادةً ببيانات نشاط معين للكائن. إذا كانت الشبكة عبارة عن شخصية ، على سبيل المثال ، فقد يكون هناك مقطع Animation واحد للمشي ، وثاني للقفز ، وثالث للتنقل وما إلى ذلك.
</p>
<h3>مسارات الإطار الأساسي (Keyframe tracks)</h3>
<pclass="desc">
داخل ملف *AnimationClip* ، يتم تخزين البيانات الخاصة بكل خاصية متحركة في [page:KeyframeTrack]. بافتراض أن كائن حرف له هيكل عظمي [page:Skeleton skeleton] ، يمكن لمسار إطار رئيسي واحد تخزين البيانات لتغييرات موضع عظم الذراع السفلي بمرور الوقت ، وهو أمر مختلف تتبع البيانات الخاصة بتغييرات دوران نفس العظم ، وثلث موضع المسار ، دوران أو تحجيم عظم آخر ، وما إلى ذلك. يجب أن يكون واضحًا ، أن AnimationClip يمكن أن يتكون من الكثير من هذه المسارات.
<br/><br/>
بافتراض أن النموذج يحتوي على [page:Geometry.morphTargets morph targets] (على سبيل المثال ، أحد أهداف التشكيل يظهر وجهًا ودودًا والآخر يظهر وجهًا غاضبًا) ، فإن كل مسار يحمل المعلومات المتعلقة بكيفية تغيير الرقم [page:Mesh.morphTargetInfluences influence] لهدف تشكيل معين أثناء أداء المقطع.
</p>
<h3>خالط الحركات (Animation Mixer)</h3>
<pclass="desc">
تشكل البيانات المخزنة أساس الرسوم المتحركة فقط - يتم التحكم في التشغيل الفعلي بواسطة [page:AnimationMixer]. يمكنك تخيل هذا ليس فقط كمشغل للرسوم المتحركة ، ولكن ك كجهاز أو مثل وحدة التحكم في المزج الحقيقي ، والتي يمكنها التحكم في العديد من الرسوم المتحركة في وقت واحد ومزجها ودمجها.
</p>
<h3>أحداث الحركات (Animation Actions)</h3>
<pclass="desc">
يحتوي *AnimationMixer* نفسه على عدد قليل جدًا من الخصائص والطرق (العامة) ، لأنه يمكن التحكم فيه بواسطة [page:AnimationAction AnimationActions]. من خلال تكوين *AnimationAction* يمكنك تحديد وقت تشغيل *AnimationClip* معين أو إيقافه مؤقتًا أو إيقاف تشغيله أحد الخلاطات ، إذا كان يجب تكرار المقطع وعدد مرات تكرارها ، سواء كان يجب إجراؤه بتلاشي أو مقياس زمني ، وبعض الأشياء الإضافية ، مثل التلاشي أو التزامن.
</p>
<h3>تحريك مجموعة من النماذج</h3>
<pclass="desc">
إذا كنت تريد أن تطبق على مجموعة من الكائنات حالة حركة مشتركة ، يمكنك استخدام [page:AnimationObjectGroup]..
</p>
<h3>التنسيقات و عناصر التحميل المدعومة</h3>
<pclass="desc">
لاحظ أنه لا تتضمن جميع تنسيقات النماذج الرسوم المتحركة (لا سيما OBJ) ، وأن بعض أدوات تحميل three.js فقط تدعم [page:AnimationClip AnimationClip] تسلسلًا. العديد منها يدعم هذا النوع من الرسوم المتحركة:
</p>
<ul>
<li>[page:ObjectLoader THREE.ObjectLoader]</li>
<li>THREE.BVHLoader</li>
<li>THREE.ColladaLoader</li>
<li>THREE.FBXLoader</li>
<li>[page:GLTFLoader THREE.GLTFLoader]</li>
<li>THREE.MMDLoader</li>
</ul>
<pclass="desc">
لاحظ أن 3ds max و Maya لا يمكنهم حاليًا تصدير العديد من الرسوم المتحركة (بمعنى الرسوم المتحركة غير الموجودة في نفس المخطط الزمني) مباشرةً إلى ملف واحد.
</p>
<h2>مثال</h2>
<code>
var mesh;
// Create an AnimationMixer, and get the list of AnimationClip instances
var mixer = new THREE.AnimationMixer( mesh );
var clips = mesh.animations;
// Update the mixer on each frame
function update () {
mixer.update( deltaSeconds );
}
// Play a specific animation
var clip = THREE.AnimationClip.findByName( clips, 'dance' );
يقدم هذا الدليل لمحة موجزة عن المكونات الأساسية لتطبيق VR مخصص للويب بإستعمال three.js.
</p>
<h2>سير العمل</h2>
<p>
أولاً ، عليك ضم [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js] في مشروعك.
</p>
<code>
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
</code>
<p>
*VRButton.createButton()* يقوم بأمرين مهمين: أولا يقوم بإنشاء زر يشير إلى توافق الواقع الافتراضي. إلى جانب ذلك ، يبدأ جلسة VR إذا قام المستخدم بتنشيط الزر. كل ما عليك فعله هو إضافة السطر التالي من التعليمات البرمجية إلى تطبيقك.
بعد ذلك ، عليك توجيه نموذج *WebGLRenderer* لتمكين عرض XR.
</p>
<code>
renderer.xr.enabled = true;
</code>
<p>
أخيرًا ، يجب عليك ضبط حلقة الرسوم المتحركة لأننا لا نستطيع استخدام وظيفة *window.requestAnimationFrame()* المعروفة لدينا. بالنسبة لمشاريع الواقع الافتراضي ، نستخدم [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
يبدو الحد الأدنى من الكود كما يلي:
</p>
<code>
renderer.setAnimationLoop( function () {
renderer.render( scene, camera );
} );
</code>
<h2>الخطوات التالية</h2>
<p>
ألق نظرة على أحد أمثلة WebVR الرسمية لرؤية سير العمل.<br/><br/>
<h1>كيفية استخدام المعالجة اللاحقة<br/> (post-processing)</h1>
<p>
تعرض العديد من تطبيقات three.js كائناتها ثلاثية الأبعاد مباشرة على الشاشة. ومع ذلك ، في بعض الأحيان ، تريد تطبيق واحد أو أكثر من التأثيرات الرسومية مثل Depth-Of-Field أو Bloom أو Film Grain أو أنواع مختلفة من Anti-aliasing. المعالجة اللاحقة هي طريقة مستخدمة على نطاق واسع لتنفيذ مثل هذه التأثيرات. أولاً ، يتم تحويل المشهد إلى هدف عرض يمثل مخزنًا مؤقتًا في ذاكرة بطاقة الفيديو.
في الخطوة التالية ، تقوم واحدة أو أكثر من ممرات ما بعد المعالجة بتطبيق المرشحات والتأثيرات على المخزن المؤقت للصور قبل أن يتم عرضه في النهاية على الشاشة.
</p>
<p>
توفر three.js حلاً كاملاً لعملية المعالجة بتوفير [page:EffectComposer] الذي يتولى تنفيذ مثل هذه الأعمال.
</p>
<h2>سير العمل</h2>
<p>
الخطوة الأولى في العملية هي استيراد جميع الملفات الضرورية من دليل الأمثلة. يفترض الدليل أنك تستخدم الرقم الرسمي [link:https://www.npmjs.com/package/three npm package] من three.js. في العرض التوضيحي الأساسي في هذا الدليل ، نحتاج إلى الملفات التالية.
</p>
<code>
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
</code>
<p>
بعد أن يتم استرداد جميع الملفات بنجاح ، يمكنك إنشاء الملحن الخاص بنا بتمرير نموذج من [page:WebGLRenderer].
</p>
<code>
var composer = new EffectComposer( renderer );
</code>
<p>
عند استخدام الملحن ، من الضروري تغيير حلقة الرسوم المتحركة للتطبيق. بدلاً من استدعاء طريقة العرض [page:WebGLRenderer] ، نستخدم الآن النظير الخاص بها [page:EffectComposer].
</p>
<code>
function animate() {
requestAnimationFrame( animate );
composer.render();
}
</code>
<p>
أصبح الملحن جاهزًا الآن ، لذا من الممكن تكوين سلسلة ممرات ما بعد المعالجة. هذه التمريرات مسؤولة عن إنشاء الإخراج المرئي النهائي للتطبيق. تتم معالجتها بترتيب الإضافة / الإدراج. في مثالنا ، تم تنفيذ *RenderPass* أولاً ثم *GlitchPass*. يتم عرض آخر تمرير تم تمكينه في السلسلة تلقائيًا على الشاشة. يبدو إعداد التصاريح كما يلي:
</p>
<code>
var renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );
var glitchPass = new GlitchPass();
composer.addPass( glitchPass );
</code>
<p>
يتم وضع *RenderPass* بشكل طبيعي في بداية السلسلة من أجل توفير المشهد الذي تم عرضه كمدخل لخطوة ما بعد المعالجة التالية. في حالتنا ، ستستخدم *GlitchPass* بيانات الصورة هذه لتطبيق تأثير خلل جامح. تحقق من هذا [link:https://threejs.org/examples/webgl_postprocessing_glitch live example] لتراها في العمل.
</p>
<h2>تصاريح مدمجة</h2>
<p>
يمكنك استخدام مجموعة واسعة من تصاريح ما بعد المعالجة التي يوفرها المحرك. يتم الاحتفاظ بها في الدليل [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
</p>
<h2>تصاريح مخصصة</h2>
<p>
في بعض الأحيان تريد كتابة تظليل مخصص للمعالجة اللاحقة وإدراجه في سلسلة ممرات ما بعد المعالجة. في هذا السيناريو ، يمكنك استخدام *ShaderPass*. بعد استيراد الملف والتظليل المخصص الخاص بك ، يمكنك استخدام الكود التالي لإعداد المرور.
</p>
<code>
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
// later in your init routine
var luminosityPass = new ShaderPass( LuminosityShader );
composer.addPass( luminosityPass );
</code>
<p>
يوفر المستودع ملفًا يسمى [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] وهو رمز بداية جيد للتظليل المخصص الخاص بك. *CopyShader* فقط ينسخ محتويات الصورة من مخزن قراءة [page:EffectComposer] إلى مخزن الكتابة المؤقت الخاص به دون تطبيق أي تأثيرات.
يستخدم *Three.js* المصفوفات لتشفير عمليات التحويل ثلاثية الأبعاد --- الترجمات (الموضع) والتدوير والقياس. يحتوي كل مثيل [page:Object3D] على [page:Object3D.matrix matrix] يخزن موضع هذا الكائن وتدويره ومقياسه. تصف هذه الصفحة كيفية تحديث تحول الكائن.
</p>
<h2>خصائص الراحة و *matrixAutoUpdate*</h2>
<p>
هناك طريقتان لتحديث تحول الكائن(object):
</p>
<ol>
<li>
عدّل خصائص *position* و *quaternion* و *scale* الخاصة بالكائن ، واسمح لـ three.js بإعادة حساب مصفوفة الكائن من هذه الخصائص:
<code>
object.position.copy( start_position );
object.quaternion.copy( quaternion );
</code>
بشكل افتراضي ، يتم تعيين الخاصية *matrixAutoUpdate* على "true" ، وستتم إعادة حساب المصفوفة تلقائيًا. إذا كان الكائن ثابتًا ، أو كنت ترغب في التحكم يدويًا عند حدوث إعادة الحساب ، فيمكن الحصول على أداء أفضل من خلال تعيين الخاصية false:
<code>
object.matrixAutoUpdate = false;
</code>
وبعد تغيير أي خصائص ، قم بتحديث المصفوفة يدويًا:
<code>
object.updateMatrix();
</code>
</li>
<li>
قم بتعديل مصفوفة الكائن مباشرة. تحتوي فئة [page:Matrix4] على طرق مختلفة لتعديل المصفوفة:
لاحظ أنه <em>يجب</em> ضبط *matrixAutoUpdate* على *false* في هذه الحالة ، ويجب عليك التأكد من <em>عدم</em> استدعاء *updateMatrix*. سيؤدي استدعاء *updateMatrix* إلى إعاقة التغييرات اليدوية التي تم إجراؤها على المصفوفة ، وإعادة حساب المصفوفة من *position* ، *scale* ، وما إلى ذلك.
</li>
</ol>
<h2>مصفوفات وعالم الكائن</h2>
<p>
يخزن [page:Object3D.matrix matrix] كائن تحويل الكائن <em>بالنسبة</em> إلى [page:Object3D.parent parent] الكائن ؛ للحصول على تحول الكائن في إحداثيات <em>العالم</em> ، يجب عليك الوصول إلى [page:Object3D.matrixWorld] الكائن.
</p>
<p>
عندما تتغير حالة الكائن الأصل أو الكائن الفرعي ، يمكنك طلب تحديث [page:Object3D.matrixWorld matrixWorld] الكائن الفرعي عن طريق استدعاء [page:Object3D.updateMatrixWorld updateMatrixWorld]().
</p>
<h2>الدوران و Quaternion</h2>
<p>
يوفر Three.js طريقتين لتمثيل التدوير ثلاثي الأبعاد: [page:Euler Euler angles] و [page:Quaternion Quaternions] ، بالإضافة إلى طرق التحويل بين الاثنين. تخضع زوايا أويلر لمشكلة تسمى "gimballock" ، حيث يمكن أن تفقد بعض التكوينات درجة من الحرية (تمنع تدوير الكائن حول محور واحد). لهذا السبب ، يتم تخزين استدارة الكائن <em>دائمًا</em> في [page:Object3D.quaternion quaternion].
</p>
<p>
تضمنت الإصدارات السابقة من المكتبة خاصية *useQuaternion* والتي ، عند ضبطها على false ، ستؤدي إلى حساب [page:Object3D.matrix matrix] للكائن من زاوية أويلر. تم إيقاف هذه الممارسة - بدلاً من ذلك ، يجب عليك استخدام طريقة [page:Object3D.setRotationFromEuler setRotationFromEuler] ، والتي ستعمل على تحديث الرباعية.
