MojorDoMo и three.js (3d сцены)
Модератор: immortal
- nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
- Благодарил (а): 121 раз
- Поблагодарили: 2010 раз
Re: MojorDoMo и three.js (3d сцены)
Ради прикола решил глянуть)) говорил же - посмотрите мой пример на codepen. Отлично работает между прочем.
Вариант, конечно, не совсем правильный, но, как и говорил - вполне рабочий. С вас скрины - когда все информеры добавите =D.
Вариант, конечно, не совсем правильный, но, как и говорил - вполне рабочий. С вас скрины - когда все информеры добавите =D.
- Вложения
-
- 3dscene.rar
- (3.05 КБ) 240 скачиваний
- За это сообщение автора 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
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
-
- Сообщения: 510
- Зарегистрирован: Ср июн 08, 2016 4:17 pm
- Благодарил (а): 124 раза
- Поблагодарили: 101 раз
Re: MojorDoMo и three.js (3d сцены)
Здорово! Я попробовал на css2d как тут https://threejs.org/examples/#css2d_label
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
--------------------------------------------------
http://connect.smartliving.ru/profile/908
-
- Сообщения: 510
- Зарегистрирован: Ср июн 08, 2016 4:17 pm
- Благодарил (а): 124 раза
- Поблагодарили: 101 раз
Re: MojorDoMo и three.js (3d сцены)
Есть еще идея, движение отображать не информером а партиклами, пока ищу какой-нибудь интересный эффект.
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
--------------------------------------------------
http://connect.smartliving.ru/profile/908
- nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
- Благодарил (а): 121 раз
- Поблагодарили: 2010 раз
Re: MojorDoMo и three.js (3d сцены)
Дак в моём примере по факту так же и реализовано. Создаётся div поверх слоя canvas, и двигается в зависимости от положения на картинке. Но если под это дело рендерер изобрели специально - почему бы и на нём не сделать))C_3AXAPOB писал(а): ↑Вс авг 12, 2018 9:39 pmЗдорово! Я попробовал на css2d как тут https://threejs.org/examples/#css2d_label
Покажите потом что получилось в итоге) Интересно прост...может и Сергей тогда оживится - и начнёт в этом направлении что нить дорабатывать. Кстати - ради интереса экспортнул свою сцену из sh3d. Со всеми текстурами и т.п. Время загрузки почти не изменилось. Так же секунды за 2-3 грузится. Картинки не много весят...по несколько десятков килобайт. Если ещё кэш включить - вообще моментом отрабатывать должно.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
-
- Сообщения: 510
- Зарегистрирован: Ср июн 08, 2016 4:17 pm
- Благодарил (а): 124 раза
- Поблагодарили: 101 раз
Re: MojorDoMo и three.js (3d сцены)
Добрый день!
Прошу помощи уважаемого nick7zmail!
У меня получилось сделать информеры на CSS. Как мне кажется это попроще и работает быстрее чем в предыдущем варианте.
А вот добавить FontAwesome и вторую строку с влажностью как у вас не выходит. Если будет свободная минута то прошу помочь. В приложении страница с моими потугами в threejs и css.
Прошу помощи уважаемого nick7zmail!
У меня получилось сделать информеры на CSS. Как мне кажется это попроще и работает быстрее чем в предыдущем варианте.
А вот добавить FontAwesome и вторую строку с влажностью как у вас не выходит. Если будет свободная минута то прошу помочь. В приложении страница с моими потугами в threejs и css.
СпойлерПоказать
- Вложения
-
- 3dsceneCSS.zip
- (2.83 КБ) 200 скачиваний
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
--------------------------------------------------
http://connect.smartliving.ru/profile/908
- nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
- Благодарил (а): 121 раз
- Поблагодарили: 2010 раз
Re: MojorDoMo и three.js (3d сцены)
Вы мой пример то качали? Там всё живое, из свойств системы берётся.
Отправлено с моего Xperia XZ1 Compact через Tapatalk
Отправлено с моего Xperia XZ1 Compact через Tapatalk
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
-
- Сообщения: 510
- Зарегистрирован: Ср июн 08, 2016 4:17 pm
- Благодарил (а): 124 раза
- Поблагодарили: 101 раз
Re: MojorDoMo и three.js (3d сцены)
Конечно качал. У меня тоже все берется из свойств системы. Не получается вот это "добавить FontAwesome и вторую строку с влажностью".
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
--------------------------------------------------
http://connect.smartliving.ru/profile/908
- nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
- Благодарил (а): 121 раз
- Поблагодарили: 2010 раз
Re: MojorDoMo и three.js (3d сцены)
Вродь работает...значения лень подключать.
И fontawesome в тег head засуньте. Оно может и работает, но так правильнее)))
Код: Выделить всё
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
- За это сообщение автора nick7zmail поблагодарил:
- C_3AXAPOB (Пн авг 27, 2018 9:33 pm)
- Рейтинг: 1.16%
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
- nick7zmail
- Сообщения: 7573
- Зарегистрирован: Пн окт 28, 2013 8:14 am
- Откуда: Екатеринбург
- Благодарил (а): 121 раз
- Поблагодарили: 2010 раз
Re: MojorDoMo и three.js (3d сцены)
Всем привет.
Отличные новости)) Особенно для C_3AXAPOB, т.к. приемущественно ты заморачиваешься с 3д сценами))).
Прикрутил вебсокеты к яваскрипту. Можно применять не только в 3д сценах, но и в различных индикаторах, слайдерах и т.п.
Перво наперво подключаем веб-сокеты и вспомогательные библиотеки (добавляем в тег head)
И теперь можно подписаться на обновление
и использовать их в нашей 3д сцене или любом визуальном элементе.
Код миддл-коннектора, естественно можно выкинуть. Из плюсов - моментальная реакция (не успеваю даже на вкладку переключится после изменения свойства - там изменённое значение уже) и меньший загруз сети (скрипт не дёргает значения каждые 2-3 секунды). Как то так. С таким прогрессом мож и сам надумаю 3д сцену опять себе сделать))
Отличные новости)) Особенно для 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>
Код миддл-коннектора, естественно можно выкинуть. Из плюсов - моментальная реакция (не успеваю даже на вкладку переключится после изменения свойства - там изменённое значение уже) и меньший загруз сети (скрипт не дёргает значения каждые 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
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
-
- Сообщения: 510
- Зарегистрирован: Ср июн 08, 2016 4:17 pm
- Благодарил (а): 124 раза
- Поблагодарили: 101 раз
Re: MojorDoMo и three.js (3d сцены)
Наконец-то руки дошли поковырять. Собственно небольшой прогресс и новые вопросы.
Удалось прикрутить информеры с мидлконнектором все работает нормально.
При движении в комнате обновляется запись на информере, комната где было движение на некоторое время подсвечивается зеленым.
Теперь пытаюсь перейти на вебсокеты и так как я никакой программист то возникла очередная запинка. Свойство на информере c вебсокетов отображается как "udefined". Второй вопрос я не понимаю как подписаться на несколько свойств разных объектов.
Трафик!
Исходники
Удалось прикрутить информеры с мидлконнектором все работает нормально.
При движении в комнате обновляется запись на информере, комната где было движение на некоторое время подсвечивается зеленым.
Теперь пытаюсь перейти на вебсокеты и так как я никакой программист то возникла очередная запинка. Свойство на информере c вебсокетов отображается как "udefined". Второй вопрос я не понимаю как подписаться на несколько свойств разных объектов.
Трафик!
СпойлерПоказать
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
--------------------------------------------------
http://connect.smartliving.ru/profile/908