آموزش Three.js

[saalek110]

رسم خط:

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

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();

متریال خط:

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

جئومتری خط:

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 );

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

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

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

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

منبع:

three.js docs

threejs.org

 

[saalek110]

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]

سرگرمی:

Moments of Happiness

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

moments.epic.net

 

[saalek110]

انواع کنترل:

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]

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.
​

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


یک سری متریال دیگر هم اسم برده..
MeshLambertMaterial
MeshPhongMaterial
MeshStandardMaterial
MeshPhysicalMaterial
MeshToonMaterial

​

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

www.tutorialspoint.com

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

 

[saalek110]

​

انواع نور:

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]

​

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

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. In this chapter, we'll discuss basic built-in geometries.

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]

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.

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]

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

www.tutorialspoint.com

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

 

[saalek110]

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. Listed here are externally developed compatible libraries and plugins for three.js In addition to the Official three.js

www.tutorialspoint.com

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

 

[saalek110]

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

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

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

رندرینگ چیست؟
رندرینگ به معنای ایجاد تصویری دو بعدی از یک صحنه سه‌بعدی است.

این صحنه می‌تواند شامل مدل‌های سه‌بعدی، نورها، مواد و دوربین‌ها باشد.

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

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

 

[saalek110]

انواع رندرینگ

رندرینگ به دو دسته اصلی تقسیم می‌شود:

رندرینگ ریل‌تایم (Real-Time Rendering)
و رندرینگ آفلاین (Offline Rendering)

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

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

همان منبع.

 

[saalek110]

تکنیک‌های رندرینگ


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

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

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

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

همان منبع.

 

[saalek110]

قدرت و امکانات کتابخانه 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]

مقایسه 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

 

[saalek110]

Three.js Tutorial for Absolute Beginners

This article covers all the essentials you need to kickstart your journey in creating amazing Three.js applications!

waelyasmina.net

آموزش انگلیسی ، مروری بکنید.

 

[saalek110]

<script type="module">
import * as THREE from 'three';
</script>

در کد بالا ، کلمه ماژول ، این اختیار را می دهد که کلمه import را استفاده کند. برای load کردن three.js

three.js manual

threejs.org

بعدش کانواس ایجاد میشه و WebGLRenderer بر روی اون ساخته میشه.

const renderer = new THREE.WebGLRenderer({antialias: true, canvas});

رندرر renderer ، تمام اطلاعت را میگیرد و آن را به کانواس رندر می کند.

وقتی هم کانواس نمی سازیم ، خودش ساخته میشه:

const fov = 75;
const aspect = 2;  // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)

aspect is the display aspect of the canvas.

Aspect را شاید بشود قسمت معنی کرد.
Fov هم field of view است و به درجه است.



Near و far. هم صفحات دور و نزدیک است. محدوده render

چون شی در مرکز قرار دارد ، دوربین در محور z جابجا می شود تا قادر به دیدن باشد.

camera.position.z = 2;

 

[saalek110]

const scene = new THREE.Scene();

همه چیزها باید به صحنه اضافه شود.

const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

const material = new THREE.MeshBasicMaterial({color: 0x44aa88});

const cube = new THREE.Mesh(geometry, material);

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

scene.add(cube);

حالا rendere کارش را انجام میدهد:

renderer.render(scene, camera);

با دوربین و صحنه.

برای دیدن اطراف مکعب ، اون را می چرخانیم:

function render(time) {
  time *= 0.001;  // convert time to seconds
 
  cube.rotation.x = time;
  cube.rotation.y = time;
 
  renderer.render(scene, camera);
 
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

 

[saalek110]

افزودن نور:

const color = 0xFFFFFF;
const intensity = 3;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);

Intencity را روشنایی یا قدرت میشه معنی کرد.

Directional lights have a position and a target. Both default to 0, 0, 0. In our case we're setting the light's position to -1, 2, 4 so it's slightly on the left, above, and behind our camera. The target is still 0, 0, 0 so it will shine toward the origin.


نور دایرکشنال ، یک مکان و یک تارگت(هدف) دارد.
در مثال پوزیشن را منفی یک و ۲ و ۴ گرفتیم
کمی در چپ بالا و پشت دوربین تارگت هم در نقطه صفر و صفر است.

We also need to change the material. The MeshBasicMaterial is not affected by lights. Let's change it to a MeshPhongMaterial which is affected by lights.

مش بیسیک متریال تحت تاثیر نور قرار نمی گیرد
ولی مش فونگ متریال تحت اثر نور قرار می گیرد.

اجزای کار حالا اینها میشه: عکس.



سالک: بعضی قسمتها تکراری به نظر می رسد.یعنی قبلا در تاپیک گفته شده. ولی اشکالی نداره ، یک مرور است.
لابلای آن شاید نکته ای باشد که یاد می گیریم. شما هم بعضی قسمتهایی را که بلدید به شکل مرور رد بشوید.
​

 

[saalek110]

<script type="importmap">
{
  "imports": {
    "three": "./path/to/three.module.js"
  }
}
</script>

<script type="module">
import * as THREE from 'three';
 
...
 
</script>

نوع اسکریپت
اولی importmap است دومی ماژول.

برای import کردن three باید نوع اسکریپت ماژول باشد.

میگه اول آدرس فقط باید به یکی از دو صورت باشد:

Note that path specifier can start only with ./ or ../.

نقطه یا دو نقطه.

این جوری هم میشه نوشت:

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@<version>/examples/jsm/"
  }
}
</script>

یعنی داخل importmap می توانیم cdn استفاده کنیم.