Three.js

گردآورندگان:

مهنوش رامتین

محمد باقر سلطانی

پوریا علیزاده

مقدمه

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

Three.js چیست؟

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

نیازمندی‌ها و کاربردها:

تجسم واقعیت مجازی و افزوده (VR و AR):

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

ساخت بازی‌های وب:

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

تجسم داده‌ها و آمار:

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

معماری سه‌بعدی:

Three.js به مهندسان معماری این امکان را می‌دهد تا طراحی‌ها و مدل‌های ساختمانی خود را در یک محیط سه‌بعدی با ویژگی‌های غنی و به صورت واقع‌گرا ارائه دهند.

ساخت وبسایت‌های سه‌بعدی:

ساخت وبسایت‌هایی با فضای سه‌بعدی و تجربه تعاملی، از دیگر کاربردهای Three.js است. این کتابخانه اجازه می‌دهد تا توسعه دهندگان به سرعت وبسایت‌های خلاقانه و جذاب با انیمیشن‌ها و جزئیات سه‌بعدی بسازند.

مقایسه با کتابخانه‌های مشابه:

Babylon.js:

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

A-Frame:

A-Frame یک فریم‌ورک واقعیت مجازی وب مبتنی بر Three.js است. در حالی که Three.js برای کارهای سه‌بعدی کلی است، A-Frame برای توسعه سریع وبسایت‌ها و برنامه‌های واقعیت مجازی به صورت اجتماعی و تعاملی به کار می‌رود.

نصب و راه اندازی:

را می‌توانید به دو روش نصب کنید:

1. از طریق npm و سایر ابزار build

2. از طریق CDN

##

نصب از طریق npm

در پوشه پروژه خود،trminal را باز کرده و دستور زیر را وارد کنید.

# three.js
npm install --save three

# vite
npm install --save-dev vite

اکنون پکیچ نصب و دانلود شد. سپس دستور زیر را اجرا کنید:

npx vite

اگر همه مراحل بالا به درستی انجام شود، یک URL همانند http://localhost:3000 در ترمینال ظاهر می شود که با ورود به آن، می توانید وب اپلیکیشن خود را مشاهده کنید.

همچنین به کمک دستور زیر می توانید در فایل خود آن را اضافه کنید:

// Option 1: Import the entire three.js core library.

 import * as THREE from 'three';

 const scene = new THREE.Scene();

 // Option 2: Import just the parts you need.

 import { Scene } from 'three';

 const scene = new Scene();

##

نصب از طریق CDN

استفاده از کتابخانه three.js بدون نیاز به راه‌اندازی سیستم خاصی یا آپلود فایل‌ها به وب‌سرور به کمک CDN امکان‌پذیر است.بدین منظور، کافی است کد زیر را به کد خود اضافه کنید:

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@<version>/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
    }
  }
</script>

برای اینکه یک سرور محلی را در دایرکتوری پروژه اجرا کنید، ابتدا Node.js را نصب کنید و سپس دستور serve را اجرا کنید.

npx serve .

##

آموزش های اولیه

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

##

ایجاد یک صحنه

ما با راه‌اندازی یک صحنه با یک مکعب چرخان شروع خواهیم کرد.

برای اینکه در واقعیت قادر به نمایش هر چیزی با three.js باشیم، نیاز به سه عنصر داریم: صحنه (scene)، دوربین (camera) و رندر (renderer)، تا بتوانیم صحنه را با دوربین رندر کنیم.

در فایل main.js:

import * as THREE from 'three';

// تعریف یک صحنه
const scene = new THREE.Scene();
// تعریف یک دوربین با پارامترهای مختلف
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// تعریف یک رندر
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// تعریف یک هندسه (geometry) برای یک مکعب
const geometry = new THREE.BoxGeometry(1, 1, 1);
// تعریف یک متریال (material) برای رنگ‌آمیزی
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// تعریف یک مش (Mesh) با استفاده از هندسه و متریال
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// تنظیم موقعیت اولیه دوربین
camera.position.z = 5;

// تعریف یک حلقه تکرار (animate) برای نمایش به مرور زمان
function animate() {
    requestAnimationFrame(animate);

    // اعمال یک انیمیشن چرخش بر روی مکعب
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // رندر کردن صحنه با دوربین
    renderer.render(scene, camera);
}

// فراخوانی تابع animate برای شروع حلقه تکرار
animate();

در اینجا یک صحنه، یک دوربین، یک رندر، یک هندسه (geometry) برای مکعب، و یک متریال برای رنگ‌آمیزی مکعب ایجاد شده است. سپس با اعمال حلقه تکرار animate، صحنه با دوربین رندر می‌شود و انیمیشن چرخش به مکعب اعمال می‌شود.

##

بررسی سازگاری با WebGL

بعضی دستگاه‌ها یا مرورگرها ممکن است هنوز از WebGL پشتیبانی نکنند. متد زیر به شما این امکان را می‌دهد که بررسی کنید که آیا پشتیبانی از WebGL وجود دارد یا خیر

import WebGL from 'three/addons/capabilities/WebGL.js';

if (WebGL.isWebGLAvailable()) {

    // اجرای توابع یا مراحل اولیه دیگر در اینجا
    animate();

} else {

    // نمایش هشدار به کاربر در صورت عدم پشتیبانی از WebGL
    const warning = WebGL.getWebGLErrorMessage();
    document.getElementById('container').appendChild(warning);

}

##

رسم خط

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

کدی که استفاده خواهیم کرد به صورت زیر است:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);

const scene = new THREE.Scene();

حالا نیاز داریم یک متریال تعریف کنیم. برای خطوط باید ازLineBasicMaterial یا LineDashedMaterial استفاده کنیم.

// ایجاد یک متریال آبی با LineBasicMaterial
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });

پس از متریال، نیاز به یک هندسه با برخی نقاط (vertices) داریم:

const points = [];
points.push(new THREE.Vector3(-10, 0, 0));
points.push(new THREE.Vector3(0, 10, 0));
points.push(new THREE.Vector3(10, 0, 0));

const geometry = new THREE.BufferGeometry().setFromPoints(points);

حالا که نقاط برای دو خط و یک متریال داریم، می‌توانیم آنها را به هم متصل کرده و یک خط ایجاد کنیم.

const line = new THREE.Line(geometry, material);

scene.add(line);
renderer.render(scene, camera);

##

بارگذاری مدل‌های سه‌بعدی

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

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

در صورت امکان، توصیه می‌شود از فرمت glTF (GL Transmission Format) استفاده کنید. هر دو نسخه .GLB و .GLTF این فرمت به‌خوبی پشتیبانی می‌شوند. از آنجایی که glTF بر روی تحویل دارایی در زمان اجرا تمرکز دارد، فشرده برای انتقال و سریع برای بارگذاری است. ویژگی‌های این فرمت شامل مش‌ها، متریال‌ها، تصاویر، پوسته‌ها، اسکلت‌ها، اهداف مورف، انیمیشن‌ها، نورها و دوربین‌ها می‌شوند.

فایل‌های glTF عمومی به صورت رایگان بر روی سایت‌هایی مانند Sketchfab موجود هستند یا ابزارهای مختلف شامل:

Blender از Blender Foundation

Substance Painter از Allegorithmic

Modo از Foundry

Toolbag از Marmoset

تنها چند بارگذار (برای مثال ObjectLoader) به صورت پیش‌فرض با three.js همراه است، بارگذارهای دیگر باید به صورت جداگانه به برنامه شما اضافه شوند.

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

هنگامی که یک بارگذار را وارد کرده‌اید، آماده‌اید یک مدل را به صحنه خود اضافه کنید. سینتکس بین بارگذارهای مختلف متفاوت است - هنگام استفاده از یک فرمت دیگر، به مثال‌ها و مستندات آن بارگذار مراجعه کنید. برای glTF، استفاده با اسکریپت‌های گلوبال به صورت زیر خواهد بود:

const loader = new GLTFLoader();

loader.load('path/to/model.glb', function (gltf) {

    scene.add(gltf.scene);

}, undefined, function (error) {

    console.error(error);

});

#

منابع

https://threejs.work/all-course/
https://threejs.org/docs/#manual/en/introduction/WebGL-compatibility-check
https://en.wikipedia.org/wiki/Three.js

##

لینک های مفید برای آموزش پیشرفته تر:

https://threejs.org/manual/#en/fundamentals
https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene
https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/

##

پرسش و پاسخ

در صورت هر گونه سوال یا مشکل از طریق ایمیل زیر با ما در ارتباط باشید:

[email protected]