Курс на Stepik
Обложка курса «Three.js» на Stepik
Бесплатно

Я решил сделать этот курс так как на русском сегменте интернета практический нет никакой информации по этой библиотеке, данный курс создан по документации библиотеки three.js для javaScript'a, для анимаций, пока что в нём я просто перевёл всю документацию, но позже в течение 2~3 недель появятся задания, и прочее...

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «Three.js»Учеников на курсе 1 982
Сертификаты, выданные на курсе «Three.js»Сертификатов выдано 0
Отзывы о курсе «Three.js»Отзывов получено 4
Рейтинг курса «Three.js»Рейтинг курса 2.750
Уроки в курсе «Three.js»Количество уроков 327
Время прохождения курса «Three.js»Время прохождения курса —
Обновления курса «Three.js»Обновления курса — —
Дата публикации курса «Three.js»Дата публикации курса — ———
Последнее обновление курса «Three.js»Последнее обновление — ———

Содержание курса

Разделы в курсе «Three.js» 49 разделов Уроки в курсе «Three.js» 327 уроков Время прохождения курса «Three.js» 14 ч. Последнее обновление курса «Three.js» обн. 4 года назад

Введение

4 урока
1. Базовые принципы ↗
2. Адаптивный дизайн ↗
3. Необходимые условия ↗
4. Настройка ↗

Фундаментальные понятия

10 уроков
1. Примитивы ↗
2. Граф сцены ↗
3. Материалы ↗
4. Текстуры ↗
5. Освещение ↗
6. Камера ↗
7. Тени ↗
8. Туман ↗
9. Цели рендеринга ↗
10. Пользовательская BufferGeometry ↗

Советы

8 уроков
1. Рендеринг по требованию ↗
2. Отладка JavaScript ↗
3. Отладка GLSL ↗
4. Делаем скриншот холста ↗
5. Предотвращение очистки холста ↗
6. Ввод с клавиатуры ↗
7. Делаем холст прозрачным ↗
8. Создание анимированного фона в three.js ↗

Оптимизация

3 урока
1. Оптимизация большого количества объектов ↗
2. Оптимизация множества анимированных объектов ↗
3. Использование OffscreenCanvas в воркере ↗

Решения

16 уроков
1. Загрузка файла .OBJ ↗
2. Загрузка файла .GLTF ↗
3. Добавить фон или Skybox ↗
4. Как рисовать прозрачные объекты ↗
5. Несколько холстов, несколько сцен ↗
6. Выбор объектов мышью ↗
7. Постобработка ↗
8. Применение файла LUT для эффектов ↗
9. Использование шейдеров Shadertoy ↗
10. Выравнивание HTML-элементов по 3D ↗
11. Использование индексированных текстур для выбора и цвета ↗
12. Использование холста для динамических текстур ↗
13. Рекламные щиты и фасады ↗
14. Освобождение ресурсов ↗
15. Создание воксельной геометрии (Майнкрафт) ↗
16. Начни делать игру. ↗

WebVR #1

3 урока
1. VR - Основы ↗
2. VR - Посмотрите, чтобы выбрать ↗
3. VR - Укажите, чтобы выбрать ↗

Ссылка

1 урок
1. Таблица характеристик материалов ↗

Предварительная информация

9 уроков
1. Создание сцены ↗
2. Установка ↗
3. Как запускать локально? ↗
4. Рисование линий ↗
5. Создание текстов ↗
6. Загрузка 3D-моделей ↗
7. Библиотеки и плагины ↗
8. часто задаваемые вопросы ↗
9. Полезные ссылки ↗

Следующие шаги

6 уроков
1. Как обновлять объекты? ↗
2. Как создавать VR-контент ↗
3. Как использовать постобработку ↗
4. Матричные преобразования ↗
5. Система анимации ↗
6. Инструменты сборки: тестирование с NPM ↗

Анимация

8 уроков
1. AnimationAction ↗
2. AnimationClip ↗
3. AnimationMixer (Анимационный микшер) ↗
4. AnimationObjectGroup (Анимации групп объектов ) ↗
5. AnimationUtils ↗
6. KeyframeTrack ↗
7. PropertyBinding ↗
8. PropertyMixer ↗

Анимации / Треки

6 уроков
1. BooleanKeyframeTrack ↗
2. ColorKeyframeTrack ↗
3. NumberKeyframeTrack ↗
4. QuaternionKeyframeTrack ↗
5. StringKeyframeTrack ↗
6. VectorKeyframeTrack ↗

Аудио

5 уроков
1. Audio ↗
2. AudioAnalyser ↗
3. AudioContext ↗
4. AudioListener ↗
5. PositionalAudio ↗

Камеры

6 уроков
1. ArrayCamera ↗
2. Camera ↗
3. CubeCamera ↗
4. OrthographicCamera ↗
5. PerspectiveCamera ↗
6. StereoCamera ↗

Константы

7 уроков
1. Animation Constants (Константы анимации) ↗
2. Основные константы ↗
3. CustomBlendingEquation ↗
4. BufferAttributeUsage ↗
5. Materials ↗
6. Renderer(Рендерер) ↗
7. Textures ↗

Ядра

14 уроков
1. BufferAttribute ↗
2. BufferGeometry ↗
3. Clock ↗
4. EventDispatcher ↗
5. GLBufferAttribute ↗
6. InstancedBufferAttribute ↗
7. InstancedBufferGeometry ↗
8. InstancedInterleavedBuffer ↗
9. InterleavedBuffer ↗
10. InterleavedBufferAttribute ↗
11. Layers ↗
12. Object3D ↗
13. Raycaster ↗
14. Uniform ↗

Ядра / Атрибуты буфера

1 урок
1. (BufferAttribute Types) Типы атрибутов буфера ↗

Дополнительно

5 уроков
1. DataUtils ↗
2. Earcut ↗
3. ImageUtils ↗
4. PMREMGenerator ↗
5. ShapeUtils ↗

Дополнительно / Ядра

7 уроков
1. Curve ↗
2. CurvePath ↗
3. Font ↗
4. Interpolations ↗
5. Path ↗
6. Shape ↗
7. ShapePath ↗

Дополнения / Кривые

10 уроков
1. ArcCurve ↗
2. CatmullRomCurve3 ↗
3. CubicBezierCurve ↗
4. CubicBezierCurve3 ↗
5. EllipseCurve ↗
6. LineCurve ↗
7. LineCurve3 ↗
8. QuadraticBezierCurve ↗
9. QuadraticBezierCurve3 ↗
10. SplineCurve ↗

Дополнительно / Объекты

1 урок
1. ImmediateRenderObject ↗

Геометрии в three.js

22 урока
1. BoxGeometry ↗
2. CircleGeometry ↗
3. ConeGeometry ↗
4. CylinderGeometry ↗
5. DodecahedronGeometry ↗
6. EdgesGeometry ↗
7. ExtrudeGeometry ↗
8. IcosahedronGeometry ↗
9. LatheGeometry ↗
10. OctahedronGeometry ↗
11. ParametricGeometry ↗
12. PlaneGeometry ↗
13. PolyhedronGeometry ↗
14. RingGeometry ↗
15. ShapeGeometry ↗
16. SphereGeometry ↗
17. TetrahedronGeometry ↗
18. TextGeometry ↗
19. TorusGeometry ↗
20. TorusKnotGeometry ↗
21. TubeGeometry ↗
22. WireframeGeometry ↗

Помощники

13 уроков
1. ArrowHelper ↗
2. AxesHelper ↗
3. BoxHelper ↗
4. Box3Helper ↗
5. CameraHelper ↗
6. DirectionalLightHelper ↗
7. GridHelper ↗
8. PolarGridHelper ↗
9. HemisphereLightHelper ↗
10. PlaneHelper ↗
11. PointLightHelper ↗
12. SkeletonHelper ↗
13. SpotLightHelper ↗

Освещение во three.js

10 уроков
1. AmbientLight ↗
2. AmbientLightProbe ↗
3. DirectionalLight ↗
4. HemisphereLight ↗
5. HemisphereLightProbe ↗
6. Light ↗
7. LightProbe ↗
8. PointLight ↗
9. RectAreaLight ↗
10. SpotLight ↗

Свет / Тени

4 урока
1. LightShadow ↗
2. PointLightShadow ↗
3. DirectionalLightShadow ↗
4. SpotLightShadow ↗

Загрузчики

16 уроков
1. AnimationLoader ↗
2. AudioLoader ↗
3. BufferGeometryLoader ↗
4. Cache ↗
5. CompressedTextureLoader ↗
6. CubeTextureLoader ↗
7. DataTextureLoader ↗
8. FileLoader ↗
9. FontLoader ↗
10. ImageBitmapLoader ↗
11. ImageLoader ↗
12. Loader ↗
13. LoaderUtils ↗
14. MaterialLoader ↗
15. ObjectLoader ↗
16. TextureLoader ↗

Загрузчики / менеджеры

2 урока
1. DefaultLoadingManager ↗
2. LoadingManager ↗

Материалы

18 уроков
1. LineBasicMaterial ↗
2. LineDashedMaterial ↗
3. Material ↗
4. MeshBasicMaterial ↗
5. MeshDepthMaterial ↗
6. MeshDistanceMaterial ↗
7. MeshLambertMaterial ↗
8. MeshMatcapMaterial ↗
9. MeshNormalMaterial ↗
10. MeshPhongMaterial ↗
11. MeshPhysicalMaterial ↗
12. MeshStandardMaterial ↗
13. MeshToonMaterial ↗
14. PointsMaterial ↗
15. RawShaderMaterial ↗
16. ShaderMaterial ↗
17. ShadowMaterial ↗
18. SpriteMaterial ↗

Математика во three.js

19 уроков
1. Box2 ↗
2. Box3 ↗
3. Color ↗
4. Cylindrical ↗
5. Euler ↗
6. Frustum ↗
7. Interpolant ↗
8. Line3 ↗
9. MathUtils ↗
10. Matrix4 ↗
11. Matrix3 ↗
12. Plane ↗
13. Quaternion ↗
14. Ray ↗
15. Sphere ↗
16. Spherical ↗
17. SphericalHarmonics3 ↗
18. Triangle ↗
19. Векторы(Vector2, Vector3, Vector4) ↗

Математика / Интерполянты

4 урока
1. CubicInterpolant ↗
2. DiscreteInterpolant ↗
3. LinearInterpolant ↗
4. QuaternionLinearInterpolant ↗

Объекты во three.js

12 уроков
1. Bone ↗
2. Group ↗
3. InstancedMesh ↗
4. Line ↗
5. LineLoop ↗
6. LineSegments ↗
7. LOD ↗
8. Mesh ↗
9. Points ↗
10. Skeleton ↗
11. SkinnedMesh ↗
12. Sprite ↗

Рендеры во three.js

5 уроков
1. WebGLMultipleRenderTargets ↗
2. WebGLMultisampleRenderTarget ↗
3. WebGLRenderer и WebGL1Renderer ↗
4. WebGLRenderTarget ↗
5. WebGLCubeRenderTarget ↗

Рендереры / шейдеры

4 урока
1. ShaderChunk ↗
2. ShaderLib ↗
3. UniformsLib ↗
4. UniformsUtils ↗

Рендеры WebXR

1 урок
1. WebXRManager ↗

Сцены

2 урока
1. Fog, FogExp2 ↗
2. Scene ↗

Текстуры во three.js

9 уроков
1. CanvasTexture ↗
2. CompressedTexture ↗
3. CubeTexture ↗
4. DataTexture ↗
5. DataTexture2DArray ↗
6. DataTexture3D ↗
7. DepthTexture ↗
8. Texture ↗
9. VideoTexture ↗

Примеры анимации

3 урока
1. CCDIKSolver ↗
2. MMDAnimationHelper ↗
3. MMDPhysics ↗

Примеры органов управления

8 уроков
1. DeviceOrientationControls ↗
2. DragControls ↗
3. FirstPersonControls ↗
4. FlyControls ↗
5. OrbitControls ↗
6. PointerLockControls ↗
7. TrackballControls ↗
8. TransformControls ↗

Примеры геометрии

2 урока
1. ConvexGeometry ↗
2. DecalGeometry ↗

Примеры помощников

5 уроков
1. LightProbeHelper ↗
2. PositionalAudioHelper ↗
3. RectAreaLightHelper ↗
4. VertexNormalsHelper ↗
5. VertexTangentsHelper ↗

Примеры света

1 урок
1. LightProbeGenerator ↗

Примеры загрузчиков

13 уроков
1. 3DMLoader ↗
2. BasisTextureLoader ↗
3. DRACOLoader ↗
4. GLTFLoader ↗
5. KTX2Loader ↗
6. MMDLoader ↗
7. MTLLoader ↗
8. OBJLoader ↗
9. PCDLoader ↗
10. PDBLoader ↗
11. PRWMLoader ↗
12. SVGLoader ↗
13. TGALoader ↗

Примеры объектов

1 урок
1. Lensflare ↗

Примеры постобработки

1 урок
1. EffectComposer ↗

Примеры экспортеров

3 урока
1. GLTFExporter ↗
2. PLYExporter ↗
3. ColladaExporter ↗

Примеры математики

3 урока
1. LookupTable ↗
2. MeshSurfaceSampler ↗
3. OBB ↗

ConvexHull

5 уроков
1. Face ↗
2. HalfEdge ↗
3. ConvexHull ↗
4. VertexNode ↗
5. VertexList ↗

Примеры рендеров

3 урока
1. CSS2DRenderer ↗
2. CSS3DRenderer ↗
3. SVGRenderer ↗

Утилиты

4 урока
1. BufferGeometryUtils ↗
2. CameraUtils ↗
3. SceneUtils ↗
4. SkeletonUtils ↗

Справочник разработчика

4 урока
1. Polyfills ↗
2. WebGLProgram ↗
3. WebGLShader ↗
4. WebGLState ↗