شروع کار با Three.js

مقدمه

من از Three.js برای برخی از آزمایش‌هایم استفاده کرده‌ام، و این کار واقعاً عالی برای از بین بردن سردردهای سه بعدی در مرورگر است. با آن می‌توانید دوربین‌ها، اشیا، نورها، متریال‌ها و موارد دیگر ایجاد کنید، و یک انتخاب رندر دارید، به این معنی که می‌توانید تصمیم بگیرید که آیا می‌خواهید صحنه شما با استفاده از بوم HTML 5، WebGL یا SVG کشیده شود. و از آنجایی که متن باز است، حتی می توانید با پروژه درگیر شوید. اما در حال حاضر روی چیزهایی که با بازی با آن به عنوان موتور آموخته‌ام تمرکز می‌کنم و برخی از اصول اولیه را با شما صحبت می‌کنم.

با وجود همه شگفتی‌های Three.js، ممکن است زمان‌هایی وجود داشته باشد که ممکن است با مشکل مواجه شوید. معمولاً باید زمان زیادی را با مثال‌ها، مهندسی معکوس و (در مورد من مطمئنا) جستجوی عملکردهای خاص و پرسیدن سؤالات از طریق GitHub زمان زیادی صرف کنید. اگر شما به عنوان سوال، به هر حال، من متوجه شده ام که آقای doob و AlteredQualia بسیار مفید هستند!

1. اصول اولیه

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

در دنیای سه بعدی خود ما برخی از موارد زیر را خواهیم داشت که شما را در روند ایجاد آنها راهنمایی خواهم کرد:

1. یک صحنه
2. یک رندر
3. یک دوربین
4. یک یا دو شی (با مواد)

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

2. پشتیبانی

فقط یک یادداشت سریع در مورد پشتیبانی در مرورگرها. بر اساس تجربه من، مرورگر کروم گوگل بهترین مرورگر برای کار با رندرهای پشتیبانی شده و سرعت موتور جاوا اسکریپت است. کروم از Canvas، WebGL و SVG پشتیبانی می کند و فوق العاده سریع است. فایرفاکس با ظهور نسخه 4 در رتبه دوم قرار دارد. به نظر می رسد موتور جاوا اسکریپت آن کمی کندتر از کروم است، اما باز هم پشتیبانی آن از فناوری های رندر عالی است. Opera و Safari در حال اضافه کردن پشتیبانی WebGL هستند، اما نسخه‌های فعلی آنها فقط از canvas پشتیبانی می‌کنند. اینترنت اکسپلورر (نسخه 9+) فقط از رندر بوم پشتیبانی می کند، و من چیزی از برنامه مایکروسافت برای اضافه کردن قابلیت های WebGL نشنیده ام.

3. صحنه را تنظیم کنید

من فرض می‌کنم مرورگری را انتخاب کرده‌اید که از همه فناوری‌های رندر پشتیبانی می‌کند، و می‌خواهید با canvas یا WebGL رندر کنید، زیرا آنها گزینه‌های استانداردتری هستند. Canvas به طور گسترده‌تری نسبت به WebGL پشتیبانی می‌شود، اما شایان ذکر است که WebGL روی GPU کارت گرافیک شما اجرا می‌شود، به این معنی که CPU شما می‌تواند روی سایر کارهای غیر رندر مانند هر تعامل فیزیکی یا کاربر که می‌خواهید انجام دهید تمرکز کند.

صرف نظر از رندر انتخابی شما، باید به خاطر داشته باشید که جاوا اسکریپت برای عملکرد باید بهینه شود. 3D کار سبکی برای یک مرورگر نیست (و عالی است که حتی ممکن است)، بنابراین مراقب باشید که متوجه شوید هر گلوگاهی در کد شما کجاست و اگر می توانید آنها را حذف کنید!

بنابراین با این گفته، و با این فرض که سه.js را دانلود کرده اید و در فایل HTML خود قرار داده اید، چگونه یک صحنه را تنظیم می کنید؟ مثل این:

// set the scene size
var WIDTH = 400,
HEIGHT = 300;

// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
                VIEW_ANGLE,
                ASPECT,
                NEAR,
                FAR );

var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

خیلی سخت نیست، واقعا!

4. ساخت مش

بنابراین ما یک صحنه، یک دوربین و یک رندر داریم (من یک WebGL را در کد نمونه خود انتخاب کردم) اما در واقع چیزی برای ترسیم نداریم. Three.js در واقع از بارگیری چند نوع فایل استاندارد مختلف پشتیبانی می‌کند، که اگر مدل‌هایی را از Blender، Maya، Cinema4D یا هر چیز دیگری خروجی می‌دهید، عالی است. برای ساده نگه داشتن چیزها (در نهایت این مربوط به شروع کار است!) من در مورد اصول اولیه صحبت خواهم کرد. اولیه ها مش های هندسی هستند، مشبک های نسبتا ابتدایی مانند کره ها، صفحات، مکعب ها و استوانه ها. Three.js به شما این امکان را می دهد که این نوع اولیه را به راحتی ایجاد کنید:

// set up the sphere vars
var radius = 50, segments = 16, rings = 16;

// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),

sphereMaterial);

// add the sphere to the scene
scene.add(sphere);

همه چیز خوب است، اما در مورد مواد برای کره چطور؟ در کد ما از یک متغیر sphereMaterial استفاده کرده ایم اما هنوز آن را تعریف نکرده ایم. ابتدا باید در مورد مواد با جزئیات بیشتر صحبت کنیم.

5. مواد

بدون شک این یکی از مفیدترین قسمت های Three.js است. تعدادی از مواد رایج (و بسیار مفید) را در اختیار شما قرار می دهد تا روی مش های خود اعمال کنید:

1. "Basic" - که فقط به این معنی است که "بدون روشنایی" ارائه می شود
2. لامبرت
3. فونگ

موارد بیشتری وجود دارد، اما باز هم برای سادگی، به شما اجازه می‌دهم آن‌ها را خودتان کشف کنید. در مورد WebGL به ویژه این مواد می توانند یک نجات دهنده زندگی باشند. چرا؟ خوب چون در WebGL باید برای هر چیزی که رندر می شود، سایه بان بنویسید. سایه بان ها به خودی خود موضوع بزرگی هستند، اما به طور خلاصه با GLSL (زبان سایه بان OpenGL) نوشته شده اند، که به GPU می گوید که یک چیز چگونه باید به نظر برسد. این بدان معناست که شما باید ریاضیات نورپردازی، بازتاب و غیره را تقلید کنید. می تواند خیلی سریع پیچیده شود. با تشکر از Three.js، اگر نمی‌خواهید مجبور نیستید این کار را انجام دهید زیرا آن را برای شما انتزاع می‌کند. با این حال، اگر می‌خواهید سایه‌بان بنویسید، می‌توانید این کار را با MeshShaderMaterial نیز انجام دهید، بنابراین یک راه‌اندازی انعطاف‌پذیر است.

با این حال، در حال حاضر، اجازه دهید یک ماده لامبرت را به کره اعمال کنیم:

// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});

همچنین شایان ذکر است که ویژگی‌های دیگری نیز وجود دارد که می‌توانید هنگام ایجاد یک ماده به غیر از رنگ مشخص کنید، مانند صاف کردن یا نقشه‌های محیطی. شما باید صفحه ویکی را بررسی کنید تا خواص مختلفی را که می توانید بر روی مواد و در واقع هر شیئی که موتور برای شما فراهم می کند تنظیم کنید. همچنین threejs.org اخیراً راه اندازی شده است که نمای جذاب تری از API ارائه می دهد.

6. چراغ ها!

اگر بخواهید صحنه را در حال حاضر رندر کنید، یک دایره قرمز خواهید دید. با وجود اینکه ما یک ماده لامبرت را اعمال می کنیم، هیچ نوری در صحنه وجود ندارد، بنابراین به طور پیش فرض Three.js به نور محیطی کامل باز می گردد، که همان رنگ مسطح است. بیایید آن را با یک نقطه نوری ساده حل کنیم:

// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

// add to the scene
scene.add(pointLight);

7. رندر کنید

ما اکنون در واقع همه چیز را برای رندر کردن، به طرز قابل توجهی آماده کرده ایم. اما ما در واقع باید جلو برویم و این کار را انجام دهیم:

// draw!
renderer.render(scene, camera);

با این حال، احتمالاً می خواهید بیش از یک بار رندر کنید، بنابراین اگر می خواهید یک حلقه انجام دهید، باید از requestAnimationFrame استفاده کنید. این تا حد زیادی هوشمندانه ترین راه برای مدیریت انیمیشن در مرورگر است. هنوز به طور کامل پشتیبانی نمی‌شود، بنابراین من کاملاً توصیه می‌کنم نگاهی به شیم Paul Irish بیندازید.

8. ویژگی های شی مشترک

اگر برای بررسی کد Three.js وقت بگذارید، بسیاری از اشیاء را از Object3D به ارث می برند. این یک شی پایه است که حاوی برخی از ویژگی های بسیار مفید است، مانند اطلاعات موقعیت ، چرخش و مقیاس . به ویژه کره ما یک مش است که از Object3D به ارث می رسد، که ویژگی های خود را به آن اضافه می کند: هندسه و مواد . چرا اینها را ذکر می کنم؟ خب، بعید است که بخواهید فقط یک کره روی صفحه نمایش خود داشته باشید که هیچ کاری انجام نمی دهد، و این ویژگی ها ارزش بررسی دارند، زیرا به شما اجازه می دهند جزئیات زیرین مش ها و مواد را در پرواز دستکاری کنید.

// sphere geometry
sphere.geometry

// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array

// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same

9. اسرار کوچک کثیف

من فقط می خواستم به سرعت به یک دستور سریع برای Three.js اشاره کنم، یعنی اگر مثلاً رئوس یک مش را اصلاح کنید، در حلقه رندر خود متوجه خواهید شد که هیچ چیز تغییر نمی کند. چرا؟ خوب چون Three.js (تا آنجا که من می توانم بگویم) داده های یک مش را به عنوان چیزی شبیه بهینه سازی در حافظه پنهان نگه می دارد. کاری که در واقع باید انجام دهید این است که به Three.js علامت بزنید که چیزی تغییر کرده است تا بتواند هر آنچه را که نیاز دارد دوباره محاسبه کند. شما این کار را با موارد زیر انجام می دهید:

// changes to the vertices
sphere.geometry.__dirtyVertices = true;

// changes to the normals
sphere.geometry.__dirtyNormals = true;

باز هم موارد بیشتری وجود دارد، اما این دو مورد که من پیدا کردم مفیدترین هستند. بدیهی است که باید فقط چیزهایی را که تغییر کرده اند علامت گذاری کنید تا از محاسبات غیر ضروری جلوگیری کنید.

نتیجه گیری

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