tourntable (rotate object, not camera)

You have a couple of options. The most direct is the DragRotate puzzle – https://www.soft8soft.com/docs/manual/en/puzzles/Events.html#drag_rotate

This will allow the user to click on the 3D object and rotate that object.

Well…what you are requesting can be done…the question is it something that will really work for you.

You could use the HTML puzzles “get event property” and then use the touches.page and then write your logic around monitoring the x and y positions of your cursor and then rotating the object. However, it seems you are trying to create an HTML menu so would have to have a way of ignoring mouse up and down events when clicking the HTML buttons and other logic to support it.

The other problem you find is that rotating a 3D object can be less performant than moving the camera so depending on your scene, number of triangles, number of objects, redraws, textures sizes…etc. this may be more than some devices can handle but you will have to determine that.

Then there is the general user experience when navigating these sort of webgl demos, people are used to navigating and spinning a camera (they don’t think of it is a camera)….so doing other things (if not an FPS game or game function like) the users will feel a bit lost.

If your goal is to keep the lighting and the background consistent as the object is rotated, there are ways to solve that too.

I have seen another approach too…which is placing a transparent 3d plane in front of the object you want to rotate…making the plane the size of the view port and then assigning the drag rotate to that plane to rotate the object. There are issues with this approach to and I don’t recommend it either.

I do recommend finding a way to use the camera to your advantage.

So you are wanting the camera and environment HDR to not move and the object to move so the reflections move through the object you are rotating. What you may find more efficient is to create a reflection map and animate the UV map do it runs across the object.

I obviously do not know your scene or project but in most cases moving the camera does the exact same thing as described above. However if you have stationary camera and a stationary background and you want the object to rotate and have reflections update…. you can try
1. Use a reflection plane on your object – then drag move the object as needed.
2. Create a reflection texture. Map it to your object. Then using use Value nodes in your reflection shader and animate the UVs using the animparameter puzzle. This would be more performant. When you create the DragMove on your object..animate your UVs of the reflection map. Since this is a turn table every degree of object rotation is a negative degree of rotation for the UV Map.

After watching your demo it seems your highlights in your materials other than the glass are “mapped” or baked as textures rather than highlights from sources from either lights or the HDR background.

The problem is not the camera or the background its that the textures for the materials in your scene are not setup in a way they can react to the light in the scene.

Here is a simple demo. That uses the standard orbit camera and a simple torus and glass type insert. https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f2f27a4091/X3L_materialsetup/X3L_materialsetup.html

For the torus I have used to materials…one for the flatter / rough surface and a glossy ring that when you rotate the camera you can see the reflections interacting correclty like the glass.

You will must need to rebuild the red and black shaders so they work correctly.

Project Zip with blend file located here: https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f2f27a4091/X3L_materialsetup.zip

I would need the blend file at a minimum, full v3d project with blend file at most.
You can reach me directly at xeons3dlab[at]gmail[dot com]