آموزش Three.js و TypeScript

معرفی Introduction

• معرفی Introduction

• راه اندازی محیط توسعه Setup Development Environment

• TypeScript را نصب کنید Install TypeScript

• شروع به ایجاد پروژه Three.js کنید Begin Creating the Three.js Project

• اسکریپت های اولیه را اضافه کنید Add the Initial Scripts

• راه اندازی WebPack Dev Server Setting up the WebPack Dev Server

• وارد کردن ماژول های Three.js Importing Three.js Modules

• Three.js Typescript Boilerplate را نصب کنید Install the Three.js Typescript Boilerplate

• صحنه، دوربین و رندر Scene, Camera and Renderer

• حلقه انیمیشن Animation Loop

• پنل آمار Stats Panel

• پنل رابط کاربری گرافیکی Dat Dat GUI Panel

• Object3D Object3D

• سلسله مراتب Object3D Object3D Hierarchy

• هندسه ها Geometries

• مواد Material

• MeshBasicMaterial MeshBasicMaterial

• MeshNormalMaterial MeshNormalMaterial

• MeshLambertMaterial MeshLambertMaterial

• MeshPhongMaterial MeshPhongMaterial

• MeshStandardMaterial MeshStandardMaterial

• MeshPhysicalMaterial MeshPhysicalMaterial

• MeshMatcapMaterial MeshMatcapMaterial

• MeshToonMaterial MeshToonMaterial

• نقشه چشمگیر Specular Map

• نقشه های زبری و فلزی Roughness and Metalness Maps

• نقشه دست انداز Bumpmap

• نرمال نقشه Normalmap

• نقشه جابجایی Displacement Map

• تکرار مواد و مرکز Material Repeat and Center

• Mipmaps بافت Texture Mipmaps

• Mipmaps سفارشی Custom Mipmaps

• فیلتر ناهمسانگرد Anisotropic Filtering

• چراغ ها Lights

• نور محیط Ambient Light

• نور جهت دار Directional Light

• نور نیمکره Hemisphere Light

• نور نقطه ای Point Light

• نور افکن Spot Light

• سایه روشن نقطه ای Spot Light Shadow

• سایه نور جهت دار Directional Light Shadow

• کنترل مدار Orbit Controls

• کنترل توپ Trackball Controls

• کنترل های Pointerlock Pointerlock Controls

• کنترل‌ها را بکشید Drag Controls

• تبدیل کنترل ها Transform Controls

• استفاده از چندین کنترل در یک صحنه Using Multiple Controls in the Same Scene

• لودر مدل OBJ OBJ Model Loader

• MTL Loader MTL Loader

• لودر GLTF GLTF Loader

• لودر DRACO DRACO Loader

• GLTF بافت دار Textured GLTF

• لودر FBX FBX Loader

• انیمیشن های FBX FBX Animations

• انیمیشن های GLTF GLTF Animations

• انیمیشن های سفارشی GLTF Custom GLTF Animations

• ریکاستر Raycaster

• تشخیص برخورد Raycaster Raycaster Collision Detection

• Raycaster Mouse Picking Raycaster Mouse Picking

• اندازه گیری Raycaster Raycaster Measurements

• با استفاده از tween.js Using tween.js

• با استفاده از tween.js و THREE. انیمیشن میکسر Using tween.js and the THREE. AnimationMixer

• Vector3 Lerp Vector3 Lerp

• فیزیک با Cannon.js Physics with Cannon.js

• ارائه دهنده اشکال زدایی Cannon.js The Cannon.js Debug Renderer

• Trimeshes، Convex Polyhedrons و Compound Shapes Trimeshes, ConvexPolyhedrons and Compound Shapes

• اعزام به تولید Deploying to Production

• یک پیکربندی تولید Webpack را تنظیم کنید Setup a Webpack Production Configuration

• میزبانی با استفاده از صفحات GitHub Host Using GitHub Pages

• میزبانی با استفاده از صفحات GitLab Host Using GitLab Pages

• میزبانی با استفاده از سرور Nginx Host Using an Nginx server

• یک نام دامنه را مشخص کنید Point a Domain Name

• SSL اضافه کنید Add SSL

• عملکرد سمت سرور با Nodejs و Express Server-side functionality with Nodejs and Express

• Socket.IO با Node.js، Express و Webpack Socket.IO with Node.js, Express and Webpack

• Nginx را به عنوان یک پروکسی معکوس راه اندازی کنید Setup Nginx as a Reverse Proxy

• بازی بال The Ballgame

• تبدیل نمونه های جاوا اسکریپت Threejs به پروژه های TypeScript Converting JavaScript Threejs Examples to TypeScript Projects