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

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

Модератор: immortal

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

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

Сообщение nick7zmail » Вс авг 12, 2018 1:30 pm

Ради прикола решил глянуть)) говорил же - посмотрите мой пример на codepen. Отлично работает между прочем.
Вариант, конечно, не совсем правильный, но, как и говорил - вполне рабочий.
11.jpg
11.jpg (79.78 КБ) 5295 просмотров
С вас скрины - когда все информеры добавите =D.
Вложения
3dscene.rar
(3.05 КБ) 220 скачиваний
За это сообщение автора nick7zmail поблагодарили (всего 3):
odinvolk (Вс авг 12, 2018 4:59 pm) • C_3AXAPOB (Вс авг 12, 2018 9:28 pm) • directman66 (Пн авг 13, 2018 11:55 am)
Рейтинг: 3.49%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
C_3AXAPOB
Сообщения: 510
Зарегистрирован: Ср июн 08, 2016 4:17 pm
Благодарил (а): 124 раза
Поблагодарили: 101 раз

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

Сообщение C_3AXAPOB » Вс авг 12, 2018 9:39 pm

Здорово! Я попробовал на css2d как тут https://threejs.org/examples/#css2d_label
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
C_3AXAPOB
Сообщения: 510
Зарегистрирован: Ср июн 08, 2016 4:17 pm
Благодарил (а): 124 раза
Поблагодарили: 101 раз

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

Сообщение C_3AXAPOB » Вс авг 12, 2018 10:44 pm

Есть еще идея, движение отображать не информером а партиклами, пока ищу какой-нибудь интересный эффект.
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Пн авг 13, 2018 6:35 am

C_3AXAPOB писал(а):
Вс авг 12, 2018 9:39 pm
Здорово! Я попробовал на css2d как тут https://threejs.org/examples/#css2d_label
Дак в моём примере по факту так же и реализовано. Создаётся div поверх слоя canvas, и двигается в зависимости от положения на картинке. Но если под это дело рендерер изобрели специально - почему бы и на нём не сделать))

Покажите потом что получилось в итоге) Интересно прост...может и Сергей тогда оживится - и начнёт в этом направлении что нить дорабатывать. Кстати - ради интереса экспортнул свою сцену из sh3d. Со всеми текстурами и т.п. Время загрузки почти не изменилось. Так же секунды за 2-3 грузится. Картинки не много весят...по несколько десятков килобайт. Если ещё кэш включить - вообще моментом отрабатывать должно.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
C_3AXAPOB
Сообщения: 510
Зарегистрирован: Ср июн 08, 2016 4:17 pm
Благодарил (а): 124 раза
Поблагодарили: 101 раз

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

Сообщение C_3AXAPOB » Пн авг 27, 2018 1:26 am

Добрый день!
Прошу помощи уважаемого nick7zmail!

У меня получилось сделать информеры на CSS. Как мне кажется это попроще и работает быстрее чем в предыдущем варианте.
А вот добавить FontAwesome и вторую строку с влажностью как у вас не выходит. Если будет свободная минута то прошу помочь. В приложении страница с моими потугами в threejs и css.
СпойлерПоказать
Снимок экрана от 2018-08-27 01-21-53.png
Снимок экрана от 2018-08-27 01-21-53.png (162.6 КБ) 5134 просмотра
Вложения
3dsceneCSS.zip
(2.83 КБ) 183 скачивания
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Пн авг 27, 2018 6:12 am

Вы мой пример то качали? Там всё живое, из свойств системы берётся.

Отправлено с моего Xperia XZ1 Compact через Tapatalk

Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
C_3AXAPOB
Сообщения: 510
Зарегистрирован: Ср июн 08, 2016 4:17 pm
Благодарил (а): 124 раза
Поблагодарили: 101 раз

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

Сообщение C_3AXAPOB » Пн авг 27, 2018 1:09 pm

Конечно качал. У меня тоже все берется из свойств системы. Не получается вот это "добавить FontAwesome и вторую строку с влажностью".
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Пн авг 27, 2018 8:58 pm

Вродь работает...значения лень подключать.
11.jpg
11.jpg (19.12 КБ) 5083 просмотра

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

informerDiv2.innerHTML = '<i class="fas fa-thermometer-three-quarters"></i>'+src_temp1.value+ '°C<br><i class="fas fa-tint"></i>'+src_temp1.value+'%'; //room
И fontawesome в тег head засуньте. Оно может и работает, но так правильнее)))
За это сообщение автора nick7zmail поблагодарил:
C_3AXAPOB (Пн авг 27, 2018 9:33 pm)
Рейтинг: 1.16%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Вс сен 02, 2018 9:01 am

Всем привет.
Отличные новости)) Особенно для C_3AXAPOB, т.к. приемущественно ты заморачиваешься с 3д сценами))).
Прикрутил вебсокеты к яваскрипту. Можно применять не только в 3д сценах, но и в различных индикаторах, слайдерах и т.п.
Перво наперво подключаем веб-сокеты и вспомогательные библиотеки (добавляем в тег head)
Код под спойлеромПоказать

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

<script type="text/javascript" src="/3rdparty/jquery/jquery-3.3.1.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/jWindow.js"></script>
<script type="text/javascript" src="/js/jquery.tiny-pubsub.js"></script>

<script>

 var wsTimer=0;
 var startedWebSockets=0;

        function startWebSockets() {
            var loc = window.location, new_uri;
            var serverUrl='';
            if (loc.protocol === "https:") {
                    serverUrl = "wss:";
            } else {
                    serverUrl = "ws:";
            }
            serverUrl += "//" + loc.host + ':8001/majordomo';
            try {
                console.log('Conneting to '+serverUrl);
             if (window.MozWebSocket) {
               wsSocket = new MozWebSocket(serverUrl);
             } else if (window.WebSocket) {
               wsSocket = new WebSocket(serverUrl);
             }

            } catch (e) {
                console.log('Failed connecting to '+serverUrl);
                 return false;
            }
            wsSocket.binaryType = 'blob';
            wsSocket.onopen = function(msg) {
             ///connected
              console.log('WS connected (three.scene)');
              startedWebSockets=1;
              clearTimeout(wsTimer);
              $.publish('wsConnected');
            };
            wsSocket.onmessage = function(msg) {
              console.log('WS data (three.scene)');
              var response;
              response = JSON.parse(msg.data);
              console.log('Action: '+response.action+'; Data: '+response.data);
              $.publish('wsData', response);
              return;
            };
            wsSocket.onclose = function(msg) {
              //disconnected
              startedWebSockets=0;
              wsTimer=setTimeout('startWebSockets();', 5*1000);
              $.publish('wsDisconnected', []);
              console.log('WS disconnected (three.scene)');
              return;
            };
        }

 $(document).ready(function(){
  
   startWebSockets();
  
 });

         

</script>
И теперь можно подписаться на обновление

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

<script language='javascript'>
$.subscribe('wsConnected', function (_) {
         var payload;
         payload = new Object();
         payload.action = 'Subscribe';
         payload.data = new Object();
         payload.data.TYPE='properties';
         payload.data.PROPERTIES='sensor_temp04.value';
         wsSocket.send(JSON.stringify(payload));
        });
function processPropertiesUpdate(data) {
         var obj=jQuery.parseJSON(data);
         var objCnt = obj.length;
           if (objCnt) {
              for(var i=0;i<objCnt;i++) {
               if (obj[i]['PROPERTY']=='sensor_temp04.value') {
	  src_temp1=obj[i]['VALUE'];//вот тут забираем значение
      $.publish('sensor_temp04.value.updated', obj[i]['VALUE']);}
              }
           }
        }$.subscribe('wsData', function (_, response) {
          if (response.action=='properties') {
           processPropertiesUpdate(response.data);
          }
          });
		  </script>
и использовать их в нашей 3д сцене или любом визуальном элементе.
Код миддл-коннектора, естественно можно выкинуть. Из плюсов - моментальная реакция (не успеваю даже на вкладку переключится после изменения свойства - там изменённое значение уже) и меньший загруз сети (скрипт не дёргает значения каждые 2-3 секунды). Как то так. С таким прогрессом мож и сам надумаю 3д сцену опять себе сделать))
За это сообщение автора nick7zmail поблагодарили (всего 3):
C_3AXAPOB (Вс сен 02, 2018 11:10 am) • odinvolk (Вс сен 02, 2018 3:12 pm) • Molostov (Пн сен 03, 2018 2:45 am)
Рейтинг: 3.49%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
C_3AXAPOB
Сообщения: 510
Зарегистрирован: Ср июн 08, 2016 4:17 pm
Благодарил (а): 124 раза
Поблагодарили: 101 раз

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

Сообщение C_3AXAPOB » Сб сен 22, 2018 4:28 am

Наконец-то руки дошли поковырять. Собственно небольшой прогресс и новые вопросы.
Удалось прикрутить информеры с мидлконнектором все работает нормально.
При движении в комнате обновляется запись на информере, комната где было движение на некоторое время подсвечивается зеленым.
Теперь пытаюсь перейти на вебсокеты и так как я никакой программист то возникла очередная запинка. Свойство на информере c вебсокетов отображается как "udefined". Второй вопрос я не понимаю как подписаться на несколько свойств разных объектов.

Трафик!
СпойлерПоказать
test.gif
test.gif (6.51 МБ) 4790 просмотров
Исходники
3dscenes.zip
(1.21 МБ) 205 скачиваний
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
Ответить