I am currently working on managing a 3D object that visually represents the target controls for easier understanding of rotation and zooming...
If you want to see an example, check out this sample I created with an AxisHelper indicating the target with consistent sizing. I have added comments in OrbitControls.js to explain each line.
While using the pan and zoom (right click and scroll) features, you may notice that the 'helper' has two issues:
The helper's position and scale are set after rendering, giving it an elastic appearance. Even if I move the position/scale updates into the scope.update() function, the issue persists.
The following function scales the helper to a constant size by calculating a World/View scale at a specified point (the control's target) from a unit vector. However, as you zoom in, the helper continues to grow which indicates this might not be the best solution:
var point = new THREE.Vector3(1, 0, 0); point = point.applyMatrix4(scope.object.matrixWorld); var scale = point.distanceTo(scope.target); helper.scale.set(scale, scale, scale);
If you have any ideas on how to address these challenges, please feel free to share your insights...