MojorDoMo и three.js (3d сцены)

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Аватара пользователя
nick7zmail
Сообщения: 7436
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 1960 раз

MojorDoMo и three.js (3d сцены)

Сообщение nick7zmail » Вт окт 13, 2015 10:04 pm

Решил создать тему посвященную библиотеке three.js.
Процессинг это, конечно хорошо, и более чем достаточно для различной индикации, но вот с управлением там по-сложнее. Мне удалось словить клики на области отрисовки, но не получилось опознать объект на котором был клик. И поскольку я много слышал ( в том числе в вышеупомянутой теме) про возможности three.js, решил попробовать по-копать её)). Сперва немного о перспективах:

Как писали в той теме:
ЦитатаПоказать
lavstudia писал(а):Alex, отлично!

Я вчера как раз начал реализацию 3D сцены, для квартиры.

Схема следующая:
1) В программе Sweet Home 3D - создаем 3D сцену (своей квартиры)
2) Экспортируем в OBJ формат
3) На этом этапе мы уже можем видеть и собственно если нет необходимости в детализации и дополнения - использовать полученный obj в three.js (как пример импортировать в редактор three.js: http://threejs.org/editor/ (редактор имеет открытый исходный код - на github, как и three.js))
4) Если необходимо качество и детализация объектов, а также добавление 3D объектов сцены (как пример всевозможные датчики) необходима программа Blender 3D (популярный 3D редактор с открытым исходным кодом)
5) В Blender 3D импортируется полученный obj - по необходимости модернизируется
6) Из Blender 3D модернизированная 3D сцена экспортируется в формат three.js - https://github.com/mrdoob/three.js/tree ... rs/blender
7) Далее необходимо реализовать навигатор на three.js по 3D сцене (можно взять за основу http://threejs.org/editor/)
8) Реализовать взаимодействие с MajorDoMo на уровне JavaScript (это легко - но тредует определенной архитектурной проработки)

Как-то так..

Как будут готовые результаты - опубликую.

PS: Задача не трудная, очень жаль что так мало свободного времени....
Результата там, к сожалению, еще не было. Но идея очень занятная. И так как для реализации будет использован three.js, выкладывать можно сразу в этой теме.

На three.js можно создавать полностью интерактивные реалистичные 3d сцены. Где то был классный пример, но не смог его найти. Пример был что то вроде этого (седьмая сцена с комнатой).

Но, пока вернемся на землю. По скольку я не особо шарю в программировании, особенно на яве - могу пока предложить лишь это =D.
11.jpg
Кубики
11.jpg (8.61 КБ) 12836 просмотров
Да да, это просто кубики в пространстве нарисованные на three.js. Но, немного по-шаманив, сделал так, что при нажатии на кубики запускаются методы MD. Не обошлось конечно без middle_connector'а от Alex. Начал понимать - зачем он нужен))). Бонусом - кубики разлетаются в разные стороны при нажатии =D...ну это так, смотрел на разные подключаемые библиотеки. Для того чтобы отключить - достаточно удалить соответствующий кусок кода (после коммента //бонус). Запаковал в архив минимально рабочий набор). Должно завестись на чистой системе. Достаточно закинуть все в папку htdocs. Вызывать по адресу <ip сервера>/three/test.html. Соответственно нужно поправить имена объектов и методов на свои.
Исправить тутПоказать

Код: Выделить всё

                case 0:
                test_js = new middle_connector('свет_на_кухне.turnon', 'l', 5000, 1);
                test_js.objectToSend = 'свет_на_кухне';
                test_js.methodToSend = 'turnon';
                test_js.MultiSendData();
                break;
                case 1:
                test_js = new middle_connector('свет_в_зале.turnon', 'l', 5000, 1);
                test_js.objectToSend = 'свет_в_зале';
                test_js.methodToSend = 'turnon';
                test_js.MultiSendData();
                break;
                case 2:
                test_js = new middle_connector('свет_в_ванной.turnon', 'l', 5000, 1);
                test_js.objectToSend = 'свет_в_ванной';
                test_js.methodToSend = 'turnon';
                test_js.MultiSendData();
                break; 
Если у кого есть наработки по threejs, или просто идеи - предлагаю выкладывать сюда =).
Спасибо за внимание!
Вложения
threejs.rar
Архив
(237.35 КБ) 200 скачиваний
За это сообщение автора nick7zmail поблагодарил:
Strangeman (Пн окт 22, 2018 11:21 pm)
Рейтинг: 1.2%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Alex
Сообщения: 2357
Зарегистрирован: Пт апр 20, 2012 12:53 pm
Благодарил (а): 42 раза
Поблагодарили: 262 раза

Re: MojorDoMo и three.js (3d сцены)

Сообщение Alex » Ср окт 14, 2015 8:02 am

Не обошлось конечно без middle_connector'а от Alex. Начал понимать - зачем он нужен))).
Ну, слава Богу, хоть до кого-то дошло.

А вообще отличный почин. Если вы сделали один пример, то остальное — дело техники, можно постепенно сделать всё, что угодно.
Аватара пользователя
sergejey
Site Admin
Сообщения: 4278
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1525 раз
Контактная информация:

Re: MojorDoMo и three.js (3d сцены)

Сообщение sergejey » Ср окт 14, 2015 11:11 am

Интересно, не знал что Sweet Home 3D может экспортировать в формат пригодный для three.js. Собственно, буквально на днях размышлял о полноценных 3d сценах, но пока только на уровне концепций. Как мне видится идеальный вариант был бы использовать 3d-редактор для создания сцены, расширив его возможности блоком описания условий отображения отдельных объектов, реакцию на нажатие на них, а так же простые процедуры добавление типовых объектов типа информеров.
За это сообщение автора sergejey поблагодарил:
Samir77 (Чт сен 27, 2018 11:32 pm)
Рейтинг: 1.2%

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
lavstudia
Сообщения: 31
Зарегистрирован: Вт фев 04, 2014 9:29 am
Благодарил (а): 0
Поблагодарили: 4 раза

Re: MojorDoMo и three.js (3d сцены)

Сообщение lavstudia » Ср окт 14, 2015 11:31 am

Alex в продолжении темы могу сказать следующие (основываясь на большом опыте использования):
- three.js - имеет ряд проблем в плане оптимизации, экспорта в json (из Blender) и др.
- В качестве рабочего варианта использую Blend4Web - https://www.blend4web.com/ru/

Что такое Blend4Web
Blend4Web (произносится «блэнд-фо-вэб») - это средство интерактивной 3D визуализации в Интернет.
Платформа предназначена для создания презентаций продуктов, обучающих программ, онлайн-игр, рекламы и целых веб-сайтов.
Приложения на основе Blend4Web работают в обычных интернет-браузерах, в том числе и на мобильных устройствах. Установки каких-либо дополнительных программ (плагинов) не требуется.
В качестве редактора сцен используется популярный пакет 3D моделирования и анимации Blender. Экспорт для работы в браузере производится за одну операцию. Возможен экспорт в виде единственной самодостаточной веб-страницы.
Blend4Web является программным продуктом с открытым исходным кодом, без зависимостей от каких-либо закрытых компонентов или облачных сервисов.

От себя могу добавить - Blend4Web это качественный и завершенных продукт (что важно Российского производства!!!), с высокой интеграцией в Blender (в отличие от three.js и др. подобных решений).
Blend4Web - так же имеет средства визуального программирования интерактивных сцен (прямо в Blender).

И могу сказать, что данная тема не заглохла, а активно развивается мной.
Вот примеры сцен:
Общий план 1 - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Общий план 2 - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Общий план 3 - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Включённая подсветка объектов автоматики на сцене - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Некоторые аннотации для управления объектами автоматики на сцене - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Включённый кондиционер (система частиц) - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Общий план 4 (вид сверху) - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Отключение слоёв на сцене (3, 4 слои) - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Анимационные состояния кнопок (это картинка последствий) - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Отключение слоёв на сцене (2 слой) - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Включение света на сцене - https://drive.google.com/file/d/0BxLGoz ... sp=sharing
Расширенная панель управления и мониторинга - https://drive.google.com/file/d/0BxLGoz ... sp=sharing

Как то так )))
За это сообщение автора lavstudia поблагодарили (всего 3):
nick7zmail (Ср окт 14, 2015 1:24 pm) • ipc2002 (Сб июл 07, 2018 9:16 am) • Samir77 (Чт сен 27, 2018 11:32 pm)
Рейтинг: 3.61%
Аватара пользователя
sergejey
Site Admin
Сообщения: 4278
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1525 раз
Контактная информация:

Re: MojorDoMo и three.js (3d сцены)

Сообщение sergejey » Ср окт 14, 2015 11:53 am

lavstudia писал(а):Alex в продолжении темы могу сказать следующие (основываясь на большом опыте использования):
- three.js - имеет ряд проблем в плане оптимизации, экспорта в json (из Blender) и др.
- В качестве рабочего варианта использую Blend4Web - https://www.blend4web.com/ru/
Тоже интересное направление. Собственно, на сколько я понял, это сейчас основные конкурирующие framework-и: Blend4Web и Three.js
Последний мне показался как-то проще в освоении, хотя может и ошибаюсь.

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
lavstudia
Сообщения: 31
Зарегистрирован: Вт фев 04, 2014 9:29 am
Благодарил (а): 0
Поблагодарили: 4 раза

Re: MojorDoMo и three.js (3d сцены)

Сообщение lavstudia » Ср окт 14, 2015 12:01 pm

Blend4Web значительно превосходит Three.js.

Судите сами:
Что выбрать для 3D сайта – Three.js или Blend4Web? - http://habrahabr.ru/post/262749/
Почему в NASA отказались от Unity в пользу Blend4Web - http://habrahabr.ru/post/264457/
Blend4Web vs Unity. Битва за Интернет - http://habrahabr.ru/post/260391/

Blend4Web - основной выбор в качестве WebGL движка.
Аватара пользователя
nick7zmail
Сообщения: 7436
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 1960 раз

Re: MojorDoMo и three.js (3d сцены)

Сообщение nick7zmail » Ср окт 14, 2015 12:04 pm

Кстати говоря - для информации.
Совершенно нечаянно обнаружил, что в windows 10 есть стандартный редактор .obj файлов. Называется 3DBuilder вроде.
А из SweetHome3d действительно можно экспортировать в obj.
Потихоньку капаюсь в этой теме (по поводу того, как это все дело подключать через threejs, и обрабатывать).
Последний раз редактировалось nick7zmail Ср окт 14, 2015 12:25 pm, всего редактировалось 1 раз.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7436
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 1960 раз

Re: MojorDoMo и three.js (3d сцены)

Сообщение nick7zmail » Ср окт 14, 2015 12:10 pm

lavstudia писал(а): И могу сказать, что данная тема не заглохла, а активно развивается мной.
Вот примеры сцен:
Сцены шикарные) К чему-то такому и была задумка стремится. Исходниками не поделитесь, во всеобщее обозрение?
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
lavstudia
Сообщения: 31
Зарегистрирован: Вт фев 04, 2014 9:29 am
Благодарил (а): 0
Поблагодарили: 4 раза

Re: MojorDoMo и three.js (3d сцены)

Сообщение lavstudia » Ср окт 14, 2015 12:25 pm

Сцены шикарные) К чему-то такому и была задумка стремится. Исходниками не поделитесь, во всеобщее обозрение?
nick7zmail - спасибо!)

По поводу исходников могу сказать следующие:
- Сцены полностью воссозданы в Blender (сначала комната была создана в SweetHome3D, а затем экспортированы в obj - далее Blender) с использованием дополнительного плагина (написанного моей командой), плагин позволяет реализовать мониторинг и управление объектами автоматики в реальном времени (без какого либо программирования), основываясь на данных от сервера автоматики.
- Далее сцена просто экспортируется плагином в готовую html сцену и связью с сервером автоматики (без "танца с бубном" и программирования).
- И самое главное - сервер автоматики это не MDM. Сервер автоматики - собственная реализация (включая конфигуратор).

На текущий момент, данный сервер автоматики (с кофигуратором, плагином для Blender и др. инструментами) к сожалению ещё не опубликованы в публичный доступ, но вскоре всё будет...)
Аватара пользователя
nick7zmail
Сообщения: 7436
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 1960 раз

Re: MojorDoMo и three.js (3d сцены)

Сообщение nick7zmail » Ср окт 14, 2015 12:29 pm

lavstudia писал(а): - И самое главное - сервер автоматики это не MDM. Сервер автоматики - собственная реализация (включая конфигуратор).

На текущий момент, данный сервер автоматики (с кофигуратором, плагином для Blender и др. инструментами) к сожалению ещё не опубликованы в публичный доступ, но вскоре всё будет...)
Ну что же, будем надеяться, что ваша разработка вскоре будет опубликована =). Ждем релиза и ссылки на проект).
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Ответить