#2/5. Формируем карту планеты в Three.JS
#three #threejs #js #3d #inverser_threejs #webgl
Большое видео по оптимизации сайтов:
https://youtube.com/live/N3lmoftlm1k
GitHub окончательного результата для production:
https://github.com/inverser-pro/three...
Друзья, переходите по ссылке для того, чтобы получить код из видео:
https://three.inverser.pro/2-5-planet...
^ также на данном сайтике будут публиковаться остальные кусочки мозаики, которая позволит создать полноценную планету (из первого видео).
LIFE VIEW:
https://codepen.io/inverser/pen/QWaLqPm
https://codepen.io/inverser/pen/RwQbdOm
SOURCE // код из предыдущих видео //:
https://github.com/inverser-pro/three...
ОЧЕНЬ МНОГО ССЫЛОК ПО THREEJS на различные ресурсы с примерами
https://three.inverser.pro/links
Первое видео (нулевое):
• #0 THREEJS от 0 до PRO уровня БЕЗ ОПЛАТЫ! ...
Ссылка на список воспроизведения по урокам Three JS с 0 до PRO:
• THREEJS полный курс без оплаты! Уровень PRO
Временные метки:
00:00 Hola...
00:23 Как мы будем создавать карту планеты в Three.JS?
01:00 Карта планеты в PNG
02:41 Как нарисовать карту планеты из 2D изображения?
03:04 Поясняю кодик
04:15 Создание дополнительного canvas
05:36 Показываю сам второй canvas, из которого мы будем формировать точки на карте планеты
08:56 Что у нас есть на данный момент?
12:06 напоминаю о том, что такое «бум»
15:12 Поясняю зачем необходимы два рекурсивных цикла
21:20 Shader обрезает наш PlaneBufferGeometry — закругляет
21:26 Из чего состоят «кружки» (PlaneBufferGeometry)
22:36 THREE.MathUtils
23:40 THREE.MathUtils.degToRad
24:58 originHelper.updateWorldMatrix(true,false), geometry.applyMatrix4
27:07 Подвожу итоги того, что мы имеем
28:50 THREE.BufferGeometryUtils.mergeBufferGeometries
28:55 require('three/examples/js/utils/BufferGeometryUtils')
29:57 Объединение всех геометрий в одну (mergeBufferGeometries)
31:47 Небольшое увеличение объекта (scale.set(x,y,z))
33:03 Подводим итоги
34:15 Тестирую добавление карты планеты ёлочкой
39:44 Что будет дальше?
40:07 Adiós amigo