Three.js, React Three Fiber, Drei, React Spring & More
Learn everything you need to build immersive and creative Websites using Three JS and React
Lo que serás capaz de hacer
Welcome to my course on React Three Fiber, where you will learn how to build immersive and creative 3D websites using Three.js and React In this course, you will learn all about Three.js and some of React basics so that you are able to create 3D websites under a library called React Three Fiber This course is in 6 main sections, 1. Three.js Refresher: Some lessons from my three.js course will be reviewed, so you can understand what will be explained later 2. React: Some React basics will be explained cause this course is mainly about writing React code 3. React Three Fiber: This is where the actual course begins, where you will learn how to write and combine Three.js with React 4. React Three Drei: React is about building reusable components, We will cover a lot of the components that Drei have 5. React Spring: We will learn a physics-based animation library to make your site looks better 6. React Post-Processing: Post-processing are filters that will add beauty to the scene All code is provided in the resources folder where you can find the Startup folder which is the code at the beginning of the lecture, and the Last Code folder which is the written code after we finished the lesson. If you encounter any questions regarding a particular lesson, I hope that you will ask the question in the questions section I will answer all questions, so don't be afraid to ask any question Thanks for participating in my course, and I will see you there. Ahmad
- How to install ThreeJs library and import it into your project
- Learn the basics of ThreeJs with many demonstrations and example code
- Learn about the ThreeJs Scene, Camera and Renderer
- Creating our very first scene in ThreeJs
- How to move and animate the Objects
- Learn about Webpack, NodeJs ,and serving ES6 modules to the browser clients.
Temario
UNIDAD 1 - Three.Js Refresher · 9 leccionesUNIDAD 1 - Three.Js Refresher
UNIDAD 1 - Three.Js Refresher
- 0 - What is WebGL & ThreeJs
- 1 - Hello Cube
- 2 - Transformation
- 3 - Animation
- 4 - Webpack
- 5 - Geometries
- 6 - Textures
- 7 - Materials
- 8 - Particles
UNIDAD 2 - React · 11 leccionesUNIDAD 2 - React
UNIDAD 2 - React
- 1 - Introduction to React
- 2 - First React Application
- 3 - React Rules
- 4 - Styles in React
- 5 - Components
- 6 - Building a Counter using UseState hook
- 7 - UseEffect
- 8 - Rendering Elements Conditionally
- 9 - Props
- 10 - React.memo
- 11 - UseRef
UNIDAD 3 - React Three Fiber · 8 leccionesUNIDAD 3 - React Three Fiber
UNIDAD 3 - React Three Fiber
- 1 - Introduction to React Three Fiber
- 2 - Build Our First React Fiber Application
- 3 - Build Our First React Fiber Application
- 4 - useLoader
- 5 - Particles
- 6 - Loading 3D Model _ Playing Animations
- 7 - Debug
- 8 - Events
UNIDAD 4 - React Three Drei · 8 leccionesUNIDAD 4 - React Three Drei
UNIDAD 4 - React Three Drei
- 1 - Introduction To Drei
- 2 - Environment & Staging
- 3 - Camera
- 4 - Controls
- 5 - Text, 3DText and Html
- 6 - Positional Audio
- 7 - Shaders
- 8 - MeshPortalMaterial
UNIDAD 5 - React Spring · 7 leccionesUNIDAD 5 - React Spring
UNIDAD 5 - React Spring
- 1 - Introduction to React Spring
- 2 - Getting Started
- 3 - Imperative API
- 4 - Props
- 5 - SpringRef
- 6 - useSprings
- 7 - useTrail
UNIDAD 6 - React Three Rapier · 7 leccionesUNIDAD 6 - React Three Rapier
UNIDAD 6 - React Three Rapier
- 1 - Hello Physics
- 2 - Colliders
- 3 - Rigid Body Methods
- 4 - Mass
- 5 - Types
- 6 - Instanced Mesh
- 7 - Sensor
UNIDAD 7 - React Post-Processing · 1 leccionesUNIDAD 7 - React Post-Processing
UNIDAD 7 - React Post-Processing
- Post-Processing
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
7 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Ahmad Al-shurafa.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 7 unidades · 51 lecciones · 35 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Ahmad Al-shurafa; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
