کتابخانه‌ Three.js چیست و چگونه با آن کار کنیم؟

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

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

پردازش یک مکعب در حال چرخش

همیشه لذت‌بخش بوده است که قبل از این‌که به طور مستقیم وارد کدنویسی شویم، ببینیم که قرار است چه چیزی را ایجاد کنیم. نگاهی به این مثال در Codepen بیندازید، این همان چیزی است که ما آن را در ادامه ایجاد خواهیم کرد.

Codepen

اجازه دهید که نحوه‌ی ایجاد این مکعب ساده در حال چرخش را یاد بگیریم. در داخل تَگ <body> که در هر فایل HTML که این تگ است، ما کتابخانه‌ی three.js را از یک CDN به این شکل بارگذاری می‌‌کنیم:

<script type="module">
    // Find the latest version by visiting https://cdn.skypack.dev/three.
    import * as THREE from 'https://cdn.skypack.dev/three';
</script>

در ادامه می‌خواهیم دو شی ثابت به نام‌های scene و camera ایجاد کنیم، به این صورت:

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

سپس، نیاز داریم که شی‌های renderer و cube را ایجاد کرده و همچنین شی cube را به scene اضافه کنیم، اندازه‌ی renderer و همچنین موقعیت camera را هم تنظیم کرده و خروجی rendered را به سندمان اعمال کنیم:

const renderer = new THREE.WebGLRenderer();
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );

scene.add( cube );
renderer.setSize( window.innerWidth, window.innerHeight );
camera.position.z = 5;
document.body.appendChild( renderer.domElement );

این تنها cube یا همان مکعب را به صفحه اضافه می‌کند، اما cube هنوز ثابت است و حرکت نمی‌کند. برای این‌که بتوانیم مکعب را مانند مثال اول به چرخش دربیاوریم،‌ می‌توانیم انیمیشن ساده‌ای را تنها با اضافه کردن خط‌ کُد‌های زیر ایجاد کنیم:‌

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

setInterval(function(){
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
}, 5);

در زیر محتوای فایل HTMLمان است که معکب سه‌بعدی را پردازش می‌کند:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ThreeJS Fun</title>
    <style>
        body{
            background:#000;
            padding:0px;
            margin:0px;
        }
    </style>
</head>
<body>

    <script type="module">
        // Find the latest version by visiting https://cdn.skypack.dev/three.
        import * as THREE from 'https://cdn.skypack.dev/three';

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        const renderer = new THREE.WebGLRenderer();
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );

        scene.add( cube );
        renderer.setSize( window.innerWidth, window.innerHeight );
        camera.position.z = 5;
        document.body.appendChild( renderer.domElement );


        function animate() {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
        }
        animate();

        setInterval(function(){
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
        }, 5);

    </script>
</body>
</html>

بعدا، یاد خواهیم گرفت که چطور می‌توانیم یک فایل سه‌بعدی را توسط یک فایل GLTF بارگذاری کنیم. فایل GLTF یک فُرمت فایل سه‌بعدی رایج است.

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

در اینجا مثالی است از این‌که ما در این مرحله چه چیزی را ایجاد خواهیم کرد. همان‌طور که می‌بینید، یک پردازش ساده سه‌بعدی ‌ از یک پرنده‌ (طوطی) است.

این کار هم برای انجام دادن،‌ بسیار ساده است. ابتدا باید کتابخانه‌ها‌ (که شامل کتابخانه فایل GLTF/GLB) نیز می‌شود را وارد کرد. ما باز هم اشیاء scene, camera, renderer, loader, light, و البته شی سه‌بعدیمان (فایل سه‌بعدی که می‌خواهیم آن را نمایش دهیم) را ایجاد می‌کنیم:

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
const loader = new GLTFLoader();
const light = new THREE.SpotLight();
const flamingo = await loader.loadAsync('//devdojo.com.s3.us-east-1.amazonaws.com/assets/3d/parrot.glb');

بعد از آن، پس‌‌زمینه‌ی scene را تنظیم و موقعیت light و camera را تغییر می‌دهیم.

بعد از تنظیم و تغییر موقعیت، light و شی سه‌بعدیمان را که کمی قبل بارگذاری کردیم، به scene اضافه می‌کنیم، به این صورت:

scene.background = new THREE.Color('#72c0ff');
light.position.set(-20, 15, 120);
camera.position.set( 10, 0, 140 );
scene.add(light);
scene.add(flamingo.scene);

در نهایت، محتوای پردازش‌ شده را به صحفه نمایش اعمال می‌کنیم، scene یا همان صحنه‌مان را که فایلی را که حاوی شی سه‌بعدی است، نمایش می‌دهد، با یک حالت انیمیشن همراه است و مُدل سه‌بعدیمان را همان‌طور که در مثال بالا مشاهده کردید،‌ به حرکت در می‌آورد.

renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}
animate();

setInterval(function(){
    flamingo.scene.children[0].rotation.y += 0.001;
}, 5);

در اینجا هم کد‌های نوشته‌ شده‌ی بالا که فایل سه‌بعدیمان را بارگذاری و نمایش می‌دهد، به صورت یک‌‌جا در یک فایل آمده است:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ThreeJS Fun</title>
    <style>
        body{
            background:#000;
            padding:0px;
            margin:0px;
        }
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';
        import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/GLTFLoader.js';

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        const renderer = new THREE.WebGLRenderer();
        const loader = new GLTFLoader();

        const light = new THREE.SpotLight()
        light.position.set(-20, 15, 120)
        scene.add(light)


        const flamingo = await loader.loadAsync('https://cdn.devdojo.com/assets/3d/parrot.glb');
        scene.add(flamingo.scene);

        scene.background = new THREE.Color('#72c0ff');


        renderer.setSize( window.innerWidth, window.innerHeight );
        camera.position.set( 10, 0, 140 );
        document.body.appendChild( renderer.domElement );

        function animate() {
            requestAnimationFrame( animate );
            renderer.render( scene, camera );
        }
        animate();

        setInterval(function(){
            flamingo.scene.children[0].rotation.y += 0.001;
        }, 5);

    </script>
</body>
</html>

منابعی که می‌توانید در آن‌های مدل‌های سه‌بعدی را پیدا کنید

منابع کمی هستد که در این منابع می‌توانید مدل‌های سه‌بعدی خارق‌العاده را پیداو در پروژه‌هایتان از آن‌ها استفاده کنید. اولین منبع Free3D و دومین منبع (که موردعلاقه‌ی من هم هست) SketchFab است.

منابعی که می‌توانید مدل‌های سه‌بعدی را در آن‌ها پیدا کنید

حتما باز هم جستجو کنید، چرا که بسیاری از وب‌سایت‌های دیگر به جزء این دو وب‌سایت وجود دارند که مدل‌های سه‌بعدی بسیار خوبی دارند.

یادگیری بیشتر کتابخانه‌ی Three.js

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

Three.js Homepage

Three.js Fundamentals

Three.js Journey

devdojo منبع: وب سایت