Rotate camera on its own axis on mouse drag

Questions
#1

Hi. I’m going to create showroom alike showroom.littleworkshop.fr . But I don’t know how to create first person controller with cursor drag. I tried to use PointerLock controller but it has 2 main drawbacks:

  1. It disables cursor
  2. It only moves on mousemove event

Problem with OrbitControls is that it only moves camera around object. But I need to turn camera itself on its own axis that provides the user first person experience.

My purpose is to create controller so that user can move camera on mouse drag.
I have no idea how to do that. Can anybody help me to achieve this?

#2

If you setup OrbitControls like in the following example, you should achieve the intended outcome:

https://threejs.org/examples/webgl_panorama_cube

The idea is to produce a small gap between the camera and OrbitControls.target. In the example, the OrbitControls.target is at the origin but the camera has a position of (0, 0, 0.01).

#3

I used controls from example like you said.
But it doesn’t seems what I expected.
Camera only rotates around 3d model.
Can you help me to fix the issue?

Here’s my project repo


https://teo0303.github.io/3dshowroom/