Форум

Как повесть якорь без блендера ?

10 мая 2017 18:53
есть хорошая статья Тут
но там через блендер.
а есть возможность создать какой либо якорь без блендера ?
вот например при регистрации нового модуля
b4w.register(idName, function(exports, require) { 
	var m_app       = require("app");
	var m_data      = require("data");
	var m_preloader = require("preloader");
	  
		exports.init = function() { 
			m_app.init({ 
			canvas_container_id: idName, 
			callback: init_cb, 
			autoresize: true 
			}); 
		} 

мы указываем ИД конваса в который мы будем прогружать 3д сцену.
( я гружу из json).
а можем мы как то указать ( уже имеющийся на странице элемент например
<div id="iacor1">ky ky </div>
)
чтобы он якорем после погрузки сцены появился в нужном месте ?

просто в блендере мы строго указываем ИД элемента для якоря. но у меня много сцен много элементов, и по ИД не как не подходит. мне нужно чтобы например так:
b4w.register(idName, function(exports, require) { 
	var m_app       = require("app");
	var m_data      = require("data");
	var m_preloader = require("preloader");
	  
		exports.init = function() { 
			m_app.init({ 
			canvas_container_id: idName, 
                        iacor_container_id:iacor1, // что то в этом роде 
			callback: init_cb, 
			autoresize: true 
			}); 
		} 


В момент регистрации модуля, внутри него указать какой ИД якоря. на какой Элемент сцены повесить. ( да в блендере я вполне могу создать какойнебудь кастом элемент "но он все ровно требует указать ИД зарание" - а они у меня разные и динамические. )

То есть у меня сцена. Где висят 3 - 4 кастом элемента ( места где должны появится разные блоки) И в зависимости от того, что выбрал пользователь. в этих 3-4 местах после прогрузки сцены появятся какие-то блоки, какие я зарание знать не могу и темболее знать их ИД. так как это будут формироваться динамически. но я могу узнать ИД этих элементов до вызова b4w.register . и не надо как то объяснить какие ИД якорей повесить на 3Д элементы внутри сцены.
помогите куда копать ? что смотреть ? какими средствами такое можно реализовать ?

еще чуть проще сформулировал. Когда я из блендера экспортирую в json я не знаю какой ИД будет в кастомном элементе, но когда я делаю .init уже где-то в коде, уже известно какой ИД туда поместить.
12 мая 2017 10:26
Здравствуйте ещё раз)

Самый первый и главный совет, не называйте переменные по русски… iacor - eto adiwe)

Универсальное решение:


Немного хаотично вы спросили, старайтесь разделять вопрос на логические части) Так и ответить проще будет)
То что вы говорите:

мы указываем ИД конваса в который мы будем прогружать 3д сцену.

неверно. Мы указываем Id контейнера, где будет автоматически создан канвас. Поле объекта так и названо canvas_container_id.

В данном случае, вам достаточно вместо idName просто указать "iacor1" (о боги, переименуйте его).

Хотя вроде как вопрос про отображение кастомных кусков контента рядом с объектами в сцене… Тогда читайте тут, остальное непонятно)
12 мая 2017 11:23
Ответ на сообщение пользователя Дмитрий Пелевин
Здравствуйте ещё раз)

Самый первый и главный совет, не называйте переменные по русски… iacor - eto adiwe)

Универсальное решение:


Немного хаотично вы спросили, старайтесь разделять вопрос на логические части) Так и ответить проще будет)
То что вы говорите:



неверно. Мы указываем Id контейнера, где будет автоматически создан канвас. Поле объекта так и названо canvas_container_id.

В данном случае, вам достаточно вместо idName просто указать "iacor1" (о боги, переименуйте его).

Хотя вроде как вопрос про отображение кастомных кусков контента рядом с объектами в сцене… Тогда читайте тут, остальное непонятно)

Да мозг кипел простите ) знаю что сформулировано криво :)
а про переменную это я тут так написал, а вообще она у меня пока не как, не называется :) ( временно test_1)

И так смотри у меня есть сцена, Созданная мною в блендере. и из неё экспортированный json который я буду подгружать уже в коде.

В коде мы подгружаем не 1 а штук 5 - 6 разных "канвасов" внутрь которых грузится 3Д контент из ранее экспортированной сцены json.

так вот в каждой из 5-6 сцен ID якорей разные а объект json 1 ( который я просто несколько раз гружу ) В блендере я могу задать 1 ID кастомному элементу . а что мне делать если в то место при каждой загрузки этого объекта мне нужно вешать разные ID ( и почему по классам нельзя было сделать ) не перепарсить же мне каждый раз json
ради изменения 1 - 2х ID ?

ПС: спасибо вам за помощь мне уже не в 1й раз :)
13 мая 2017 15:12
Примерно понял. Но я думаю что вы придёте в тупик с таким подходом. Либо вы полностью изолируете сцены друг от друга (каждая работает со своим JSON и имеет свой Namespace), при этом они общаются между собой через специальный интерфейс, либо даже не знаю чем помочь.

Меня мучают смутные сомнения, что мы говорим про разные анкоры до сих пор….. Вы посмотрели мои ссылки, это то что вам нужно? Или вы просто имеете ввиду ID контейнеров, где будут канвасы с вашими сценами?)
15 мая 2017 11:55
Ответ на сообщение пользователя Дмитрий Пелевин
Примерно понял. Но я думаю что вы придёте в тупик с таким подходом. Либо вы полностью изолируете сцены друг от друга (каждая работает со своим JSON и имеет свой Namespace), при этом они общаются между собой через специальный интерфейс, либо даже не знаю чем помочь.

Меня мучают смутные сомнения, что мы говорим про разные анкоры до сих пор….. Вы посмотрели мои ссылки, это то что вам нужно? Или вы просто имеете ввиду ID контейнеров, где будут канвасы с вашими сценами?)

Ссылки я посмотрел. и да думаю придется менять подход…

Все я решил этот вопрос. :)

и у меня другой появился. а можно ли средствами кода, к какому либо объекту на сцене привязать якорь ? ну чтобы рядом например с объектом "box_1" висел некий
<div id="box">Hi i box</div>
и естественно перемешался если мы смещаем камеру, стараясь позиционно оставаться рядом с "bo_1", программно это сделать есть способ ?
15 мая 2017 15:57
если блолку "3dtest" поставить top и left по "0" то все нормально работает, но если ему задать инные значения, то система сдвигается, как мне этого избежать ? мне нужно чтобы top и left были, так как они меняются ( мы как бы может двигать 3д элемент). не могу понять почему происходит такой сдвиг и как сделать чтобы все нормально было ….
Понять поможет этот раздел документации: Нестандартное расположение и ориентация элемента Canvas. Если у вас код как в том уроке, то можно просто заменить строчки:
var x = m_mouse.get_coords_x(e);
var y = m_mouse.get_coords_y(e);
на
var x = m_mouse.get_coords_x(e, false, true);
var y = m_mouse.get_coords_y(e, false, true);
15 мая 2017 16:23
Ответ на сообщение пользователя Иван Любовников
Понять поможет этот раздел документации: Нестандартное расположение и ориентация элемента Canvas. Если у вас код как в том уроке, то можно просто заменить строчки:
var x = m_mouse.get_coords_x(e);
var y = m_mouse.get_coords_y(e);
на
var x = m_mouse.get_coords_x(e, false, true);
var y = m_mouse.get_coords_y(e, false, true);


спасибо ) я это уже решил :) а может знаете как:

А можно ли средствами кода, к какому либо объекту на сцене привязать якорь ? ну чтобы рядом например с объектом "box_1" висел некий
<div id="box">Hi i box</div>

и естественно перемешался если мы смещаем камеру, стараясь позиционно оставаться рядом с "bo_1", программно это сделать есть способ ?
15 мая 2017 16:59
А можно ли средствами кода, к какому либо объекту на сцене привязать якорь ? ну чтобы рядом например с объектом "box_1" висел некий
<div id="box">Hi i box</div>

и естественно перемешался если мы смещаем камеру, стараясь позиционно оставаться рядом с "bo_1", программно это сделать есть способ ?
То есть вообще без блендеровских объектов? Можно и так, тогда все придется делать вручную. Тогда допустим, если для каждого якоря мы знаем, к какому объекту и с каким смещением он привязан, то в любой момент мы сможем посчитать 3d точку, в которой должен висеть якорь. Её можно перевести в 2-мерные координаты на канвасе методом project_point, которые записывать в top/left соответствующего элемента.

За код не ручаюсь, не проверял, но примерно такой должен быть:
var _vec2_tmp = new Float32Array(2);
var _vec3_tmp = new Float32Array(3);

function update_anchor_pos(anchor_id, obj_name, anchor_offset) {
    var obj = m_scenes.get_object_by_name(obj_name);
    var pos = m_trans.get_translation(obj, _vec3_tmp);
    m_vec3.add(pos, anchor_offset, pos);

    var cam = m_scenes.get_active_camera();
    var canvas_xy = m_cam.project_point(cam, pos, _vec2_tmp);

    var anchor_el = document.getElementById(anchor_id);
    anchor_el.style.left = canvas_xy[0] + "px";
    anchor_el.style.top = canvas_xy[1] + "px";
}

var anchor_offset = new Float32Array([2,2,2]);
update_anchor_pos("box", "box_1", anchor_offset);


Можно делать это для всех якорей каждый кадр через set_render_callback.
17 мая 2017 11:18
Ответ на сообщение пользователя Иван Любовников
То есть вообще без блендеровских объектов? Можно и так, тогда все придется делать вручную. Тогда допустим, если для каждого якоря мы знаем, к какому объекту и с каким смещением он привязан, то в любой момент мы сможем посчитать 3d точку, в которой должен висеть якорь. Её можно перевести в 2-мерные координаты на канвасе методом project_point, которые записывать в top/left соответствующего элемента.

За код не ручаюсь, не проверял, но примерно такой должен быть:
var _vec2_tmp = new Float32Array(2);
var _vec3_tmp = new Float32Array(3);

function update_anchor_pos(anchor_id, obj_name, anchor_offset) {
    var obj = m_scenes.get_object_by_name(obj_name);
    var pos = m_trans.get_translation(obj, _vec3_tmp);
    m_vec3.add(pos, anchor_offset, pos);

    var cam = m_scenes.get_active_camera();
    var canvas_xy = m_cam.project_point(cam, pos, _vec2_tmp);

    var anchor_el = document.getElementById(anchor_id);
    anchor_el.style.left = canvas_xy[0] + "px";
    anchor_el.style.top = canvas_xy[1] + "px";
}

var anchor_offset = new Float32Array([2,2,2]);
update_anchor_pos("box", "box_1", anchor_offset);


Можно делать это для всех якорей каждый кадр через set_render_callback.


Здравствуйте. что то я разбирался разбирался и запутался :(( а можно мне идиоту как это по подробнее разжевать если несложно плз. :(
и не могу понять как пользоваться set_render_callback. :(
17 мая 2017 14:43
Здравствуйте. что то я разбирался разбирался и запутался :(( а можно мне идиоту как это по подробнее разжевать если несложно плз. :(
Ну смотрите: допустим у нас известен id элемента-якоря, имя объекта, к которому он привязан, и точка, в которой якорь висит над объектом (задана в виде смещения относительно центра объекта). Подаем все это в функцию:

update_anchor_pos("box", "box_1", anchor_offset);
Она будет обновлять позицию якоря по позиции объекта во вьюпорте. В ней происходит вот что:

берем объект движка по его имени и получаем позицию его центра в 3-мерном пространстве сцены:
var obj = m_scenes.get_object_by_name(obj_name);
var pos = m_trans.get_translation(obj, _vec3_tmp);

добавляем смещение якоря, чтобы получить точку, в которой якорь должен "висеть" над объектом:
m_vec3.add(pos, anchor_offset, pos);

используем главную камеру сцены, чтобы спроецировать 3-мерную точку якоря в 2-мерную точку на канвасе, которая представляет собой значения в обычных CSS пикселях:
var cam = m_scenes.get_active_camera();
var canvas_xy = m_cam.project_point(cam, pos, _vec2_tmp);

выставляем их как смещения у элемента-якоря:
var anchor_el = document.getElementById(anchor_id);
anchor_el.style.left = canvas_xy[0] + "px";
anchor_el.style.top = canvas_xy[1] + "px";

Позиции якорей нужно обновлять каждый кадр, для этого можно зарегистрировать соответствующую функцию через set_render_callback, например, так:
var anchors_data = [
    { id: "box", obj_name: "box_1", offset: [2,3,4] },
    { id: "box2", obj_name: "box_2", offset: [1,1,1] },
    { id: "box3", obj_name: "box_3", offset: [0,5,3] },
];

m_main.set_render_callback(function() {
    for (var i = 0; i < anchors_data.length; i++)
        update_anchor_pos(anchors_data[i].id, anchors_data[i].obj_name, anchors_data[i].offset);
});
 
Пожалуйста, зарегистрируйтесь или войдите под своей учетной записью , чтобы оставлять сообщения.