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

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

Модератор: immortal

Аватара пользователя
sergejey
Site Admin
Сообщения: 4284
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1559 раз
Контактная информация:

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

Сообщение sergejey » Пт окт 23, 2015 3:43 pm

В догонку -- открывать научился, но частично. Почему-то одни сцены (из примеров) загружаются, а другие (экспортированные из редактора) -- нет. Код загрузки один и тот же, отличаются только загружаемые файлы.

Полный код вставки (немного выдрано из контекста, но суть понятна):
СпойлерПоказать

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

   <script language="javascript" src="<#ROOTHTML#>js/threejs/three.min.js"></script>
   <!--#<script language="javascript" src="<#ROOTHTML#>js/threejs/loaders/JSONLoader.js"></script>#-->

   <script language="javascript">
    container[#ID#] = document.getElementById( 'canvas[#ID#]' );
    document.body.appendChild( container[#ID#]);

    var scene[#ID#] = new THREE.Scene();
    var camera[#ID#] = new THREE.PerspectiveCamera(95, [#WIDTH#]/[#HEIGHT#], 0.1, 1000);

    renderer[#ID#] = new THREE.WebGLRenderer();

    renderer[#ID#].setSize([#WIDTH#], [#HEIGHT#] );
    container[#ID#].appendChild( renderer[#ID#].domElement );

    var ambientLight = new THREE.AmbientLight(0x999999);
    scene[#ID#].add(ambientLight);

        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene[#ID#].add( cube );

        camera[#ID#].position.z = 5;

        [#if S3D_SCENE!=""#]
        var sceneURL='/cms/scenes/3d/monster.js'; //
        //var sceneURL='[#S3D_SCENE#]';
        //var sceneURL='/cms/scenes/3d/android-animations.js';
        //var sceneURL='/cms/scenes/3d/scene.js'; -- не грузится!

        //alert(sceneURL);
        var loader = new THREE.JSONLoader();
        loader.load(
                sceneURL,
                function ( geometry, materials ) {
                  alert('Loaded!');
                  var material = new THREE.MeshFaceMaterial( materials );
                  var object = new THREE.Mesh( geometry, material );
                  scene[#ID#].add( object );
                }
        );
        [#endif#]

        var render[#ID#] = function () {
            requestAnimationFrame(render[#ID#]);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer[#ID#].render(scene[#ID#], camera[#ID#]);
        };

        render[#ID#]();

   </script>
Вот сцена, которая никак не хочет грузится и отображаться. Хотя в редактор отлично загружается.
СпойлерПоказать

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

{
        "metadata": {
                "version": 4.4,
                "type": "Object",
                "generator": "Object3D.toJSON"
        },
        "geometries": [
                {
                        "uuid": "AF333F34-D838-4A5B-ABEA-AE80A52BA225",
                        "type": "BoxGeometry",
                        "width": 100,
                        "height": 100,
                        "depth": 100,
                        "widthSegments": 1,
                        "heightSegments": 1,
                        "depthSegments": 1
                }],
        "materials": [
                {
                        "uuid": "42AFFB98-0BB9-4408-A5BE-D32B78456D7B",
                        "type": "MeshNormalMaterial"
                }],
        "object": {
                "uuid": "3741222A-BD8F-401C-A5D2-5A907E891896",
                "type": "Scene",
                "name": "Scene",
                "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
                "children": [
                        {
                                "uuid": "697CED0A-2C2C-4E48-844D-6A4E69147BBE",
                                "type": "Mesh",
                                "name": "Box 1",
                                "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],
                                "geometry": "AF333F34-D838-4A5B-ABEA-AE80A52BA225",
                                "material": "42AFFB98-0BB9-4408-A5BE-D32B78456D7B"
                        },
                        {
                                "uuid": "17FF006E-6BCA-412F-8186-5B83127B6FF0",
                                "type": "AmbientLight",
                                "name": "AmbientLight 1",
                                "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,164.7548370361328,88.9793930053711,0,1],
                                "color": 2236962
                        },
                        {
                                "uuid": "3DB28C67-B546-46BF-BA11-B64252925625",
                                "type": "PerspectiveCamera",
                                "name": "PerspectiveCamera 1",
                                "matrix": [1,0,0,0,0,1,0,0,0,0,1,0,54.05452346801758,0,251.69320678710938,1],
                                "zoom": 1,
                                "fov": 50,
                                "aspect": 1,
                                "near": 1,
                                "far": 10000
                        }]
        }
} 

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Пт окт 23, 2015 5:48 pm

Я хз, ради эксперимента попробовал подгрузить твою сцену - вроде все ок. Правда лодер там другой

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

                var objectLoader = new THREE.ObjectLoader();
                objectLoader.load("models/test.json", function ( obj ) {
                     scene.add( obj );
                } ); 
Вот рабочий архив.

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

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

Сообщение lavstudia » Пт окт 23, 2015 6:10 pm

Единственное - не понимаю почему, но когда открываешь файлы с диска - не грузит, а когда копируешь в корень мд, и запускаешь оттуда - все грузит. Понять не могу почему, пути вроде все прописаны.
Потому что из-под запущенного сервера. Это политика безопасности браузера!
http://www.chrome-allow-file-access-from-file.com/ (этот "костыль" может не работать в последних версиях хрома)

Запускайте из-под сервера, с относительными путями - и будет вам счастье)
За это сообщение автора lavstudia поблагодарил:
nick7zmail (Пт окт 23, 2015 7:34 pm)
Рейтинг: 1.16%
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Пт окт 23, 2015 7:35 pm

lavstudia писал(а): Потому что из-под запущенного сервера. Это политика безопасности браузера!
Запускайте из-под сервера, с относительными путями - и будет вам счастье)
Пасиб, не знал
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Вс окт 25, 2015 8:23 pm

Итак, хорошие новости: добрался я до экспорта .obj в сцены =).
Плохие новости: до редактора сцен на выходных руки не дошли.
Одним словом встречайте, вот первая более-менее адекватная сцена в 3d.
111.jpg
Слева - все выключено, справа - все включено.
111.jpg (60.19 КБ) 9563 просмотра
Делает в принципе то же что и предыдущая, но по внешнему виду уже выглядит почти законченной).
Управление все еще сферами, т.к. не нашел модельки лампочек =D.
Единственное - какая то херня с тенями от сфер. Как не пытался отключить - не выходит. Если кто разберется - отпишитесь.

Ну и по традиции - все в архиве! =) Архив не влез на форум, так что с гуглодрайва. Напоминаю - распаковывать в htdocs, открывать по ссылке (или встраивать в домашние страницы) http://<ваш ip>/three/webgl_loader_obj_mtl.html
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
sergejey
Site Admin
Сообщения: 4284
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1559 раз
Контактная информация:

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

Сообщение sergejey » Пн окт 26, 2015 11:39 am

nick7zmail писал(а):Я хз, ради эксперимента попробовал подгрузить твою сцену - вроде все ок. Правда лодер там другой

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

                var objectLoader = new THREE.ObjectLoader();
                objectLoader.load("models/test.json", function ( obj ) {
                     scene.add( obj );
                } ); 
Вот рабочий архив.
Спасибо, попробую через OBJ-загрузчик, но он не грузит материалы, камеры, свет -- только геометрию, если я правильно понимаю. Буду искать всё-таки как сцену целиком загрузить :)

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
Аватара пользователя
sergejey
Site Admin
Сообщения: 4284
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1559 раз
Контактная информация:

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

Сообщение sergejey » Пн окт 26, 2015 6:42 pm

Расковырял загрузчик сцен и смог загрузить сцену из примеров. Казалось бы всё хорошо, а фиг там. Теперь совершенное не понятно, как такую сцену создать. Формат сцен из их редактора совсем не такой. Короче, я разочарован. Хотелось бы в нормальном редакторе создать сцену (с камерами, со светом, с материалами и т.п.) и просто её загрузить. Как я понял, для threejs такого счастья пока нет :(

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Пн окт 26, 2015 7:09 pm

Хм...печаль...думал когда до редактора доберусь - будет проще со сценками...видимо наоборот)). Как вариант можно попробовать свой мегапростой редактор накидать. Типа основной скин грузишь экспортом из sweethome, а в редакторе докидываешь, и расставляешь цвет, свет, информеры, камеры, объекты.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

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

Сообщение nick7zmail » Пн окт 26, 2015 8:13 pm

Кстати, есть еще

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

THREE.SceneLoader() 
Мне кажется тут как раз он подойдет. Там можно цепляться к загруженой камере, и т.п.

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

                    camera = loaded.currentCamera;
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix(); 
Среди примеров threejs наткнулся вот. Пока не копал, но возможно то что надо.
За это сообщение автора nick7zmail поблагодарил:
lanket (Чт дек 17, 2015 6:02 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 » Сб окт 31, 2015 5:51 pm

Судя по постам Сергея - с редактором как то не сложилось...а у меня до него как-то руки пока не дошли...
По-этому пока что мини-инструкция, как сделать подобную сценку (несколько постов выше) без редактора, ручками), для тех кто хочет сделать что-то подоюное))
1) Рисуем все что хотим в sweethome, либо любой другой проге, которая умеет экспортить в .obj.
2) Кликабельные объекты экспортим в отдельные модельки.
3) Располагаем на сцене что как и где должно быть (при помощи координат)
4) При добавлении на сцену (качаем пример, смотрим) прописываем у всего, что должно кликаться свойство

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

objects.push( <названме объекта> ); 
а так же присваиваем им имена

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

object.name = 0; 
5) В куске кода отвечающем за клики по объектам прописываем реакцию на них (в моем случае через мидл-коннектор запуск методов)

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

switch ( intersects[ 0 ].object.name ) {
                case 0:
                    if (stat1) {
                    src1.objectToSend = 'свет_в_зале';
                    src1.methodToSend = 'turnoff';
                    src1.MultiSendData();
                    } else {
                    src1.objectToSend = 'свет_в_зале';
                    src1.methodToSend = 'turnon';
                    src1.MultiSendData();
                    }                
                break;
                case 1:
                    if (stat2) {
                    src2.objectToSend = 'свет_на_кухне';
                    src2.methodToSend = 'turnoff';
                    src2.MultiSendData();
                    } else {
                    src2.objectToSend = 'свет_на_кухне';
                    src2.methodToSend = 'turnon';
                    src2.MultiSendData();
                    }
                break;
                case 2:
                    if (stat3) {
                    src3.objectToSend = 'свет_в_ванной';
                    src3.methodToSend = 'turnoff';
                    src3.MultiSendData();
                    } else {
                    src3.objectToSend = 'свет_в_ванной';
                    src3.methodToSend = 'turnon';
                    src3.MultiSendData();
                    }
                break;
                } 
0,1,2 в данном случае имена объектов.
6) Если нужно что-то менять на сцене в зависимости от свойств - прописываем в функции рендера

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

if (stat1) {
                    light1.color.setHex( 0xFF0000 );
                    } else {
                    light1.color.setHex( 0x000000 );
                }
                if (stat2) {
                    light2.color.setHex( 0x00FF00 );
                    } else {
                    light2.color.setHex( 0x000000 );
                }
                if (stat3) {
                    light3.color.setHex( 0x0000FF );
                    } else {
                    light3.color.setHex( 0x000000 );
                } 
Можно на одной сцене сделать несколько групп объектов. Как в этом примере
222.jpg
222.jpg (149.91 КБ) 9449 просмотров
Актуально, когда, скажем, несколько этажей в доме.
Единственное - не придумал, что делать с информерами. Пока что есть пару вариантов - например как наложенное поверх 3d меню, или прямо в 3d висящий текст...или какие-нибудь кубики, площадки с текстом....я хз...у кого есть идеи - отпишитесь.

Ну и просто бонус) Прикольный информер погоды, можно воткнуть несколько городов.
11111.jpg
11111.jpg (30.3 КБ) 9449 просмотров
Мануал как его сделатьПоказать
Перво-наперво кэшируем картинки погоды с яндекса (с городов которые вам нужны)

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

$url = 'http://info.weather.yandex.net/yekaterinburg/4.ru.png';
$path = './three/img/yk.png';
file_put_contents($path, file_get_contents($url));
sleep(1);
$url = 'http://info.weather.yandex.net/nizhniy-tagil/4.ru.png';
$path = './three/img/nt.png';
file_put_contents($path, file_get_contents($url)); 
Это все дело добавляем в любой сценарий, выполняющийся раз в, скажем, час.
Потом накладываем картинку на кубик в threejs - см. приложенный архив
И третье - вставляем куда нужно, или открываем отдельной страничкой http://<ip сервера>/three/webgl_geometry_cube.html
Его можно воткнуть в шапку, страницу, или даже в сцену...правда в сцену у меня он вставился через одно место (а именно iframe)

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

<iframe src="/three/webgl_geometry_cube.html" width="300" height="250" border="0" frameborder="0" allowTransparency allowtransparency="true">
</iframe> 
И как я не пытался воткнуть прозрачность на фон - не получилось. Это из-за iframe-а. Пришлось установить фон, как у сцены. А по коду в поле "дополнительный javascript код" - рисоваться не захотело.
Вложения
three.rar
Архив
(138.86 КБ) 211 скачиваний
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Ответить