خواندن ۵ دقیقه·۵ روز پیش

طراحی سایت سه بعدی (3D) با کتابخانه Threejs

کتابخانه JS برای ساخت سایت های 3D با استفاده از WebGL

سلام دوستان

این اولین مقاله آموزشی توی دوره زندگیمه که اولین بار میخام توی سایت ویرگول منتشرش کنم و مشتاقانه منتظر نظر و پیشنهاد شما عزیزان هستم.

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

امروز میخوام توی این مقاله به شما آموزش بدم چطور میتونین سایت 3D (در حد مقدماتی) طراحی کنین.

اکثر سایت های سه بعدی طراحی شده معمولا از کتابخونه Three js که زبان جاوااسکریپت نوشته شده است طراحی شدند.

مفاهیم پایه

قبل از اینکه ساخت یک صفحه وب سه بعدی رو شروع کنیم ابتدا نیازه که با چند تا مفهوم دنیای سه بعدی آشنا بشیم و کاربرد اونا رو توی کدهامون بدونیم.

صحنه (Scene): به معنی یک صحنه ایه که تمام اشیاء سه بعدی مثل نور، دوربین و مدل های سه بعدی در اون قرار میگیرند و ما بدون این عملا نمیتونیم هیچ شی سه بعدی رو نمایش بدیم.

دوربین (Camera): یکی از اشیاءییه که قراره در scene وجود داشته باشه و تمام اون صحنه رو برای نمایش به کاربر به Renderer ارسال میکنه. در کل دو نوع Camera داریم:

PerspectiveCamera: برای نمایش نمای واقع گرایانه با افکت پرسپکتیو
OrthographicCamera: برای نمایش طراحی دو بعدی بدون پرسپکتیو

نور (Light): در حالت کلی صحنه (Scene) سه بعدی مون اصلا نور ندارد و برای نمایش بهتر اجسام سه بعدی که در صحنه وجود دارن ما نیاز داریم که به صحنه مون نور اضافه کنیم. (در صورت بازخورد مثبت شما ازین مقاله، آموزش های بیشتری از Threejs خواهم گذاشت و این مفاهیم رو بیشتر توضیح خواهم داد.)

اشیاء (Objects): به هر شکل سه بعدی (مکعب، کره، استوانه و ...) و یا مدل سه بعدی که در نرم افزارهای Blender ،3D MAx و ... که در صحنه وجود داره رو Object تعریف میشن.

رندر کننده (Renderer): در پایان، بعد از ساخت Scene ما نیاز داریم این صحنه رو همراه با Camera که ساختیم به Renderer میدیم تا این فضای سه بعدی که ساختیم رو برامون توی مرورگر رندر کنه و نمایش بده.

شروع ساخت صفحه سه بعدی

برای اینکه زودتر از این توضیحات مقدماتی خسته کننده رد شیم و زودتر اولین صفحه سه بعدی سایت خودمون رو طراحی کنیم، ابتدا با استفاده پکیج منیجر npm، هم کتابخونه threejs و هم پکیج vite رو برای Run و Build کردن پروژه نهایی که قابل استفاده در وب باشه رو با استفاده از دستورات زیر نصب میکنیم.

npm install — save three
npm install — save-dev vite

بعد از نصب این دو، یک فایل html با کد زیر میسازیم.

<!DOCTYPE html>
<html>
 <head lang=&quoten&quot>
  <meta charset=&quotutf-8&quot>
  <title>My first 3D Website</title>
  <style>
   body { margin: 0; }
  </style>
 </head>
 <body>
  <script type=&quotmodule&quot src=&quot/main.js&quot>
 </body>
</html>

کد بالا صرفا فقط یک فایل html ساده است که تنها فقط فایل main.js مون رو نیاز داشتیم که وارد بشه. (برای اینکه فایل main.js به صورت یک ماژول وارد بشه و از قابلیت import/export برخوردار باشه، type رو برابر با module قرار دادم.)

در مرحله بعد یک فایل 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( renderer.domElement );

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

scene.add( cube );

camera.position.z = 5;

 renderer.render( scene, camera );

چیکار کردیم؟

توی کد بالا، بصورت زیر عمل کردیم:

1. افزودن کتابخونه threejs

import * as THREE from 'three';

2. ساخت صحنه (Scene)

const scene = new THREE.Scene();

3. ساخت دوربین صحنه

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

دوربین مون از نوع Perspective با پارامتر های زیر ساختیم:
75: زاویه میدان دید (Field of View) به درجه.

window.innerWidth / window.innerHeight: نسبت ابعاد عرض به ارتفاع مرورگر.

0.1: نزدیکترین فاصله قابل مشاهده.

1000: دورترین فاصله قابل مشاهده.

4. ایجاد رندرکننده (Renderer):

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

THREE.WebGLRenderer(): یک رندر کننده که از WebGL استفاده میکند برای نمایش سه بعدی مون استفاده کردیم.
setSize(): اندازه رندر را نسبت به عرض و ارتفاع دستگاه مون تنظیم کردیم.
appendChild(): المان سه بعدی رندر شده رو به تگ body صفحه مون اضافه کردیم.

5. ساخت شی سه بعدی

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

THREE.BoxGeometry(1, 1, 1): یک هندسه از مکعب به اندازه های 1 در 1 در 1 ایجاد کردیم.
THREE.MeshBasicMaterial({ color: 0x00ff00 }): یک متریال ساده با رنگ سبز ایجاد کردیم.
THREE.Mesh(): هندسه و متریال رو برای ساختن یک جسم سهبعدی اضافه کردیم.

6. افزودن مکعب به صحنه

scene.add(cube);

دقت کنین که تا وقتی این مکعبی که ساختیم رو به صحنه اضافه نکنیم در صفحه مون نمایش داده نمیشه.

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

camera.position.z = 5;

موقعیت دوربین رو در محور Z به اندازه 5 واحد جابجا میکنیم تا صحنه قابل مشاهد باشه. چرا؟ چون در حالت پیشفرض شی و دوربین در موقعیت (x:0, y:0, z:0) قرار دارد و برای اینکه دوربین با شئ تداخل نداشته باشه دوربین رو 5 واحد عقب تر میبریم تا شئ دیده شود.

8. رندر کردن صحنه

renderer.render( scene, camera );

در این قسمت صحنه و دوربین مون رو به Renderer میدیم.

در نهایت برای Run کردن پروژمون با استفاده از دستور زیر یک local server به آدرس http://localhost:3000 ساخته میشه که میتونین با باز کردن این آدرس مکعب سه بعدی ساخته شده رو ببینین.

npx vite

برای build کردن پروژه جهت استفاده در هاست از دستور زیر استفاده کنید.

npx vite build

نتیجه نهایی بصورت زیر نمایش داده میشه براتون.

خوشحال میشم با نظراتتون منو توی گذاشتن آموزش های بیشتر راهنمایی کنین.

سپاس

طراحی سایت3dیلدای دوست داشتنی

مجتبی قاضی نژاد

شاید از این پست‌ها خوشتان بیاید