Three.js چیست؟

پوریا گودرز8 آگوست 2024

۰ 69 زمان تقریبی مطالعه 9 دقیقه

Three.js یک کتابخانه جاوااسکریپت برای ایجاد و انیمیشن سه‌بعدی (۳D) در مرورگرها است. این کتابخانه به توسعه‌دهندگان اجازه می‌دهد تا به راحتی صحنه‌های سه‌بعدی پویا را ایجاد و تعاملی کنند. Three.js از WebGL به عنوان رابط برای ایجاد گرافیک سه‌بعدی استفاده می‌کند.

با استفاده از Three.js، می‌توانید اشیاء سه‌بعدی، انیمیشن‌ها، نورپردازی، سایه‌ها و افکت‌های ویژه را به سادگی ایجاد کنید. این کتابخانه توسعه‌دهندگان را از جزئیات پیچیده WebGL محافظت می‌کند و امکان ایجاد سناریوهای ۳D را با استفاده از یک رابط برنامه‌نویسی ساده‌تر فراهم می‌کند.

کاربرد Three.js

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

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

از آنجا که Three.js یک ابزار چندمنظوره است، کاربردهای آن تقریباً نامحدود هستند و تنها محدودیت توانایی و خلاقیت شماست.

پروژه‌های معروفی با Three.js

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

A-Frame:
A-Frame یک کتابخانه سطح بالا برای ساخت واقعیت مجازی و واقعیت افزوده در مرورگرها است که از Three.js به عنوان کتابخانه پایه استفاده می‌کند. این کتابخانه توسط Mozilla VR توسعه یافته است.
Sketchfab:
Sketchfab یک پلتفرم آنلاین است که به کاربران امکان می‌دهد مدل‌های سه‌بعدی خود را به اشتراک بگذارند و در مرورگرها مشاهده کنند. این پلتفرم از Three.js برای نمایش مدل‌های سه‌بعدی استفاده می‌کند.
Curiotopía:
Curiotopía یک پروژه تعاملی سه‌بعدی است که از Three.js برای ایجاد یک دنیای جادویی و تعاملی در وب استفاده می‌کند.
HelloRun:
HelloRun یک بازی مرورگری سه‌بعدی است که با استفاده از Three.js و WebGL ساخته شده است. این بازی اعضای یک خانواده را در مسابقه‌ای سه‌بعدی و جذاب می‌برد.
The Walter Collective:
The Walter Collective یک وبسایت تعاملی است که از Three.js برای ایجاد تجربیات سه‌بعدی و جذاب بر روی وب استفاده می‌کند.

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

امکانات کتابخانه Three.js

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

سازنده سه‌بعدی (۳D Renderer): Three.js دارای یک سازنده سه‌بعدی قدرتمند است که به نمایش اشیاء سه‌بعدی در مرورگرها کمک می‌کند.
شیب‌ها و جلوه‌ها (Shaders and Effects): این کتابخانه امکان استفاده از شیب‌ها سفارشی و جلوه‌های ویژه برای ایجاد تصاویر سه‌بعدی زیبا را فراهم می‌کند.
نورپردازی (Lighting): Three.js انواع نورپردازی را از جمله نور نقطه‌ای، نور پرتویی و نور محیطی پشتیبانی می‌کند.
کامرا (Camera): این کتابخانه انواع کامراها را از جمله کامراهای پرسپکتیو، ارتباطی و ارتباطی‌عملیاتی برای انتقال دیدگاه کاربر در صحنه‌های سه‌بعدی فراهم می‌کند.
مدل‌ها و اشیاء (Models and Objects): Three.js به شما امکان ایجاد و اضافه کردن مدل‌ها و اشیاء سه‌بعدی به صحنه را می‌دهد.
تعامل و کنترل (Interaction and Control): این کتابخانه قابلیت افزودن تعاملات مختلف مانند کنترل با موس، کلیدهای صفحه کلید و حسگرهای لمسی را فراهم می‌کند.
صوت و موسیقی (Audio and Music): Three.js امکان اضافه کردن و کنترل صدا و موسیقی در پروژه‌های سه‌بعدی را فراهم می‌کند.
فیزیک (Physics): این کتابخانه از ابزارهای فیزیکی مانند Ammo.js برای اعمال فیزیک در سناریوهای سه‌بعدی پشتیبانی می‌کند.

با استفاده از این امکانات، توسعه‌دهندگان می‌توانند پروژه‌های سه‌بعدی پویا و جذاب را با Three.js ایجاد کنند.

آموزش نصب Three.js

برای نصب و راه‌اندازی Three.js، می‌توانید از روش‌های زیر استفاده کنید:

روش ۱: استفاده از CDN

یکی از راحت‌ترین راه‌ها برای شروع با Three.js استفاده از CDN است. در این حالت، فایل‌های Three.js مستقیماً از یک CDN بارگیری می‌شوند. به عنوان مثال، می‌توانید از CDNjs استفاده کنید:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

روش ۲: دانلود و استفاده از فایل‌های Three.js

می‌توانید Three.js را از سایت رسمی Three.js دانلود کرده و به پروژه خود اضافه کنید. سپس می‌توانید آن را به صورت محلی از طریق ایمپورت یا لینک کردن به صفحه HTML خود اضافه کنید.

روش ۳: استفاده از npm یا yarn

اگر از npm یا yarn برای مدیریت بسته‌های JavaScript استفاده می‌کنید، می‌توانید Three.js را از طریق این ابزارها نصب کنید:

npm install three

یا

yarn add three

سپس با استفاده از یک واسط‌هایی مانند Webpack یا Parcel، می‌توانید Three.js را به پروژه خود اضافه و استفاده کنید.

مثال نصب و راه‌اندازی ساده

در اینجا یک مثال ساده از یک صفحه HTML با Three.js تعبیه شده است که از CDN Three.js استفاده می‌کند:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نمونه Three.js</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script>
        // اینجا کد Three.js شما قرار خواهد گرفت
    </script>
</body>
</html>

با این روش‌ها، می‌توانید Three.js را به پروژه خود اضافه کرده و شروع به ایجاد صحنه‌های سه‌بعدی جذاب و پویا با این کتابخانه کنید.

چگونه می‌توانم یک شیء سه‌بعدی ساده به صحنه اضافه کنم؟

برای اضافه کردن یک شیء سه‌بعدی ساده به صحنه با Three.js، می‌توانید از مراحل زیر استفاده کنید:

۱. ایجاد صحنه، دوربین و رندرر

در این مرحله، ابتدا یک صحنه، یک دوربین و یک رندرر را ایجاد کنید.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

۲. ایجاد شیء سه‌بعدی

سپس برای ایجاد یک شیء سه‌بعدی، یک هندسه (مثلاً مکعب) و یک متریال (مثلاً رنگ) بسازید و این دو را برای ساخت شیء استفاده کنید.

var geometry = new THREE.BoxGeometry(); // مکعب
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // رنگ سبز
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

۳. تنظیم موقعیت دوربین

تنظیم موقعیت دوربین به منظور مشاهده بهتر شیء سه‌بعدی.

camera.position.z = 5;

۴. نمایش شیء و تعامل با صحنه

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

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

با این مراحل، یک شیء سه‌بعدی ساده (مکعب سبز در اینجا) به صحنه شما اضافه شده و با اعمال انیمیشن، آن را مشاهده می‌کنید. این یک مثال ساده است و می‌توانید با تغییر هندسه، متریال و انیمیشن‌های مختلف، صحنه‌های سه‌بعدی پیچیده‌تر و جذاب‌تر ایجاد کنید.

حرکت دوربین به صورت دینامیک در Three.js

برای حرکت دینامیک دوربین در Three.js، می‌توانید از متد camera.lookAt() و تغییر موقعیت دوربین در هر چرخه از انیمیشن استفاده کنید. این به شما امکان می‌دهد تا دوربین را به جهت یک شیء خاص (مثلاً موقعیت یک شیء سه‌بعدی) بچرخانید.

مثال کدی برای حرکت دینامیک دوربین:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// تابع animate که در هر چرخه از انیمیشن صحنه را رندر می‌کند
function animate() {
    requestAnimationFrame(animate);

    // حرکت دوربین به اطراف مکعب
    camera.position.x = Math.sin(Date.now() * 0.001) * 5;
    camera.position.z = Math.cos(Date.now() * 0.001) * 5;
    camera.lookAt(cube.position); // دوربین به سمت مکعب نگاه می‌کند

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();

در این مثال، دوربین به گردش دائمی دور از مکعب می‌پردازد و همچنین با استفاده از camera.lookAt(cube.position)، دوربین همواره به سمت مکعب نگاه می‌کند. شما می‌توانید این کد را تغییر داده و حرکت‌های دلخواه خود را برای دوربین پیاده‌سازی کنید.

چگونه می‌توانم دوربین را به سمت یک شیء خاص حرکت دهم؟

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

مثال کد برای جلب دوربین به سمت یک شیء خاص:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);

camera.position.z = 5;

// تابع animate که در هر چرخه از انیمیشن صحنه را رندر می‌کند
function animate() {
    requestAnimationFrame(animate);

    // حرکت دوربین به اطراف مکعب
    camera.position.x = Math.sin(Date.now() * 0.001) * 5;
    camera.position.z = Math.cos(Date.now() * 0.001) * 5;

    // جلب دوربین به سمت کره قرمز
    camera.lookAt(sphere.position);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();

در این مثال، دوربین به سمت کره قرمز نگردانده می‌شود. با فراخوانی camera.lookAt(sphere.position)، دوربین به سمت موقعیت کره قرمز بخصوص نگرانده می‌شود و در نتیجه به طور پیوسته به آن بنگرد. می‌توانید این کد را تغییر داده و دوربین را به هر شیء دیگری جلب کنید.

چگونه می‌توانم از نورپردازی در Three.js استفاده کنم؟

برای استفاده از نورپردازی در Three.js و افزودن نور به صحنه‌های سه‌بعدی خود، می‌توانید از انواع نورها و تنظیمات مختلفی که Three.js ارائه می‌دهد، استفاده کنید. در زیر یک مثال ساده برای افزودن نور به یک صحنه با Three.js آورده شده است:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js نورپردازی با</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script>
        // ایجاد صحنه، دوربین و رندرر
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // ایجاد نور نقطه‌ای
        var pointLight = new THREE.PointLight(0xffffff, 1);
        pointLight.position.set(5, 5, 5);
        scene.add(pointLight);

        // ایجاد مدل (مثلاً یک مکعب)
        var geometry = new THREE.BoxGeometry();
        var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        // تعامل با صحنه و نمایش
        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>

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

مقایسه Three.js با سایر کتابخانه‌

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

Babylon.js:

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

A-Frame:

Three.js vs A-Frame:
سطح انتزاع: A-Frame از Three.js به عنوان کتابخانه پایه استفاده می‌کند و یک سطح انتزاع بالاتر برای ساخت واقعیت مجازی واقعیت افزوده فراهم می‌کند. بنابراین، اگر به دنبال سرعت بیشتر در توسعه واقعیت مجازی هستید، A-Frame ممکن است گزینه مناسبی باشد.
کد کمتر: A-Frame به شما امکان می‌دهد تا با استفاده از HTML و تگ‌های مانند <a-box> و <a-sphere> به سرعت سناریوهای سه‌بعدی را ایجاد کنید، در حالی که Three.js نیازمند نوشتن کد جاوااسکریپت بیشتر است.
جامعیت ابزارها: در مواردی که به سرعت توسعه واقعیت مجازی یا افزوده نیاز دارید، A-Frame ابزارهای سریع‌تری ارائه می‌دهد. اما برای پروژه‌های پیچیده‌تر و نیازمند کنترل دقیق‌تر، Three.js بهتر است.

هر یک از این کتابخانه‌ها مزایا و معایب خود را دارند و باید با توجه به نیازها و پروژه خاص خود، انتخاب مناسبی را انجام دهید.

جمع بندی:

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

برچسب ها