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

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

Ответ на сообщение пользователя Дмитрий Пелевин
Здравствуйте ещё раз)

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

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


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



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

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

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

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

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

<div id="box">Hi i box</div>

если блолку "3dtest" поставить top и left по "0" то все нормально работает, но если ему задать инные значения, то система сдвигается, как мне этого избежать ? мне нужно чтобы top и left были, так как они меняются ( мы как бы может двигать 3д элемент). не могу понять почему происходит такой сдвиг и как сделать чтобы все нормально было ….

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);

Ответ на сообщение пользователя Иван Любовников
Понять поможет этот раздел документации: Нестандартное расположение и ориентация элемента 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);

<div id="box">Hi i box</div>

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

и естественно перемешался если мы смещаем камеру, стараясь позиционно оставаться рядом с "bo_1", программно это сделать есть способ ?

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);

Ответ на сообщение пользователя Иван Любовников
То есть вообще без блендеровских объектов? Можно и так, тогда все придется делать вручную. Тогда допустим, если для каждого якоря мы знаем, к какому объекту и с каким смещением он привязан, то в любой момент мы сможем посчитать 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.

Здравствуйте. что то я разбирался разбирался и запутался :(( а можно мне идиоту как это по подробнее разжевать если несложно плз. :(

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);
});