With the help of some technologies and tools you can create a 3D web model by coordinate points, for example a table. What then you could point the mouse to any place and get the coordinates (x, y, z) of this point. Well, then I need to bring these coordinates to a table to describe this point (for example, at this point a chewing gum is stuck to the table).

  • This is all done through javascript and <canvas> . The only way. - VostokSisters
  • Thank you. I will dig this way. - masakras
  • 2
    There is a technology like webGL. - Naumov

1 answer 1

Solution on Blend4Web .

Table can be modeled in the editor Blender. It should indicate:

  • On the Physics tab, you must enable the "Enable Physics" option with the selected camera
  • in the Material tab, the Special: Collision panel must be activated when the table is highlighted.

In the initialization script, put an event handler on click:

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

Handler Code:

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

It is also necessary to connect the modules:

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

Similar functionality can be found in B4W snippets.