3

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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