How to rotate scene by dragging a cube view

Questions
, , ,
1

I added something very similar to this example to Angular three js component that is representing a 3D model of the contruction site: Very basic ViewCube

Very rough code structure (isolated the part that I am asking here):
https://codesandbox.io/p/sandbox/p7l8rm

How to implement rotation of the whole scene by dragging and rotating the cube? Is there a Three js native way to do this simply or creating cube using native HTML and CSS and then adding mousedown, mousemove, mouseup listeners to handle rotation of the cube?

Thanks in advance!

2

A way to reach it , maybe not best one.

cube view contain a camera and a cube, and Orbitcontrol.
main view as you wish.
add a event between cube view’s camera and main view’s camera.

3

I tried something of this nature. Having a smaller scene postitioned absolute to overlay the main scene, then somehow I tried to map the camera and orbit controls of the main scene and the cube view scene. Do you have an idea how would that mapping occur?

4

The absolute positioning is great.

I often use OrbitControls, a plugin that comes with Threejs

Orbitcontrols comes with an event emitter that emits events when it is updated
const _changeEvent = { type: ‘change’ };

Also, I remember Threejs has an example, I don’t know if it can help you/ examples/webgl_lines_fat.html