Spline
Spline- After Effects
- Cinema 4D
- 3ds max
- Unity
Изучал и выполнял некоторые уроки:
Spline YouTube
Learning 3D Design with Spline
Designing a 3D Character та інші.
Ниже мои результаты при изучении Spline. Сверху расположены последние работы, снизу обучение с самого начала.
Вращение сцены выполняется зажатой левой кнопкой мыши и перемещением мышки. При прокручивании колесика мышки происходит масштабирование сцены, нажав ctrl и левую кнопку мыши, можно сдвинуть сцену в сторону, изменяя точку вращения сцены. Настройки вращения и масштабирования сцены могут быть ограничены.
How to Create Interactive 3D Fluid Shapes That Follow Your Cursor in Spline
Создавал сцену по Уроку c YouTube
Screenshot
How to Create a 3D Gummy Bear Using Blending Shapes in Spline
Создавал сцену по Уроку c YouTube
Screenshot
How to use 3D Shape Blending in Spline
Создавал сцену по Уроку c YouTube
Screenshot
How to use 3D Shape Blending in Spline
Создавал сцену по Уроку c YouTube
Screenshot
How to use 3D Shape Blending in Spline
Создавал сцену по Уроку c YouTube
Screenshot
Using Fog to Create Captivating 3D in Spline
Создавал сцену по Уроку c YouTube
Screenshot1
How to Create Interactive Leaf Particles in 3D with Spline
Создавал сцену по Уроку c YouTube
Screenshot1
How to Design 3D Abstract Illustrations in Spline | Beginners Tutorial
Создавал сцену по Уроку с YouTube.
Screenshot1
Easy Interactive 3D: Drag and Drop in Spline
Урок с YouTube
В уроке был исходник, посмотрел его, этот урок уже был раньше.
How to add Images to Interactive 3D in Spline
Создавал сцены по Уроку c YouTube Исходников не було. 3d модели брал c библиотеки Spline.
How to Easily Design a Glass Cube in 3D with Spline
Создавал сцену по Уроку c YouTube
Screenshot1
Сцена в Framer
How to Create 3D Layer Masks and Patterns with Spline
Создавал сцены по Уроку с YouTube. Исходников не було.
How to add interactive 3D designs made in Spline into Figma
Создавал интерактивность гамбургера по Уроку с YouTube
Screenshot1
screenshot2
Исходника гамбургера не было в уроке, частично взял гамбургер из библиотеки Spline и с
сайта.
При нажатии на гамбургер проходит интерактивность.
Создал в Figma экран приложения, используя плагин Anima добавил файл с гамбургером. Прототип с гамбургером в Figma.
How to create an interactive 3D Pufferfish using variables in Spline
Моделировал рыбу фугу по Уроку с YouTube
Создавал интерактивность, при клике по рыбе она увеличивается, после 8-го клика рыба поднимается вверх и возвращается в исходное состояние.
Screenshot1
screenshot2
screenshot3
После выполнения урока увидел исходник в описании видео.
How to create an iridescent material effect in 3D with Spline
Создал сцену по Уроку з YouTube
How to create a 2d flat styles in 3d with Spline
Создал сцену по Уроку с YouTube
Creating an Interactive 3D Bee for a Website with Spline
Делал интерактивность по Уроку с YouTube, исходник с пчелой и цветами брал с урока.
How to Create Interactive 3D Boxes in Spline
How to Create an Interactive 3D Robot in Spline
Сделал интерактивность по уроку c YouTube
В этом уроке рассказывается про интерактивность в Spline, это уже обсуждалось в прошлых уроках.
Робот вращается за курсором. При нажатии на верхнюю часть работы он поднимается. При наведении на шары меняется цвет робота.
Create 3D UI for iOS and visionOS in Spline - Free Course
Выполнил сборку смарт дома по уроку, в уроке есть исходники. Всё что рассказывается в уроке я изучал ранее, обновил знания.
В Spline в бесплатной версии есть ограничения для материалов и других возможностей.
Create 3D UI for iOS and visionOS in Spline - Free Course
Моделеровал в Spline термостат у 3d, создавал анимации по уроку с YouTube.
Create a 3D iOS App Icon
Моделировал в Spline iOS App Icon по уроку с YouTube
Create a visionOS App Icon
Моделировал visionOS App Icon по уроку с YouTube
Create 3D UI for iOS and visionOS in Spline - Free Course
В Spline появились UI сцены, они позволяют добавлять 2d сцены в 3d сцены. Процесс создания фреймов в UI сценах в Spline похож на компоненты Figma. В бесплатной версии Spline есть ограничения на использование UI сцен. При создании фреймов в бесплатной версии Spline некоторые объекты могут не отображаться, но если скопировать из рабочих файлов какие-либо слои и удалить их, объекты начинают отображаться. Также Spline иногда подвисает, но после повторного открытия программы сбой исчезает. Зависание происходит когда копировать объекты из одной сцены в другую. В этой сцене работают анимации по щелчку на различные объекты: открывание дверей, открывание полок в комнате, включение экрана телевизора. Можно включить и выключить свет в комнате, нажимая кнопку у двери и в настройках.
Spline Particle Animation
Моделировал Particle Animation по уроку c YouTube
Spline Particle Animation
Пример из исходника по уроку c YouTube
Create 3D UI for iOS and visionOS in Spline
Файл с урока с YouTube
Create 3D UI for iOS and visionOS in Spline
Файл с урока с YouTube
Spline имеет возможность экспорта в Xcode для Apple платформ. Xcode работает только на MacOS, в Spline экспорт в Xcode работает в платной версии. Также в уроке рассказывается об экспорте проекта в visionOS.
How to Create Stylized 3D Text Using the Path Tool in Spline
How to create lens blur DoF for 3D scenes on Spline
Particles
How to create particles in 3d with Spline
Spline Docs / Particles
How to make a 3D Prototype with Figma - Tutorial
Урок с YouTube
Cкриншот Spline проекта
cкриншот 3d модели в браузере
Я не создавал прототип в Фигме как в уроке.
Я тестировал импорт 3d-моделей в Spline и экспорт из него в веб-проекты.
Ссылка на модель с сайта. Вес 3d-модели 25 мегабайт.
На сайте много 3d-моделей платных и бесплатных разной тематики.
Я не ограничивал углы обзора, возможности вращения, приближения камеры как в уроке, это можно настроить по своему выбору.
В уроке автор рассказывает о плагине Anima в Figma, который позволяет вставить проект Spline и добавляет анимацию элементов в прототипе.
В мобильной версии вращать камеру можно вращением двумя пальцами, zoom происходит раздвижением двумя пальцами.
How to make a responsive 3D illustration for Web - Spline tutorial
Урок с YouTube
Выполнил урок по автору.
На мобильной версии, когда ширина окна меньше 480 пикселей, вид камеры удаляется и меняются позиции собаки и цветка.
На декстопе ширина окна браузера больше 480 пикселей, поэтому сцена не меняется, чтобы протестировать нужно в режиме разработчика (ctrl+shift+i) перейти в мобильный вид, уменьшить ширину окна за 480px и f5.
How to use variables to create interactive 3d content in Spline
How to use variables to create interactive 3d content in Spline
How to use variables to create interactive 3d content in Spline
How to use variables to create interactive 3d content in Spline
How to use variables to create interactive 3d content in Spline
How to use variables to create interactive 3d content in Spline
Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline
Моя работа по уроку: разработка анимаций по клику на разные объекты в Spline, анимация у кота, экспорт проекта в реакт для Web, адаптивная верстка главного файла на ReactJS под разные размеры экранов.
Create 3D Site with Spline and React - Full Course
Урок c YouTube
В этом уроке я создавал анимации объектов в Spline.
Проект я
экспортировал в реакт, но адаптацию по уроку не делал. Адаптацию я делал в другом примере по уроку выше
"Build an interactive 3D scene implemented on a ReactJS site using Figma and Spline", в нем автор выложил рабочий исходник для реакт приложения, c использованием Spline и styled-components.
Рабочий пример автора урока с адаптацией https://r1ul0z.csb.app
В данном примере адаптацию можно сделать без использования реакт приложения, экспортируя Spline проект в JavaScript.
How to make a real-time 3D spaceship on mobile with Spline Tool | Tutorial
Урок c YouTube
Выполнил урок. При щелчке и удержании мышки на ракете открываются лопасти и немного меняется цвет ракеты сверху.
На десктоп ракурс камеры можно вращать если нажать левую кнопку мыши и передвигать курсор.
Можно прокрутить колесо мыши, чтобы приблизить или удалить объект и вращать камеру обзора.
В мобильной версии вращать камеру можно вращением двумя пальцами, zoom происходит раздвижением двумя пальцами.
How to create 3d drag and drop effects with Spline
Урок c YouTube
Файл из библиотеки по уроку.
Можно перетаскивать синие кубики, они приклеиваться на поверхность других объектов, изменяя свой вид.
При нажатии на объекты и при приклеивании кубиков на другие объекты в примере есть звуки, но они почему-то не экспортируются.
How to create 3d drag and drop effects with Spline
Урок c YouTube
Файл из библиотеки по уроку.
Объекты без гравитации, при перетаскивании объектов и столкновении с другими, объекты разлетаются.
В сцене ограничено вращение камеры.
How to create 3d drag and drop effects with Spline
Урок c YouTube
Файл из библиотеки по уроку.
Можно перетаскивать объекты в списке Drag & Drop.
How to create 3d drag and drop effects with Spline
Урок c YouTube
Файл из библиотеки по уроку.
Объекты можно двигать по поверхности пола. При наведении на объекты они немного увеличиваются.
Сцена ограничена во вращении вокруг одной оси.
Звуки почему-то не экспортируются.
How to create 3d multi-scenes and import animations with Spline
Урок c YouTube
Управление мячом wasd это учебный пример из библиотеки.
При нажатии на желтый цилиндр, происходит переход в другую сцену этого файла.
Этого раньше не было.
Компоненты организованы таким образом, что их можно использовать в одном файле, но в разных сценах Multi-Scenes.
How to create 3d multi-scenes and import animations with Spline
Урок c YouTube
Пример урока.
При нажатии на play сверху можно управлять персонажем wasd, ←↑→↓ вращение камеры, прыжок, shift бежать.
В файле есть порталы, при попадании в них происходит переход в новую сцену файла.
Дублировать существующие сцены из библиотеки в одном файле можно в платной подписке.
How to create 3d multi-scenes and import animations with Spline
Урок c YouTube
Возможна задержка пока загружается сцена с моделями.
Автор рассказывает как импортировать состояние движения персонажа: "idle", "running", "jumping", "walking", как настроить эти движения анимации для движения персонажа.
Автор показывает как в Mixamo импортировать модель персонажа и придать ей движения.
Левый персонаж двигается кнопками wasd и прыгает при нажатии на пробел.
Автор выложил исходный файл персонажа с анимациями движения в формате fbx без текстуры.
Making 3D physics simulation with Spline - Tutorial
Making sequential transitions in 3d - SplineLive
Create video textures in 3d - SplineLive
Урок c YouTube
Нет возможности скачать видео без платного пользования Spline
Camera orbit with transitions in 3d - SplineLive
Урок c YouTube
Анимация движения камеры при нажатии на ноутбук и гитару.
How to create 3d paths in Spline
Урок c YouTube
From Library 1
from Library 2
from Library 3
from Library 4
from Library 5
from Library 6
How to create an object follow interaction in 3d with Spline
How to design and use components in 3d with Spline
How to animate clones for 3D motion graphics on Spline
How to animate clones for 3D motion graphics on Spline 2
How to animate clones for 3D motion graphics on Spline 3
How to animate clones for 3D motion graphics on Spline 4
Cloner травы из библиотеки Cloner Waves из библиотеки Cloner Grid Motion из библиотеки Cloner Cubes generation из библиотеки
How to create a 3D car interaction with game controls and physics in Spline
Урок c YouTube
Ммашиной можно управлять, нажимая буквы wasd и пробел.
How to use logic in your 3d scenes with Spline
Урок c YouTube
Управление w, a, s, d, пробел для прыжка, управление работает при включении раскладки клавиатуры на английский язык.
How to create 3D physics simulations with Spline 3
Урок 3 с YouTube
Spline имеет три варианта теней, они влияют на скорость физических взаимодействий, чем качественнее тень, тем медленнее анимация.
How to create 3D physics simulations with Spline 2
How to create 3D physics simulations with Spline 1
How to animate 3D blobs with Spline
Designing a glass cube in 3d with Spline
How to create 3D blobs using Spline
Designing a 3D website with Spline and Framer
Making a Game Experience in 3D with Spline
Урок c YouTube
Клавиши w, a, s, d работают для ходьбы, Space для прыжка, ← → ↑ ↓ поворот камеры + поворот камеры мыши.
Необходимо включить именно английскую раскладку клавиатуры, поскольку по ней определяются буквы управления.
Adding sound to 3D scenes using Spline
Урок c YouTube
Фоновый звук должен проиграться один раз после нажатия любой кнопки или щелчка мышкой, в Spline работает, в браузере реагирует только на кнопки.
Если нажимать на куб, раздастся звук.
Making fog in 3d with Spline
How to create bloom and glow effects in 3d with Spline
Creating a toon shading in 3D with Spline
Creating outlines in 3D with Spline
Creating a mini house in 3D with Spline
Rotate and animate in 3D with Spline
Creating a photo studio lighting in 3D with Spline
Creating animation loops and blinking effects with Spline
Designing 3D Avatars with Spline
Part 1
Part 2
Part 3
Part 4
Моделировал людей по уроку
Blinking effect когда курсор двигается у лица, глаза мигают в зависимости от частоты движения мышки
Designing a dark keyboard in 3D with Spline
Making a 3D switch or toggle with Spline
Making a frosted glass icon in 3D with Spline
Creating boolean shapes in 3D with Spline
Making The Batman logo in 3D with Spline
Modeling a Polaroid Go in 3D with Spline
Урок c YouTube
Этот урок был очень объемный, хотя и короткий за видео.
Автор моделировал фотоаппарат Polaroid Go, многие моменты нужно проходить самостоятельно.
Я решил смоделировать модель детализированно, насколько это оправдано и добавить анимацию: при нажатии на красную кнопку появляется фотография. При нажатии на фотографию она возвращается в фотоаппарат.
В сцене можно прокручивать колесо мыши, чтобы приблизить или удалить объект и вращать камеру обзора.
Затем я увидел этот фотоаппарат в библиотеке Spline, он немного отличается от моей версии.
Creating a 3D planet Earth with Spline
Timelapse: Making Molang in 3D - Timelapse with Spline
Designing a 3D toggle button micro-interaction with Spline
Making a smooth 3D gradient depth effect with Spline
Creating Interactive/Reactive Spheres in 3D
How to create an interactive 3D keyboard with Spline
Spline Alpha II: New Material Layers & Modeling Tools
Basics - 3D Vector Editing
Basics - Lighting
Бильярд
Сделал тестовую версию бильярда (собственная разработка) для десктоп, вместо кия сделал красный шар, им можно бить с любого ракурса. Можно вращать камеру, передвигать камеру, нажав ctrl, крутить колесо мышки для изменения расстояния камеры.
Лунки большие – легче попадать. Иногда шар может застрять в борту, пролететь сквозь него, провалиться и застрять внутри стола, подпрыгнуть без столкновения.
Можно сделать качественное моделирование стола с текстурами, разноцветные шары.