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

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

Модератор: immortal

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

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

Сообщение nick7zmail » Чт июл 26, 2018 11:14 pm

skysilver писал(а):Прикольно. ) А можно, чтобы она сама не крутилась, а мышкой только?
Можно...алгоритм вращения камеры выключи (что то там с косинусом или с синусом формула).

Отправлено с моего 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 » Чт июл 26, 2018 11:22 pm

skysilver писал(а):
Чт июл 26, 2018 11:13 pm
Прикольно. ) А можно, чтобы она сама не крутилась, а мышкой только?
Да, это реализовано. Управление мышкой есть при нажатии кнопки ну или на планшете пальцем).
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 » Чт июл 26, 2018 11:25 pm

nick7zmail писал(а):
Чт июл 26, 2018 11:14 pm
Поздравляю! Достойный результат уже. Про информеры подкинул идейку выше).

Отправлено с моего Xperia XZ1 Compact через Tapatalk
Спасибо вам. Без ваших примеров бы ничего не вышло.
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:15 pm

skysilver писал(а):
Чт июл 26, 2018 11:13 pm
Прикольно. ) А можно, чтобы она сама не крутилась, а мышкой только?
А не...там всё в разы проще...достаточно убрать (закоментить) строку controls.autoRotate = true;.
Да, скачал ваш файлик глянуть ради интереса)
А зачем на сцене туман? Ещё и резкий черный при максимальной дальности?))
scene.fog = new THREE.FogExp2(000000, 0.0003);
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 9:25 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 » Пт июл 27, 2018 9:26 pm

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

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

Сообщение C_3AXAPOB » Сб июл 28, 2018 12:18 am

nick7zmail писал(а):
Чт июл 26, 2018 10:29 pm
Кстати...на счет информеров...примерчик...у меня до него, если честно руки не добрались)) но ссылочка осталась.
http://stemkoski.github.io/Three.js/Spr ... abels.html
Не подошло, пример для старой версии three.js
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 » Сб июл 28, 2018 9:22 am

Ну я как пример скинул...надо под новую переписать.
Суть в том, что надо использовать sprite с текстовыми надписями.
Если доберусь - на досуге попробую возможно)
UPD:
https://codepen.io/nick7zmail/pen/wxPKRx
вот пример для новой версии.
UPD2:
Мне кажется ещё хорошей идеей добавить на сцену кнопки управления...в умном доме много всяких штук (типа выключателей, информеров, кнопок, диммеров и т.п.). Если всё сразу высветить - картинка будет выглядить "мусорно" немного...тут слои нужны...например тыкнул информеры - отображаются только информеры...тыкнул свет - информеры скрылись, вылезли "лампочки" над комнатами.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
C_3AXAPOB
Сообщения: 510
Зарегистрирован: Ср июн 08, 2016 4:17 pm
Благодарил (а): 124 раза
Поблагодарили: 101 раз

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

Сообщение C_3AXAPOB » Вс июл 29, 2018 12:52 am

Получилось завести информеры. Помог stackoverflow.

В функцию init добавляем:

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

var informer= makeTextSprite( " Тест  ", 
{ fontsize: 24, borderColor: {r:255, g:0, b:0, a:1.0}, backgroundColor: {r:255, g:100, b:100, a:0.3} } );
informer.position.set(25,50,55);
informer.scale.set(30, 30, 30);
scene.add( informer );
Вводим еще две функции
СпойлерПоказать

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

function makeTextSprite( message, parameters )
{
	if ( parameters === undefined ) parameters = {};
	
	var fontface = parameters.hasOwnProperty("fontface") ? 
		parameters["fontface"] : "Arial";
	
	var fontsize = parameters.hasOwnProperty("fontsize") ? 
		parameters["fontsize"] : 18;
	
	var borderThickness = parameters.hasOwnProperty("borderThickness") ? 
		parameters["borderThickness"] : 4;
	
	var borderColor = parameters.hasOwnProperty("borderColor") ?
		parameters["borderColor"] : { r:0, g:0, b:0, a:1.0 };
	
	var backgroundColor = parameters.hasOwnProperty("backgroundColor") ?
		parameters["backgroundColor"] : { r:255, g:255, b:255, a:1.0 };
			
	var canvas = document.createElement('canvas');
	var context = canvas.getContext('2d');
	context.font = "Bold " + fontsize + "px " + fontface;
    
	// get size data (height depends only on font size)
	var metrics = context.measureText( message );
	var textWidth = metrics.width;
	
	// background color
	context.fillStyle   = "rgba(" + backgroundColor.r + "," + backgroundColor.g + ","
								  + backgroundColor.b + "," + backgroundColor.a + ")";
	// border color
	context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + ","
								  + borderColor.b + "," + borderColor.a + ")";

	context.lineWidth = borderThickness;
	roundRect(context, borderThickness/2, borderThickness/2, textWidth + borderThickness, fontsize * 1.4 + borderThickness, 6);
	// 1.4 is extra height factor for text below baseline: g,j,p,q.

    // text color
    context.fillStyle = 'rgba(0, 0, 0, 1.0)';
    context.fillText(message, 0, fontsize);

    // canvas contents will be used for a texture
    var texture = new THREE.Texture(canvas)
    texture.minFilter = THREE.LinearFilter;
    texture.needsUpdate = true;

    var spriteMaterial = new THREE.SpriteMaterial({ map: texture });
    var sprite = new THREE.Sprite( spriteMaterial );
    sprite.scale.set( 10, 5, 1.0 );
    sprite.center.set( 0,1 );
    return sprite;
}
СпойлерПоказать

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

// function for drawing rounded rectangles
function roundRect(ctx, x, y, w, h, r) 
{
    ctx.beginPath();
    ctx.moveTo(x+r, y);
    ctx.lineTo(x+w-r, y);
    ctx.quadraticCurveTo(x+w, y, x+w, y+r);
    ctx.lineTo(x+w, y+h-r);
    ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
    ctx.lineTo(x+r, y+h);
    ctx.quadraticCurveTo(x, y+h, x, y+h-r);
    ctx.lineTo(x, y+r);
    ctx.quadraticCurveTo(x, y, x+r, y);
    ctx.closePath();
    ctx.fill();
	ctx.stroke();   
}
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 » Вс июл 29, 2018 3:20 am

Так, появилась проблема на стыке информера и мидл коннектора. А именно как передать значение в информер. На скрине два значения вписаны мной вручную в хтмл, а вот значение которое [undefined] это значение из коннектора. Что делать пока не знаю.
СпойлерПоказать
Peek 2018-07-29 03-12.gif
Peek 2018-07-29 03-12.gif (3.98 МБ) 4315 просмотров
Исходники в прилагаемом архиве. :roll:
Вложения
3dscenes.zip
(1.21 МБ) 178 скачиваний
Orange pi pc plus, megaD-2561, Xiaomi
--------------------------------------------------
http://connect.smartliving.ru/profile/908
Ответить