Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
enrutador opened this issue Jun 6, 2020 · 7 comments
Open

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

enrutador opened this issue Jun 6, 2020 · 7 comments
Assignees
@wassfila
Labels
documentation Improvements or additions to documentation question Further information is requested

Comments

@enrutador
Copy link

Hi Wassfila

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

http://jsfiddle.net/mmalex/ycnh0wze/

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
Copy link
Member

wassfila commented Jun 7, 2020

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

the standard 'mousemove' event registration is here :

smart_home_3d_webapp/src/three_mouse.js

Line 48 in f34d24d

container.addEventListener( 'mousemove', onMouseMove, false );

which simply calls :

smart_home_3d_webapp/src/three_mouse.js

Line 167 in f34d24d

process_mouse_event("mesh_mouse_move",event);

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

smart_home_3d_webapp/src/three_mouse.js

Line 82 in f34d24d

const obj = get_mesh_intersect(event.clientX,event.clientY);

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

smart_home_3d_webapp/src/three_mouse.js

Line 72 in f34d24d

var intersects = raycaster.intersectObjects( mesh_list, true );

as you see that function requires a mesh_list which is updated on startup when receiving the three_list event with the type mouseEvent :

smart_home_3d_webapp/src/three_mouse.js

Line 178 in f34d24d

function onThreeList(e){

that event is sent here :

smart_home_3d_webapp/src/three_app.js

Line 484 in f34d24d

send_custom_event("three_list",{type:"mouseEvent",list:mouse_events});

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 :

smart_home_3d_webapp/src/three_mouse.js

Line 84 in f34d24d

if ( obj != "") {

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 :

smart_home_3d_webapp/src/three_mouse.js

Line 95 in f34d24d

send_custom_event("mesh_mouse_enter",{ name: mouse.object, userData: obj.userData});

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
Copy link
Author

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
Copy link
Member

wassfila commented Jun 8, 2020

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.

@wassfila wassfila self-assigned this Jun 8, 2020
@wassfila wassfila added documentation Improvements or additions to documentation question Further information is requested labels Jun 8, 2020
@wassfila wassfila changed the title tooltip Object Names tooltip Object Names - mouse 3d mesh hover events path Jun 8, 2020
@wassfila wassfila pinned this issue Jun 8, 2020
@enrutador
Copy link
Author

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
Copy link
Member

wassfila commented Jun 8, 2020

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
Copy link
Member

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@wassfila wassfila

Labels
documentation Improvements or additions to documentation question Further information is requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@wassfila @enrutador