How to add contextmenu on right click?

Questions
,
1

Hi,

I am new to three.js and looking for an example how to add a contextmenu when user right clicks on a mesh

2

You can break down this issue into two separate tasks.

  • Selection of 3D objects
  • Display of a custom context menu

There are various official three.js examples that can help you to solve the first issue. The idea is to use raycasting in order to determine the correct selected 3D object. One of the most popular examples is:

https://threejs.org/examples/webgl_interactive_cubes

The second task depends on how you want to implement the context menu. If it should be a 3D object itself, you can consider to use an instance of THREE.Sprite or a custom mesh with a PlaneBufferGeometry. You can also implement the UI with plain HTML/CSS or with one of the CSS based renderers of three.js. CSS2DRenderer for example is often used for rendering labels with a spatial connection to 3D objects in a WebGL scene. The following examples demonstrate this:

https://threejs.org/examples/css2d_label

2 Likes
3

Thanks for the quick help.I am able to get to step 1. I am not sure how i can add either THREE.Sprite or PlaneBufferGeometry as context menu.

Here is the jsfiddle i created https://jsfiddle.net/bobby170/zLcpm0w3/14/.

Please help with some pointers. Thanks for help

4

Hi!
Take a look at this SO answer for some ideas (warning: Russian segment; but the code in the snippet is pretty self-explanatory).
Right-click the torus knot and you’ll get a menu with a button, clicking the button gives a random color to the object.

5

I put this in the Collection of examples from discourse.threejs.org real quick. And translated the menu. I hope it’s right. :slightly_smiling_face:

see ContextMenu - @prisoner849 author

3 Likes
6

Thanks everyone for very quick help

7

@hofk Perfectly correct :+1: :beers: :slightly_smiling_face:

8

I can’t download that example of contextmenu, could you pass me the code? It would help me a lot

9

Go to the page ContextMenu and with Ctrl and u the source code is displayed. With Ctrl and a you mark the whole code. Then Ctrl and c to copy and with Ctrl and v you paste it into your code editor. Now you can save the code.

If you also want to have the correct version of the scripts, click in the code on
…/js/three.min.112.js
or
…/js/OrbitControls.js

Then you can copy them just as well. :slightly_smiling_face:

1 Like
10

Thanks you really saved me :v: