PlayCanvas - WebGL Engine & Tools (25 стр) / Утилиты / Форум / Проекты / GameDev.ru

− Скрыть

еперь попробовал вариант с добавлением в 3д-модель элемента Entity - Element(Text), +добавил к нему скрипт ui.js в котором вводится текст. осталась задача банальнейшая - передать этот введенный текст в этот самый Element.
Не работает. Не хватает мне пока познаний в яваскрипте и PC, всё-таки.
Сцена выглядит так: Scene -> stand_1_07 -> Text1
Scene = Entity, stand_1_07 - Model, Text1 - Entity со скриптом ui.js и Element(Text), который и надо менять.

Сейчас у меня в ui.js прописано так:
this.entity.element.text = val; // val - введенный пользователем текст.
ничего.

при этом
this.entity.rotate(90,90,90); поворачивает текст на 90 градусов.

В идеале, конечно бы узнать как заюзать доступ к модели из любого места (никак не привыкну ещё к этим богомерзким this в яваскрипте, и чтобы отпала необходимость привязки скрипта к модели к которой надо обращаться через this).
сейчас у меня работает this.entity.rotate(90,90,90); только из корня ui.js, когда засовываю в функцию - ругается на entity.

8Observer8
Постоялец

#362
8:09, 16 июня 2018

Plastic, раздирает любопытство, что вами планируется сделать на PlayCanvas и что уже сделано?

Mr F
Постоялец

#363
17:15, 16 июня 2018

Plastic
> доступ к модели из любого места
this.app.root.findByName("имя объекта").компонент

>только из корня ui.js, когда засовываю в функцию - ругается на entity.
если это просто функция где-то болтающаяся в теле скрипта, то у неё как бы нет scope'a.
дефолтные функции объявляются как "твойскрипт.prototype.функция = ...", вызывать их придётся как "this.функция()" (если из того же объекта), и там будет this.entity и прочее содержимое скрипта.

> богомерзким this
самого бесит

Plastic
Постоялец

#364
18:10, 18 июня 2018

8Observer8
> раздирает любопытство, что вами планируется сделать на PlayCanvas и что уже
> сделано?
-Всё относительно просто (на Юнити год назад ещё сделал тестовое WebGL-приложение).... конструктор выставочных стендов(в полной версии нужно будет менять конфиг стенда, его цвета, покрытия, и т.д.). могу скинуть ссылку на него. но: грузится небыстро(даже на десктопе), на смартах практически не работает...
Вот, теперь пробую то же самое повторить на PCanvas. В ближайшие дни должен добить тестовую версию, и попробую выложить ссылку.
Уже сделано: та же модель стенда, которая использовалась мной ранее в Юньке, сейчас оптимайзю(по кол-ву полигонов для Вэба) модель зака, и буду вставлять её. Можно крутить, немного зумить. На смартах вроде тож работает.
Так-же прикручен кое-какой хтмл-ui, но из него сейчас работает только ввод текста, который, соответсно выводится на баннер. в дальнейшем допилю(с доступом к матам из кода вроде разобрался, уже меняются) переключение разных цветов/текстур.
Кстати, ещё буду рад, если кто подскажет - картинки из ресурсов в хтмл-уи не отрисовываются. Как правильно прописать пути к jpg для плэйканваса+хтмл/цсс/жс?

В принципе, с доступом из кода к модели, элементам и материалам чуть подразобрался, чуть позже могу для таких же джава-нубов выложить тут принцип, как и чего.. )

Mr F
> > доступ к модели из любого места
> this.app.root.findByName("имя объекта").компонент
> > олько из корня ui.js, когда засовываю в функцию - ругается на entity.
> если это просто функция где-то болтающаяся в теле скрипта, то у неё как бы нет
> scope'a.
> дефолтные функции объявляются как "твойскрипт.prototype.функция = ...",
> вызывать их придётся как "this.функция()" (если из того же объекта), и там
> будет this.entity и прочее содержимое скрипта.
>
> > богомерзким this
> самого бесит

-да, спасибо, в принципе несколько проб и ошибок вывели меня на подобное решение, только через "pc.app."
// находим 1й материал в модели stand_1_07 (пол) и заменяем его на другой материал из ассетов.
pc.app.root.findByName('stand_1_07').model.meshInstances[0].material = pc.app.assets.find('platform','material').resources[0];

и такое ещё (для элемента к которому прилинкован скрипт ui.js):
var ui2 = pc.createScript('ui2');
var self;
....
ui2.prototype.bindEvents = function() {
// обработчик изменения текста
function onchange(e){
...
val = e.target.value;
self.entity.element.text = val;
}
self = this;
}

То-есть, при вызове из скрипта завязанного на UI, приходится сначала запомнить this в self (в корне скрипта), а потом(из функций) уже обращаться к модели(к которой прилинкован скрипт) через этот self. , к остальным - напрямую через pc.app. Ну это как я понимаю(на самом деле нет) концепцию богомерзкого this. )) Мне кажется, что оно как-то... костыльно и через одно место. буду рад, если меня поправят..
з.ы.: скрипт ui.js сейчас прикручен непосредственно к элементу надписи, которая и меняется.

Mr F
Постоялец

#365
21:04, 18 июня 2018

Plastic
> картинки из ресурсов в хтмл-уи не отрисовываются
как ты их отрисовываешь?
если картинки - часть проекта, то урл к ним можно получить через

app.assets.find("ассет", "texture");.getFileUrl()

>только через "pc.app."
pc.app это глобальная переменная для удобства - там всегда первый апп на странице. Если на странице вставлено несколько плейканвасных штуковин, то у них будет путаться этот pc.app.
this.app всегда даёт контекст конкретно твоего приложения.

> через этот self.
всё верно сделал. так и живём в богомерзком js.

Plastic
Постоялец

#366
17:07, 20 июня 2018

Mr F
> как ты их отрисовываешь?
> если картинки - часть проекта, то урл к ним можно получить через
> app.assets.find("ассет", "texture");.getFileUrl()

-да в том-то и дело, что пока они у мну только в хтмл+цсс прописаны, со стороны джавы вроде как нет ничего явного. вопрос - что надо добавить, чтобы оно подхватилось?
Все jpg для интерфейса находятся в assets\ui_images, а также в корне.
Далее фрагменты кода, имеющие отношение к загрузке пикч (в хтмл пути разные, ибо пробовал.. думал мож в этом причина...):

HTML:

<div class="container">
            <h4>Carpet Color</h4>
                <input id="cclr1" name="color_1" type="image" src="./cclr1.jpg" alt="carpet color 1">
                <input id="cclr2" name="color_2" type="image" src="cclr2.jpg" alt="carpet color 2">
                <input id="cclr3" name="color_3" type="image" src="cclr3.jpg" alt="carpet color 3">
            <h4>Wall Color</h4>
                <input id="wclr1" name="wcolor_1" type="image" src="../cclr1.jpg" alt="wall color 1">
                <input id="wclr2" name="wcolor_2" type="image" src="../cclr2.jpg" alt="wall color 2">
                <input id="wclr3" name="wcolor_3" type="image" src="../cclr3.jpg" alt="wall color 3">

CSS:

a:hover {
}
.container {
    position: absolute;
    top: 16px;
    left: 16px;
    
    background-color: #222;
    color: #fff;
    font-weight: 100;
    padding: 8px;
    
    box-shadow: 0 0 16px rgba(0, 0, 0, .3);
}

.container > .button {
    float: left;
    display: inline-block;
    background-color: #07f;
    padding: 0 16px;
    font-size: 18px;
    line-height: 32px;
    border-radius: 4px;
    cursor: pointer;
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JS:

var ui2 = pc.createScript('ui2');

ui2.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
ui2.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});
var val = "CompanyName";
var self;
ui2.prototype.initialize = function () {
    // create STYLE element
    var style = document.createElement('style');

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);
    
    this.counter = 0;
    
    this.bindEvents();
};

ui2.prototype.bindEvents = function() {
var keyBox = document.text.key;

// обработчик изменения текста
function onchange(e){
    var len, nsz;
    // получаем элемент printBlock
    var printBlock = document.getElementById("printBlock");
    // получаем новое значение
    val = e.target.value;
    // установка значения
    printBlock.textContent = val;
    
    alert('ui.change');

    self.entity.element.fontSize = nsz;
    self.entity.element.text = val;

    pc.app.root.findByName('stand_1_07').model.meshInstances[0].material =  pc.app.assets.find('platform','material').resources[0];
    pc.app.root.findByName('stand_1_07').model.meshInstances[0].material.update();
    
    pc.app.root.findByName('stand_1_07').model.meshInstances[17].material =  pc.app.assets.find('m_color1','material').resources[0];
    pc.app.root.findByName('stand_1_07').model.meshInstances[16].material =  pc.app.assets.find('m_color1','material').resources[0];
    pc.app.root.findByName('stand_1_07').model.meshInstances[17].material.update();
    pc.app.root.findByName('stand_1_07').model.meshInstances[16].material.update();
    ...

Ессно, желательно ещё, чтобы в зависимости от клика по нужной картинке в UI значение материала(номер или что-то такое) передавалось для использования в JS в
pc.app.root.findByName('stand_1_07').model.meshInstances[17].material = pc.app.assets.find('m_color1','material').resources[0];
и т.д...
ну скажем,
pc.app.root.findByName('stand_1_07').model.meshInstances[17].material = pc.app.assets.find('m_color'+n_mat,'material').resources[0];
(в переменной n_mat номер мата в зависимости от полученного фидбэка от интерфейса. ну это вроде понятно +-)

Plastic
Постоялец

#367
17:40, 20 июня 2018

Хотя, сейчас, для ускорения, попробую по аналогии с уроком
https://developer.playcanvas.com/ru/tutorials/htmlcss-ui/
сделать просто разноцветные кнопки-квадраты (цвета стен и цвета ковролина), и для каждой кнопки прописать отдельно блок по изменению материала. понимаю, что неоптимально, но пока так..
но потом необходимость отображения картинок из ассетов в хтмл-интерфейсе всё-равно может появиться..

UPD:
возник ещё микронюансик... ситуация следующая: у меня есть 2 элемента Text1 и Text2 (в иерархии сцены: Model(модель стенда) -> Element-Text(текст))... к Text1 привязан скрипт-ассет ui2+css+html.
как получить из него доступ к элементу Text2, который в иерархии находится там же, для внесения изменения в текст элемента (название считывается в поле ввода html, и должно дублироваться одинаково в оба текстовых элемента модели)?

Plastic
Постоялец

#368
18:45, 21 июня 2018

...
Под спойлером - ссылка на то что вырисовывается на сейчас:

+ Показать

Если кто знает - подскажите, пожалуйста, как:

1) Добавить именно изменение материалов, ибо те примеры которые находил в справке и примерах, увы, не сработали... пришлось колхозить через

pc.app.root.findByName('stand_wo_004').model.model.meshInstances[25].material =  pc.app.assets.find('m_pan_banners03','material').resources[0];

и так для каждого инстанса и модели, тоесть к примеру, чтобы сменить мат на всех панелях (Wall Color), приходится обработать дофига инстансов.
В Юньке я просто менял сам материал, наложенный на эти объекты на нужный из выбранных(тоже были сразу в ресурсах, но не надо было назначать на каждый элемент отдельно).
т.е., хотелось бы понять, как сделать подобным образом:

var mat_old = pc.app.assets.find('m_floor01','material').resources[0]; 
var mat_new = pc.app.assets.find('m_floor02','material').resources[0];
mat_old = mat_new; // <-- это, понятно, не работает
mat_old.update();

2) Размер окна: требуется сделать вывод модели в разрешении 1280х1024 (имеется, надеюсь, ввиду макс. размер в ситуации с браузером на фуллХД)... в связи с чем напрашивается вопрос.
Понятно, что есть интеграция в iframe, но тогда оно всегда будет в таком разрешении(при уменьшении браузера будет включаться скроллинг). пример под спойлером выше, с iframe width="1280" height="900"

либо если указывать в % от ширины(высота в процентах, как я понял, не работает), то оно всё равно, при уменьшении налазит на html ui, ну и вопрос с высотой в % понятно, напрягает.
iframe width="50%" height="50%":

+ Показать

либо есть вариант в настройках камеры PCanvas указывать смещение относительно экрана, но не факт что это подойдет, да и вращающийся стенд тогда смещается вбок (похоже глюк со скриптом orbitCamera), ну и главное - полоса сдвига - черная (основной фон камеры выбран белый.

Как я понимаю, может потребоваться интеграция в готовую вэб-страничку, посему интересно - можно ли сделать вывод окна pcanvas в ограниченную область страницы, но чтобы она уменьшалась в процессе уменьшения страницы, +на моб. девайсах?
Ну и желательно, чтобы интерфейс при этом не налазил на модель...

3) Plastic
> ситуация следующая: у меня есть 2 элемента Text1 и Text2 (в иерархии сцены:
> Model(модель стенда) -> Element-Text(текст))... к Text1 привязан скрипт-ассет
> ui2+css+html.
> как получить из него доступ к элементу Text2, который в иерархии находится там
> же, для внесения изменения в текст элемента (название считывается в поле ввода
> html, и должно дублироваться одинаково в оба текстовых элемента модели. вторая надпись будет на стойке)?

4) По поводу использования в хтмл-UI картинок из ассетов PCanvas. Куски кода приводил выше:
https://gamedev.ru/projects/forum/?id=189797&page=25#m366