آموزش Three.js

saalek110 · امروز در 12:20 قبل از ظهر

پس با عناصر یک برنامه آشنا شدیم،

یک صحنه ،
یک دوربین
یک شی،
یک تابع render

saalek110 · امروز در 12:30 قبل از ظهر

رسم خط:

ابتدا لوازم اصلی:

JavaScript:

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

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

const scene = new THREE.Scene();

متریال خط:

JavaScript:

//create a blue LineBasicMaterial
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

جئومتری خط:

JavaScript:

const points = [];
points.push( new THREE.Vector3( - 10, 0, 0 ) );
points.push( new THREE.Vector3( 0, 10, 0 ) );
points.push( new THREE.Vector3( 10, 0, 0 ) );

const geometry = new THREE.BufferGeometry().setFromPoints( points );

ایجاد خط با متریال و جئومتری:

JavaScript:

const line = new THREE.Line( geometry, material );

افزودن خط به صحنه:

JavaScript:

scene.add( line );
renderer.render( scene, camera );

منبع:

three.js docs

threejs.org

saalek110 · امروز در 12:42 قبل از ظهر

What is Three.js?
Three.js is an open-source, lightweight, cross-browser, general-purpose JavaScript library. Three.js uses WebGL behind the scenes, so you can use it to render Graphics on an HTML <canvas> element in the browser. Since Three.js uses JavaScript, you can interact with other web page elements, add animations and interactions, and even create a game with some logic

.https://www.tutorialspoint.com/threejs/threejs_introduction.htm

میگه three.js در پشت صحنه webgl را به کار می گیرد. همچنین کلمه lightweight را به کار برده.

saalek110 · امروز در 12:45 قبل از ظهر

سرگرمی:

Moments of Happiness

Moments of Happiness, a series of WebGL experiments that will make you smile.

moments.epic.net

saalek110 · امروز در 12:55 قبل از ظهر

انواع کنترل:

Controls & Description
1
Orbit Controls

Orbit controls allow the camera to orbit around the center of the scene.

2
Trackball Controls

TrackballControls is similar to Orbit controls. However, it does not maintain a constant camera up vector.

3
Fly Controls

These are flight simulator-like controls. Move and steer with the keyboard and the mouse.

4
PointerLock Controls

The PointerLockControls implements the inbuilt browsers Pointer Lock API

یک نگاهی به شرح آنها بکنید.
بعدا به آنها خواهیم پرداخت.

Three.js - Controls

Three.js - Controls - You can move the camera around the scene using camera controls. Three.js has many camera controls you can use to control the camera throughout a scene. You have to get the controls separately from GitHub. The Three.js library does not include these.

www.tutorialspoint.com

saalek110 · امروز در 12:58 قبل از ظهر

Lights make the objects visible, similarly, in Three.js THREE.Light lights up the scene and makes some things visible. Not all materials are affected by lighting. The MeshBasicMaterial and MeshNormalMaterial are self-illuminating, so they don't need lighting to be visible within a scene. However, most of the other materials do, the MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, and MeshToonMaterial. We'll discuss more materials in further chapters. In this chapter, we'll focus on different types of lights in Three.js.

میگه نور باعث قابل دیدن شدن اجسام میشه
ولی دو نوع متریال در متن بالا اسم برده که نور نیاز ندارند...
یک سری متریال دیگر هم اسم برده..
نگاهی بیاندازید

Three.js - Lights & Shadows

Three.js - Lights & Shadows - Lights make the objects visible, similarly, in Three.js THREE.Light lights up the scene and makes some things visible. Not all materials are affected by lighting. The MeshBasicMaterial and MeshNormalMaterial are self-illuminating, so they don't need lighting to be...

www.tutorialspoint.com

در لینک بالا همچنین در مورد shadow صحبت کرده.

saalek110 · امروز در 1:03 قبل از ظهر

Lights & Description
1
Ambient Light

It is the most basic light, which illuminates the whole scene equally.

2
Directional Light

Directional light comes from a specific point and is emitted directly from far away to the target.

3
Spotlight

It is another kind of light that comes from a specific direction in the shape of the cone.

4
Point Light

The point light is a light source that emits light in all directions from a single point.

5
Hemisphere Light

It is a special light for creating natural lighting.

انواع نور و شرح آن از لینک پست قبل.

saalek110 · امروز در 1:07 قبل از ظهر

جئومتری

Three.js - Geometries

Three.js - Geometries - Geometries are used to create and define shapes in Three.js. Three.js has many types of built-in geometries, both 2D and 3D.

www.tutorialspoint.com

Geometrys & Description
1
Plane Geometry

The THREE.PlaneGeometry creates a simple 2D rectangle.

2
Circle Geometry

The THREE.CircleGeometry creates a simple 2D circle.

3
Ring Geometry

The THREE.RingGeometry creates a D disc with a hole in the center.

4
Box Geometry

The THREE.BoxGeometry creates a simple 3D box with specified dimensions.

5
Sphere Geometry

The THREE.SphereGeometry creates 3D sphere geometries.

6
Cylinder Geometry

To create a cylinder in Three.js, you can use the Three.CylinderGeometry.

7
Cone Geometry

You can use THREE.ConeGeometry to create a cone. It is very similar to CylinderGeometry, except it only allows you to set the radius instead of radiusTop and radiusBottom.

8
Torus Geometry

Torus is a tube-like shape that looks like a donut. You can use THREE.TorusGeometry to create a torus in Three.js.

9
TorusKnot Geometry

A torus knot is a special kind of knot that looks like a tube that winds around itself a couple of times.

10
Polyhedron Geometry

A polyhedron is a geometry that has only flat faces and straight edges.

saalek110 · امروز در 1:10 قبل از ظهر

Three.js - Materials

Three.js - Materials - Material is like the skin of the object. It defines the outer appearance of the geometry. Three.js provides many materials to work. We should choose the type of material according to our needs. In this chapter, we'll discuss the most commonly used materials in Three.js.

www.tutorialspoint.com

خوبه کمی با اسامی اینها آشنا بشوید

Materials & Description
1
MeshBasicMateria

It is the very basic material in Three.js.

2
MeshDepthMaterial

It uses the distance from the camera to determine how to color your mesh in a greyscale.

3
MeshNormalMaterial

This material uses the magnitude of the x/y/z values of the faces’ normal vectors to calculate and set the red/green/blue values of the colors displayed on the face.

4
MeshLambertMaterial

You can use this material to create dull-looking, non-shiny surfaces.

5
MeshPhongMaterial

This material is similar to MeshLambertMaterial but can create more shiny surfaces.

6
MeshStandardMaterial

It is similar but gives a more accurate and realistic looking result than the MeshLambertMaterial or MeshPhongMaterial. Instead of shininess, it has two properties: roughness and metalness.

7
MeshPhysicalMaterial

It is pretty similar to MeshStandardMaterial. You can control the reflectivity of the material.

8
Using Multiple Materials

Until now, while creating a Mesh, you added a single material to it.

saalek110 · امروز در 1:13 قبل از ظهر

Three.js - Loading 3D Models

Three.js - Loading 3D Models - 3D models are available in many formats. You can import most of the models into Three.js and work with them quickly. Some formats are difficult to work with, inefficient for real-time experiences, or simply not fully supported by Three.js at this time. Let's...

www.tutorialspoint.com

لود کردن انواع آبجکت ها را در صفحه بالا گفته.

saalek110 · امروز در 1:16 قبل از ظهر

Three.js - Libraries and Plugins

Three.js - Libraries and Plugins - Official three.js examples are maintained as part of the three.js repository and always use the latest version of three.js.

www.tutorialspoint.com

کتابخانه ها ، شامل فیزیک.

saalek110 · 37 دقیقه قبل

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

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

رندرینگ فرایند تبدیل داده‌های دیجیتال به تصاویر قابل مشاهده | کامپیوتر افق

saalek110 · 36 دقیقه قبل

انواع رندرینگ
رندرینگ به دو دسته اصلی تقسیم می‌شود: رندرینگ ریل‌تایم (Real-Time Rendering) و رندرینگ آفلاین (Offline Rendering)

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

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

همان منبع.

saalek110 · 34 دقیقه قبل

تکنیک‌های رندرینگ
تکنیک‌های مختلفی برای رندرینگ وجود دارد که به کاربر امکان تولید تصاویر با ویژگی‌ها و کیفیت‌های مختلف را می‌دهد. برخی از مهم‌ترین تکنیک‌ها عبارت‌اند از:

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

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

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

همان منبع.

saalek110 · 30 دقیقه قبل

قدرت و امکانات کتابخانه Three.js

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

یادگیری آسان

یکی از بزرگ‌ترین مزایای Three.js اینه که یادگیریش خیلی ساده‌ست. با مستندات کامل و مثال‌های کاربردی که داره، می‌تونی به راحتی مفاهیم پایه و پیشرفته رو یاد بگیری و در پروژه‌هات استفاده کنی.

انعطاف‌پذیری بالا

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

پشتیبانی از مرورگرهای مختلف

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

استفاده از منابع GPU

Three.js از WebGL برای رندرینگ استفاده می‌کنه، که این به معنی استفاده بهینه از منابع GPU سیستم کاربره. این ویژگی باعث میشه تا انیمیشن‌ها و گرافیک‌های سه‌بعدی با سرعت و کارایی بالا اجرا بشن.

جامعه کاربری بزرگ و فعال

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

یکپارچگی با ابزارهای دیگر

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

پشتیبانی از واقعیت مجازی و افزوده

یکی از ویژگی‌های فوق‌العاده Three.js پشتیبانی از واقعیت مجازی (VR) و واقعیت افزوده (AR) است. این یعنی می‌تونی پروژه‌های هیجان‌انگیزی رو توی این حوزه‌ها بسازی و تجربه‌های تعاملی بیشتری برای کاربران ایجاد کنی.

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

چالش‌ها و معایب کتابخانه Three.js

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

پیچیدگی در پروژه‌های بزرگ

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

محدودیت‌های WebGL

Three.js برای رندرینگ از WebGL استفاده می‌کنه که با تمام قدرتمندی‌هاش، محدودیت‌هایی هم داره. مثلاً، همه مرورگرها و دستگاه‌ها به خوبی از WebGL پشتیبانی نمی‌کنن و ممکنه کاربران با مشکلات سازگاری مواجه بشن.

نیاز به دانش جاوااسکریپت

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

مشکلات عملکرد در دستگاه‌های ضعیف‌تر

اگر پروژت رو بخوای روی دستگاه‌های قدیمی‌تر یا با منابع سخت‌افزاری محدود اجرا کنی، ممکنه با مشکلات عملکردی مواجه بشی. رندرینگ سه‌بعدی نیازمند منابع بالاست و این می‌تونه روی سرعت و کارایی پروژه‌هات تأثیر بذاره.

کمبود پلاگین‌ها و افزونه‌ها

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

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

Three.js چیست؟ (شروعی برای ساخت انیمیشن‌های سه‌بعدی در وب)

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

7learn.com

saalek110 · 28 دقیقه قبل

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

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

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

مقایسه Three.js با A-Frame
A-Frame یک کتابخانه منبع‌باز برای ساخت واقعیت مجازی (VR) در وبه. این کتابخانه بر پایه HTML و جاوااسکریپت ساخته شده و به توسعه‌دهنده‌ها اجازه میده تا با استفاده از تگ‌های HTML، صحنه‌های VR بسازن. A-Frame برای کسانی که تازه وارد دنیای گرافیک‌های سه‌بعدی و VR شدن، گزینه مناسبیه چون استفاده از اون بسیار ساده‌ست. با این حال، برای پروژه‌های پیچیده‌تر و حرفه‌ای‌تر، Three.js انتخاب بهتری خواهد بود.

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

Three.js چیست؟ (شروعی برای ساخت انیمیشن‌های سه‌بعدی در وب)

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

7learn.com