ساخت صحنه Vaporwave با Three.js

ابتدا باید تنظیمات اولیه را انجام دهیم تا همه چیزهایی را که برای ساختن صحنه نیاز داریم در اختیار داشته باشیم. برای ارائه یک صحنه Three.js، به عناصر کلیدی زیر نیاز دارید:

• مش، هم مواد و هم هندسه.

• برخی از شنوندگان رویداد برای تغییر اندازه و انیمیشن ها

1
import * as THREE from 'three';
2
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
4
const canvas = document.querySelector('canvas.webgl');
7
const scene = new THREE.Scene();
15
const geometry = new THREE.PlaneGeometry(1, 2, 24, 24);
16
const material = new THREE.MeshBasicMaterial({
20
const plane = new THREE.Mesh(geometry, material);
23
plane.rotation.x = -Math.PI * 0.5;
24
plane.position.y = 0.0;
25
plane.position.z = 0.15;
31
  width: window.innerWidth,
32
  height: window.innerHeight,
36
const camera = new THREE.PerspectiveCamera(
40
  sizes.width / sizes.height,
49
camera.position.y = 0.06;
50
camera.position.z = 1.1;
54
const controls = new OrbitControls(camera, canvas);
55
controls.enableDamping = true;
58
const renderer = new THREE.WebGLRenderer({
61
renderer.setSize(sizes.width, sizes.height);
62
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
65
window.addEventListener('resize', () => {
67
  sizes.width = window.innerWidth;
68
  sizes.height = window.innerHeight;
71
  camera.aspect = sizes.width / sizes.height;
72
  camera.updateProjectionMatrix();
75
  renderer.setSize(sizes.width, sizes.height);
77
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
86
  renderer.render(scene, camera);
89
  window.requestAnimationFrame(tick);

من می دانم … ممکن است کمی احساس شود. اما نگران نباشید! بیایید یک لحظه برای تجزیه هر یک از این عناصر وقت بگذاریم.

4
const scene = new THREE.Scene();

اول، ما داریم scene. همین است ظرفی که شامل اشیایی است که ما رندر خواهیم کرد.

4
const geometry = new THREE.PlaneGeometry(1, 2, 24, 24);
5
const material = new THREE.MeshBasicMaterial({
9
const plane = new THREE.Mesh(geometry, material);

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

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

1. هندسه: شکل جسم ما. در اینجا از Three.js استفاده می کنیم PlaneGeometry که نشان دهنده یک هواپیما است. عرض آن را دادم 1 “واحد”، و ارتفاع از 2 “واحد” عمداً چون می‌خواهم این هواپیما که در آن منظره‌ی ما نمایش داده می‌شود، احساس “طولانی” کند. همچنین به زیر تقسیم می شود 24 بخش با توجه به عرض و ارتفاع آن، این به ما راس های بیشتری برای بازی می دهد و به ما اجازه می دهد تا هواپیمای خود را با کمی جزئیات بیشتر شکل دهیم.

2. مواد: شیء به چه شکل است. اینجا استفاده کردم MeshBasicMaterial که ساده ترین ماده ای است که می توانید در آن استفاده کنید Three.js. در این حالت من رنگ را روی سفید قرار می دهم، بنابراین هواپیمای ما در صحنه ما سفید می شود

با ترکیب هندسه و در مواد شما شی ما را دریافت می کنید که a نیز نامیده می شود شبکه.

4
const camera = new THREE.PerspectiveCamera(
8
  sizes.width / sizes.height,
17
camera.position.y = 0.06;
18
camera.position.z = 1.1;

در اینجا ما مال خود را تعریف می کنیم دوربین، شی نشان دهنده دیدگاه ما در صحنه خود داریم. نزدیک زمین گذاشتمش camera.position.y = 0.06 و کمی دورتر از مرکز صحنه camera.position.z = 1.1 برای به دست آوردن چشم اندازی مشابه با صحنه اصلی.

4
const renderer = new THREE.WebGLRenderer({
7
renderer.setSize(sizes.width, sizes.height);
8
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
11
window.addEventListener('resize', () => {
13
  sizes.width = window.innerWidth;
14
  sizes.height = window.innerHeight;
17
  camera.aspect = sizes.width / sizes.height;
18
  camera.updateProjectionMatrix();
21
  renderer.setSize(sizes.width, sizes.height);
23
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

ارائه وصیت نامه صحنه ما را روی بوم HTML رندر/رسم کنید. این ابزاری است که از دوربینی که قبلاً راه اندازی شده است برای گرفتن عکس فوری از صحنه ما و نمایش آن در صفحه استفاده می کند. زمانی که اندازه پنجره تغییر می‌کند باید به‌روزرسانی شود تا صحنه بدون توجه به اندازه درگاه نمایش به درستی ارائه شود.

9
  renderer.render(scene, camera);
12
  window.requestAnimationFrame(tick);

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

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

ساختارشکنی صحنه اصلی

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

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

• هواپیما باید مقداری داشته باشد ناهمواری برای شکل دادن به زمین در کنار

• رشته زیاد است دامن پایین و به نظر می رسد با بافت مش مطابقت دارد. به این ترتیب ما می‌توانیم به تعداد زیربخش‌های هواپیمایمان «مربع» در شبکه‌مان داشته باشیم (من 24 را شمردم، اما این می‌تواند بسیار اشتباه باشد). بنابراین مهم نیست که چگونه زمین خود را شکل دهیم، نقاط تقاطع بخش های بافت مش ما با موقعیت رئوس صفحه مطابقت دارد و به آن ظاهر موج بخار متمایز می دهد.

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

• زمین به سمت حرکت می کند ما (بیننده)، به اصطلاح ما موقعیت هواپیمای خود را در امتداد محور z متحرک خواهیم کرد

اکنون که صحنه خود را تجزیه و تحلیل کرده ایم، می توانیم شروع به ساختن کنیم.

بافت

اول و مهمتر از همه، اجازه دهید ما را بسازیم PlaneGeometry بیشتر شبیه رندر نهایی است. از صحنه خطی می‌توانیم ببینیم که زمین عمدتاً نوعی شبکه است. برای رسیدن به این اثر باید 3 کار را انجام دهیم:

1. مش را بکشید و آن را به صورت یک صادر کنید .jpg یا نرم افزاری مانند Figma

2. این فایل را به صورت a بارگیری کنید بافت در صحنه ما

3. این بافت را روی هواپیمای خود قرار دهید و انجام شد ما مال خود را خواهیم داشت شبکه موج بخار اثر!

ممکن است در ابتدا پیچیده به نظر برسد، اما Three.js تنها با چند خط کد با کلاس textureLoader کار را بسیار آسان می کند.

2
const textureLoader = new THREE.TextureLoader();
4
const gridTexture = textureLoader.load(TEXTURE_PATH);

پس از بارگذاری بافت، با اختصاص بافت به صفحه آن را اعمال می کنیم map دارایی مادی و چیزی شبیه به این بدست می آوریم:

زمین

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

ابتدا باید مواد خود را تغییر دهیم. تا الان فقط استفاده کردیم MeshBasicMaterial که همانطور که از نامش پیداست، اصلی. ما به مواد پیشرفته تری مانند MeshStandardMaterial که به ما امکان می دهد کمی بیشتر با آن بازی کنیم:

• مبتنی بر فیزیکی است، به این معنی که واقعی تر است و می تواند با نور تعامل داشته باشد

• ما می توانیم رئوس مختلف را ویرایش کنیم، بنابراین “شکل” مش را تغییر دهیم. این خاصیتی است که اکنون برای ساختن زمین خود به آن نیاز داریم.

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

مدل های انیمیشن و نرخ فریم

وقتی انیمیشن خطی WebGL را تجزیه کردیم، دیدیم که زمین در حال حرکت است به ما. بنابراین، برای رسیدن به این اثر در صحنه خودمان، باید این کار را انجام دهیم شبکه ما را جابجا کنیم در امتداد محور z خواهید دید، در واقع بسیار ساده است 😄!

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

بنابراین برای اینکه زمین خود را به حرکت درآوریم، باید مش خود را افزایش دهیم z موقعیت نسبت به زمان سپری شده به صورت زیر:

3
const clock = new THREE.Clock();
8
  const elapsedTime = clock.getElapsedTime();
15
  plane.position.z = elapsedTime * 0.15;
18
  renderer.render(scene, camera);
21
  window.requestAnimationFrame(tick);

بی پایان کردن صحنه

متوجه خواهید شد که اکنون یک مشکل در صحنه ما وجود دارد: هواپیما به سمت ما در حال حرکت است، اما از آنجایی که طول آن محدود است، بعد از چند ثانیه چیزی نمی بینیم:

باید راهی پیدا کنیم که به کاربر بدهیم برداشت که این زمین برای همیشه ادامه دارد. به دلایل واضح نمی‌توانیم زمین خود را بی‌نهایت کنیم، این غیرممکن است، اما می‌توانیم از چند ترفند استفاده کنیم!

• می توانیم الف اضافه کنیم نسخه دوم هواپیمای ما، آن را پشت اولی قرار دهید و به سمت ما نیز حرکت دهید

• پس از اینکه هواپیمای اول از دوربین ما عبور کرد (درست پشت آن)، هواپیمای دوم در همان موقعیتی قرار خواهد گرفت که اولین در ابتدای انتقال بود.

• اکنون می توانیم هر دو هواپیما را به ترتیب به موقعیت اصلی خود بازگردانیم z=0 و z=-2، بدون اینکه بیننده متوجه شود.

• انیمیشن ما اینگونه خواهد بود بی پایان. همچنین، زمین ما به اندازه کافی ارگانیک به نظر می رسد که چندان واضح نیست که ما همچنان از همان هواپیما استفاده مجدد می کنیم.

اعمال این افکت فقط به چند خط کد (و کمی ریاضی) نیاز دارد:

3
const clock = new THREE.Clock();
7
  const elapsedTime = clock.getElapsedTime();
15
  plane.position.z = (elapsedTime * 0.15) % 2;
20
  plane2.position.z = ((elapsedTime * 0.15) % 2) - 2;
23
  renderer.render(scene, camera);
26
  window.requestAnimationFrame(tick);

بیایید این کد را به کد خود اضافه کنیم tick عملکرد برای دیدن اتفاق جادو:

ما آن را انجام دادیم! ما توانسته ایم صحنه خود را در یک حلقه بی نهایت متحرک کنیم و کم کم به صحنه اصلی Linear نزدیک می شویم. با این حال، چند جزئیات بیشتر برای اضافه کردن وجود دارد.

همانطور که از زمین قبلی می بینید، زمین ما در مقایسه با آنچه که تیم Linear ساخته بود کمی متفاوت به نظر می رسد. در ابتدا نمی دانستم چه چیزی است، تقریباً زمین ما به این شکل بود خیلی تیز. با این حال، پس از مشاهده صحنه اصلی زیاد من با دقت به موارد زیر توجه کردم:

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

صحنه خطی WebGL در واقع از مقداری استفاده می کند اثرات پس از پردازش Three.js. در این مورد خاص او از یک RGBShift اثر یا اینطور فکر می کنم. این تنها اثری است که صحنه ما را به نتیجه بدست آمده توسط تیم Linear نزدیک می کند. بنابراین در آینده از آن استفاده خواهیم کرد.

در زیر می توانید کدی را که من برای گنجاندن آن در نظر گرفتم پیدا کنید RGBShift تاثیر در صحنه ما:

5
const effectComposer = new EffectComposer(renderer);
6
effectComposer.setSize(sizes.width, sizes.height);
7
effectComposer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
13
const renderPass = new RenderPass(scene, camera);
14
effectComposer.addPass(renderPass);
20
const rgbShiftPass = new ShaderPass(RGBShiftShader);
21
rgbShiftPass.uniforms['amount'].value = 0.0015;
23
effectComposer.addPass(rgbShiftPass);
41
  effectComposer.render();
44
  window.requestAnimationFrame(tick);

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

• در EffectComposer: کلاسی که تمام اثرات پس از پردازش را مدیریت می کند تا در نهایت نتیجه نهایی را ایجاد کند

• درRenderPass: پاس مسئول اولین رندر صحنه.

• مال ما rGBShiftPass: پاس پس از پردازش مسئول اعمال RGBShift اثر

وقتی برای اولین بار از این افکت استفاده کردم، رنگ ها زیبا به نظر می رسیدند خاموش شد:

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

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

اکنون از مهمترین جنبه صحنه خود می گذریم: نور! صحنه اصلی نوعی الف دارد مایل به قرمز نور بر روی برخی (نه همه) مربع های شبکه ای با نوعی الف منعکس می شود فلز صیقلی اثر چگونه به این امر برسیم؟

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

که معادل کد زیر خواهد بود:

4
const spotlight = new THREE.SpotLight('#d53c3d', 20, 25, Math.PI * 0.1, 0.25);
5
spotlight.position.set(0.5, 0.75, 2.2);
7
spotlight.target.position.x = -0.25;
8
spotlight.target.position.y = 0.25;
9
spotlight.target.position.z = 0.25;
11
scene.add(spotlight.target);
14
const spotlight2 = new THREE.SpotLight('#d53c3d', 20, 25, Math.PI * 0.1, 0.25);
15
spotlight2.position.set(-0.5, 0.75, 2.2);
17
spotlight2.target.position.x = 0.25;
18
spotlight2.target.position.y = 0.25;
19
spotlight2.target.position.z = 0.25;
21
scene.add(spotlight2.target);

حال، در مورد قسمت های بازتابنده زمین ما چه می شود؟ وقتی خودمون رو معرفی کردیم MeshStandardMaterial قبلاً اشاره کردیم که این یک است بر اساس فیزیکی مواد این بدان معنی است که ما می توانیم خواص آن را تغییر دهیم تا مانند یک ماده واقعی با نور و محیط تعامل داشته باشد، مانند:

• metalness: چقدر مواد شبیه فلز است. 0 مانند غیر فلزی و 1 کاملا فلزی بودن

• roughness: چقدر مواد خشن است. 0 صاف، تقریباً آینه مانند و 1 به عنوان پراکنده

با این حال، در مورد ما، مطالب ما به طور مداوم رفتار نمی کنند:

برای رسیدن به این، می توانیم تنظیم کنیم metalnessMap خاصیت ماده ما: بافتی که نشان می دهد کدام قسمت های توری ما باید فلزی باشد و کدام نباید.

با اضافه کردن این metalnessMap، راه اندازی metalness و roughness مقادیر مواد ما (من بر این اساس انتخاب کردم 0.96 و 0.5، دوباره از طریق تغییرات زیاد) و در نهایت با اضافه کردن نور مناسب در مکان مناسب در صحنه ما، نتیجه نهایی خود را می گیریم که بسیار جالب است 🎉!

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

• نور: من آن را خوب نمیخکوب نکردم

• بافت: شبکه نیز کوچک به نظر می رسد ضخیم. شاید تیم اصلی بالاخره از بافت استفاده نکرده و به جای آن به سایه زن ها متکی بوده است؟

• عملکرد احتمالی

• برای هماهنگی با حال و هوای صحنه، چند آهنگ بد را به عنوان موسیقی پس‌زمینه اضافه کنید

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

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

• همه چیز مربوط به مش: بافت، هندسه، مواد و خواص آنها

• نورپردازی و افکت‌های پس از پردازش که اگر به درستی تنظیم شوند، می‌توانند عالی باشند خلق و خوی به صحنه شما

• انیمیشن ها و نرخ فریم

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

اگر می خواهید آن را هک کنید و از آن لذت ببرید، یا فقط از آن به عنوان پایه ای برای ساخت Three.js بعدی خود استفاده کنید، می توانید به مخزن Github این پروژه بروید. من هم برای نوشتن این صحنه در React-three-fiber وقت گذاشتم. اگر می خواهید یاد بگیرید چگونه اجزای React قابل استفاده مجدد را از اشیاء Three.js خود ایجاد کنید، می تواند به عنوان یک مثال عالی باشد.