Three.js Tutorial Crash Course - 2021
Add star fields, click-activated camera movements, and seamless transitions with the full course at https://chriscourses.com/threejs-bundle
Practical three.js development is rarely taught these days, but let's see if we can fix that—this course aims to demystify the process of developing an interactive 3D environment in the browser.
🔗Links
Finished Project - https://codepen.io/chriscourses/pen/GRrWQdE
Three.js Installation Page - https://threejs.org/docs/index.html#manual/en/introduction/Installation
Three.js unpkg CDN - https://unpkg.com/three@0.126.1/build/three.module.js
Orbit Controls CDN - https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js
📃Table of Contents
00:00 - Install three.js & vite
17:41 - Create a scene, camera, and renderer
24:26 - Add a box mesh to the scene
30:43 - Animating and rotating the box
33:22 - Add a plane mesh
40:08 - Add directional lights
42:17 - Add depth / jaggedness to plane
52:23 - Modify to taste with dat.gui
1:07:23 - Rotate scene with OrbitControls
1:12:13 - Add hover effect
1:43:08 - Tailor hover effect to exact colors
1:44:54 - Fade out hover effect over time with GSAP
1:50:32 - Begin to set plane to exact dimensions
1:55:21 - Add randomized vertice movement
2:11:43 - Finishing exact plane dimensions
2:17:51 - Add interface with HTML and CSS
Видео Three.js Tutorial Crash Course - 2021 канала Chris Courses
Practical three.js development is rarely taught these days, but let's see if we can fix that—this course aims to demystify the process of developing an interactive 3D environment in the browser.
🔗Links
Finished Project - https://codepen.io/chriscourses/pen/GRrWQdE
Three.js Installation Page - https://threejs.org/docs/index.html#manual/en/introduction/Installation
Three.js unpkg CDN - https://unpkg.com/three@0.126.1/build/three.module.js
Orbit Controls CDN - https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js
📃Table of Contents
00:00 - Install three.js & vite
17:41 - Create a scene, camera, and renderer
24:26 - Add a box mesh to the scene
30:43 - Animating and rotating the box
33:22 - Add a plane mesh
40:08 - Add directional lights
42:17 - Add depth / jaggedness to plane
52:23 - Modify to taste with dat.gui
1:07:23 - Rotate scene with OrbitControls
1:12:13 - Add hover effect
1:43:08 - Tailor hover effect to exact colors
1:44:54 - Fade out hover effect over time with GSAP
1:50:32 - Begin to set plane to exact dimensions
1:55:21 - Add randomized vertice movement
2:11:43 - Finishing exact plane dimensions
2:17:51 - Add interface with HTML and CSS
Видео Three.js Tutorial Crash Course - 2021 канала Chris Courses
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s TutorialThese Personal Websites are just WOW...Inverting Binary Trees - You Suck at Coding [1]Intermediate Three.js Tutorial - Create a Globe with Custom ShadersThree.js Crash Course for Absolute Beginners - 3D in the BrowserI built an automated water dispenser... with JavaScriptI Tried Making a 3D RPG Game in JavaScriptGetting Started With Three.jsWhat Is Three.js? How Can You Learn It? ft Bruno Simon | PrismicHow I Save 80% Of My Income | Financial Independence | MinimalismThreeJS Displacement & AlphaMaps - Create a 3D Terrain!Build a 3D World in React with ThreeJS and React Three FiberWorking with Three.js Particle Systems - They're AWESOME!สอน Blender ปั้นน้องกระบองเพชร และการขาย NFT ชิ้นแรกของผมGetting Started with THREE.JS in 2021!How to build a portfolio website using Next.js, Chakra UI, Framer Motion, and Three.jsWeb Developer Reacts to Incredible Personal Websites // Personal PortfoliosAnimation and 3D in react-three-fiber (with Paul Henschel) — Learn With JasonCréation de mon site étape par étape (three.js, html/css, javascript)