tooltip Object Names - mouse 3d mesh hover events path

enrutador commented 4 years ago

Hi Wassfila

I'm doing tests without much success to apply the following code in the graphical interface:

It would be very interesting to be able to show the names of the elements and show telemetry information associated with them.

Any advice ? Thank you

wassfila commented 4 years ago

Hi @enrutador , to make objects interactive with the mouse,

the standard 'mousemove' event registration is here : https://github.com/HomeSmartMesh/smart_home_3d_webapp/blob/f34d24d913edbdc6914e4086f63c82c973db5376/src/three_mouse.js#L48

which simply calls : https://github.com/HomeSmartMesh/smart_home_3d_webapp/blob/f34d24d913edbdc6914e4086f63c82c973db5376/src/three_mouse.js#L167

The function that does all the magic to transform an X,Y coordinate to a Three object is here :

https://github.com/HomeSmartMesh/smart_home_3d_webapp/blob/f34d24d913edbdc6914e4086f63c82c973db5376/src/three_mouse.js#L82

inside that function, the Three class that performs that computation is a raycaster, which is set from the vect2 and the camera object

https://github.com/HomeSmartMesh/smart_home_3d_webapp/blob/f34d24d913edbdc6914e4086f63c82c973db5376/src/three_mouse.js#L72

as you see that function requires a mesh_list which is updated on startup when receiving the three_list event with the type mouseEvent : https://github.com/HomeSmartMesh/smart_home_3d_webapp/blob/f34d24d913edbdc6914e4086f63c82c973db5376/src/three_mouse.js#L178

that event is sent here : https://github.com/HomeSmartMesh/smart_home_3d_webapp/blob/f34d24d913edbdc6914e4086f63c82c973db5376/src/three_app.js#L484

and that's where the connection with Blender happens by checking the userData.mouseEvent of object types Mesh and filling the mouse_events list.

finally, if the raycaster tests hits a known object from the list the obj will be different from empty string and you could do what you want with it from here : https://github.com/HomeSmartMesh/smart_home_3d_webapp/blob/f34d24d913edbdc6914e4086f63c82c973db5376/src/three_mouse.js#L84

to make things simpler so that you don't have to modify the module, and event is sent that you could listen to which is mesh_mouse_enter and so on :

https://github.com/HomeSmartMesh/smart_home_3d_webapp/blob/f34d24d913edbdc6914e4086f63c82c973db5376/src/three_mouse.js#L95

I hope this helps you, set an abstracted way how you can deal with 3d mesh mouse events without modifying any javascript code for every new object, rather modify its Blender user data.

As a hint, at the top of each file, I noted the sent events and used events that should help you get an overview about the event interaction between modules, I admit this event based approach offers an isolated API but require tracking the events flow.

enrutador commented 4 years ago

Hi wassfila A lot of thanks for clarificaction. I put all console debug to see all message and events generates. The more I read the code the more I understand their great work. Thank you

wassfila commented 4 years ago

Glad this helps you, You definitely need to follow the console log and add more log along the path you want to debug. Let me know if you have any issue.

enrutador commented 4 years ago

Hi Wassfila I created this funcion in: home_apps.js

function showTooltip(e) {
    console.log(`home_app> inside showTooltip`);
    var divElement = document.getElementById('tooltip');
        console.log(`Event recived: ${e.detail.name}`);
       divElement.textContent= (`${e.detail.name} ` ); 
}

I modify index html and it inside a div:

<body>
  <div id='viewer' style="width:80%; height:80%;"></div>
  <script src="src/main.js?v=51982e92a60c" type="module"></script>

    <div id="tooltip"><span>123</span></div>
</body>

With this i can see the event name property of the mesh:

2020-06-08 15_33_45-Window

it's not very exciting ;-) , but run. When i create a new "render" to put message i lost all the interface. I need learn more about three.js

wassfila commented 4 years ago

Great, at least the mouse mesh identification part that I provided in my example is running :) When it comes to tooltip usage, I think you probably already know this example https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Mouse-Tooltip.html and this fiddle you showed me as reference : http://jsfiddle.net/mmalex/ycnh0wze/

I'm not sure how the tooltip work if it's a three js item or normal web element, so if that part still does not work, I suggest you check if there are similar issues on three.js forum https://discourse.threejs.org/ And if you do not find and answer or help there and the three doc is still unclear then you could provide me a live example reproducing the issue either fiddle or github.

wassfila commented 4 years ago

Hi @enrutador , how's your progress on this ? If you're not working on this at the moment that's ok but in case you get stuck let me know. As another hint, here's a post in the Three.js forum much related to what you want to do and discussion about different techniques, hope this helps : https://discourse.threejs.org/t/show-dom-content-at-screen-position-of-three-js-object/15379

enrutador commented 4 years ago

Hi wassfila I still working , I'm going just in time, i see all the examples that you post. All the links are very cool I did not know them and they are very good examples. Thanks for your help

HomeSmartMesh / smart_home_3d_webapp

tooltip Object Names - mouse 3d mesh hover events path #9