مطالب پیشنهادی از سراسر وب

دوره Three.js - آموزش کامل Three.js

دسته بندی ها: آموزش های ویژه ، آموزش جاوا اسکریپت (Javascript) ، آموزش Tree.js ، آموزش طراحی وب

آیا تا به حال شده است که بخواهید وب سایت های سه بعدی خیره کننده ایجاد کنید؟

آخرین به روزرسانی: 2021-1

خواه یک مبتدی باشید یا یک توسعه دهنده حرفه ای تر،

Three.js Journey تنها دوره ای است که شما برای یادگیری WebGL با Three.js نیاز دارید.

با شرکت در دوره Three.js Journey شما امکان دسترسی مادام العمر به یک دوره کامل و آسان با 32 درس را خواهید داشت.

می خواهید این دوره شامل چه درس هایی می شود؟ 

  • 5 فصل
  • 32 درس
  • 33 ساعت فیلم

هر درس برای بارگیری با پوشه شروع کننده آغاز می شود.

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

اگر قالب ویدئو را دوست ندارید، هر درس به صورت متن با اسکرین شات، پیش نمایش ویدیو، قسمت هایی از کد با رنگ بندی سینتکس و غیره نیز در دسترس است.

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

آنچه یاد خواهید گرفت:

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

در پایان دوره، شما درک عمیقی از Three.js و تجربه کافی برای شروع پروژه های خود خواهید داشت.

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

01 مبانی

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

یک پنل اشکال زدایی اضافه کنید تا محیط خود را تغییر دهید و همه چیز را متحرک کنید.

  • مقدمه
  • WebGL چیست و چرا از Three.js استفاده می کنیم
  • مبانی صحنه
  • Webpack
  • Transforms objects
  • انیمیشن ها
  • دوربین ها
  • فول اسکرین و تغییر سایز
  • هندسه
  • اشکال زدایی UI
  • تکسچرها
  • متریال ها
  • متن سه بعدی

02 تکنیک های کلاسیک

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

  • نورها
  • سایه ها
  • خانه تسخیر شده
  • ذره ها
  • تولید کننده کهکشان
  • Raycaster

03 تکنیک های پیشرفته

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

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

04 شیدرها

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

زبان shader را بیاموزید تا از قدرت واقعی WebGL استفاده کنید و تجربه هایی خیره کننده ایجاد کنید!

  • شیدرها
  • الگوهای شیدر 
  • متحرک سازی دریا
  • کهکشان متحرک
  • متریال های اصلاح شده

05 موارد اضافی

اگر بیشتر رایانه ها نتوانند آن را اجرا کنند، ایجاد یک تجربه جذاب WebGL فایده ای ندارد.

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

  • پس از پردازش
  • نکات مربوط به عملکرد
  • معرفی و بارگذاری پیشرفت
  • مخلوط کردن HTML و WebGL
  • پایان

سایر ویدئوهای دوره:

درس 2

درس 3

درس 4

ترجمه با ویدابیا

ترجمه فارسی این دوره آموزشی رو همین الان از ویدابیا سفارش بده الان سفارش بده
آیا این نوشته را دوست داشتید؟
Three.js Journey – The ultimate Three.js course Publisher:threejs-journey Author:Bruno Simon Duration:33.5 Hours Level:Advanced

Have you ever wanted to create stunning 3D websites?

Whether you are a beginner or a more advanced developer,

Three.js Journey is the only course you need to learn WebGL with Three.js.

Get good at Three.js with only one course

Subscribing to Three.js Journey will give you a lifetime access to a complete and easy to access course of 32 lessons.

Want to see what's included? Check out the video down below:

  • 5 chapters
  • 32 lessons
  • 33 hours of videos

Each lesson begins with a starter folder to download.

Then, simply follow the tutorial!

If you don't like video format, each lesson is also available as texts with screenshots, video previews, parts of code with syntax coloration, etc.

In plus, you can also slow down or speed up the videos!

What will you learn?


The course is complete, yet accessible for beginners. We will start by discovering what WebGL is and why using the Three.js library is a must. We will then discover the various components of Three.js and once the basics are acquired, we will move on to more advanced techniques to display millions of particles, add physics, add interactions, create a galaxy, animate a raging sea, etc.

At the end of the course, you will have a deep understanding of Three.js and enough experience to start your own projects.

As a bonus, we will also learn how to use the 3D software Blender to be able to create our own models.

01

Basics

Create your first scene and understand fundamentals like cameras, geometries, materials, textures.

Add a debug panel to tweak your environment and animate everything.

  • Introduction
  • What is WebGL and why using Three.js
  • Basic scene
  • Webpack
  • Transforms objects
  • Animations
  • Cameras
  • Fullscreen and resizing
  • Geometries
  • Debug UI
  • Textures
  • Materials
  • 3D Text

02

Classic techniques

Illuminate your scene with various lights, start practicing environment creation and create millions of particles.

  • Lights
  • Shadows
  • Haunted House
  • Particles
  • Galaxy Generator
  • Raycaster

03

Advanced techniques

Add physics to your world so that objects start to collide and stumble. Then import your own model made with Blender and make it look as realistic as possible.

  • Physics
  • Imported models
  • Custom model with Blender
  • Realistic render

04
Shaders

Using Three.js materials is great but creating your owns is even better.

Learn the shader language to unleash the true power of WebGL and create stunning looking experiences!

  • Shaders
  • Shader patterns
  • Raging sea
  • Animated galaxy
  • Modified materials

05
Extra

Creating a cool WebGL experience is useless if most computers can’t run it.

Learn how to monitor and optimize performances to achieve the best possible frame rate.

  • Post-processing
  • Performance tips
  • Intro and loading progress
  • Mixing HTML and WebGL
  • The end

پیشنهاد آموزش مرتبط در فرادرس

خرید لینک های دانلود
  • حجم فایل: 17.53GB
  • زبان: انگلیسی
  • زیرنویس انگلیسی: ندارد
  • قیمت: 8000 تومان
  • دوره Three.js - آموزش کامل Three.js یک محصول ویژه است و دریافت لینک های دانلود آن با پرداخت هزینه امکان پذیر است. اطلاعات بیشتر