3

При помощи каких технологий и инструментария можно сотворить 3D веб модель по точкам координат, к примеру стола. Что бы потом можно было указать мышкой на любое место и получить координаты(x, y, z) этой точки. Ну и далее мне нужно вынести эти координаты в какую-либо таблицу для описания этой точки (к примеру, в этой точке к столу прилеплена жевачка).

3
  • Это всё делается через javascript и <canvas>. Только так.
    – wokalek
    Commented 29 янв. 2017 в 0:26
  • Благодарю. Буду копать в эту сторону.
    – masakras
    Commented 29 янв. 2017 в 12:08
  • 2
    есть такая технология как webGL.
    – Naumov
    Commented 30 янв. 2017 в 10:17

1 ответ 1

3

Решение на Blend4Web.

Стол можно замоделить в редакторе Blender. В нем надо указать:

  • на закладке Physics надо включить опцию "Enable Physics" при выделенной камере
  • во вкладке Material должна быть активирована панель Special: Collision при выделенном столе

В скрипте иницализации поставим обработчик события на клик:

function init_cb(canvas_elem, success) {
    ...
    canvas_elem.addEventListener("mousedown", main_canvas_click, false);
}

Код обработчика:

function main_canvas_click(e) {

   var activecamera=m_scenes.get_active_camera()
   var x = e.clientX;
   var y = e.clientY;
   var pline = m_math.create_pline();
   var from = new Float32Array(3);
   var to = new Float32Array(3);


   var ray_test_cb = function(id, hit_fract, obj_hit, hit_time, hit_pos, hit_norm) {
       console.log(hit_pos)
       //hit_pos координаты точки, 
       //hit_norm - нормаль поверхности
   }
   //вычисляем луч, пущенный из камеры в координаты мышки
   m_cam.calc_ray(activecamera, x, y, pline);
   m_math.get_pline_directional_vec(pline, to);

   m_vec3.scale(to, 100, to);

   //вычисляем пересечение луча со столом,
   //результат посылается в обработчик ray_test_cb:
   var id = m_phy.append_ray_test_ext(activecamera, from, to, "ANY",
            ray_test_cb, true, false, true, true);

}

Необходимо так-же подключить модули:

var m_scenes  = require("scenes");   
var m_cam     = require("camera");
var m_cont    = require("container");
var m_vec3    = require("vec3");
var m_phy     = require("physics");
var m_math    = require("math");

Похожий функционал можно найти в сниппетах B4W

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.