How to achieve the effect of mouse selection

[CYY-1100]

How to achieve the effect of mouse selection

[andreasplesch]

There are many ways to highlight a shape when hovering or clicking with the mouse pointer.

This tutorial turns the nose red when clicked: https://doc.x3dom.org/tutorials/models/inline/index.html

Here is another example which temporarily turns shapes yellow before returning to the original color:

https://andreasplesch.github.io/Library/Examples/html5/highlight/turnyellow.html

A more X3D way to indicate selection would be to use a Switch node which has the shape to display during selection as a choice. Or use the visible field of a Shape to toggle display based on a TouchSensor.

[andreasplesch]

Here is another approach. Dynamically attach an invisible highlight box to each shape of a certain class, scaled using the bounding box, and then simply turn that box on and off when desired.

https://andreasplesch.github.io/Library/Examples/html5/highlight/withBBox.html

[microaaron]

Maybe you're trying to highlight the outline of a shape.

[andreasplesch]

Outlines could be done using a custom shader:

https://alexanderameye.github.io/notes/rendering-outlines/

and many other shader examples.

Custom shaders:

https://doc.x3dom.org/tutorials/lighting/customShader/index.html

[andreasplesch]

Or by duplicating the shape, scaling it a bit larger, and showing only the backfaces: https://andreasplesch.github.io/Library/Examples/html5/highlight/outline.html

[CYY-1100]

Or by duplicating the shape, scaling it a bit larger, and showing only the backfaces: https://andreasplesch.github.io/Library/Examples/html5/highlight/outline.html

ok, I got it thanks for you help

[CYY-1100]

Maybe you're trying to highlight the outline of a shape.

yes, i do it

[andreasplesch]

There is now also the bboxDisplay field.

[n-polys]

Cool!

On Sat, Apr 8, 2023, 4:24 PM Andreas Plesch @.***> wrote:

Closed #1263 https://github.com/x3dom/x3dom/issues/1263 as completed.

— Reply to this email directly, view it on GitHub https://github.com/x3dom/x3dom/issues/1263#event-8958120456, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYQT72P4J3FQ5LWR3W7ZQILXAHCOTANCNFSM6AAAAAAV3Q43EY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[npolys]

IS there an example of the new functionality with nodes like Shape, Transform, and Group? I think bboxDisplay would be a great feature! ... ?

Does X3DOM automatically create a bbox of the correct size? How to do this at runtime?

[andreasplesch]

https://github.com/x3dom/x3dom/blob/master/test%2Fregression-suite%2Ftest%2Fcases%2Froutes%2Froutes.html

is an example.

All grouping nodes work, and the size is automatic.

[andreasplesch]

Here are the details:

https://github.com/x3dom/x3dom/blob/master/src%2Fnodes%2FGrouping%2FX3DBoundedObject.js

So all bounded objects work, and there is also bboxColor and bboxMargin.

[andreasplesch]

live https://raw.githack.com/x3dom/x3dom/master/test/regression-suite/test/cases/routes/routes.html

[andreasplesch]

Note the TouchSensor and simple route from the TouchSensor event to bboxDisplay.

[npolys]

Fantastic! Thanks for this feature! :-)

Get Outlook for Androidhttps://aka.ms/AAb9ysg

---

From: Andreas Plesch @.> Sent: Wednesday, May 22, 2024 8:01:35 AM To: x3dom/x3dom @.> Cc: Polys, Nicholas @.>; Comment @.> Subject: Re: [x3dom/x3dom] How to achieve the effect of mouse selection (Issue #1263)

Note the TouchSensor and simple route from the TouchSensor event to bboxDisplay.

— Reply to this email directly, view it on GitHubhttps://github.com/x3dom/x3dom/issues/1263#issuecomment-2124620685, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AB2TSMZFB3KY2ADFW2TSYDTZDSCJ7AVCNFSM6AAAAAAV3Q43E2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRUGYZDANRYGU. You are receiving this because you commented.Message ID: @.***>