如何使用鼠标旋转3D对象而不用three.js在屏幕外旋转它？

Question

I am making an application very similar to what's on this shutterfly customization page , except more concise. I really like the preview, but I need guidance on how to rotate the object the way they do in their preview. Currently, I'm using THREE.OrbitControls() , but my object rolls out of view and the camera isn't focused on the actual object. I tried focusing on the object, but I get an error.

Edited to add: My object is a .ply file so I'm using PLYLoader.

I found this other perfect example of what I want to do that uses mouse events: https://jsfiddle.net/n6u6asza/1735/

It's clever, but I want to use three.js libraries instead of these mouse events because my object keeps disappearing when I remove the controls and if I can keep my code shorter, that'd be ideal. I've spent several hours reading about OrbitControls(), but nothing I've tried has kept the object focused so it seems I'm only rotating the object.

The control code:

controls = new THREE.OrbitControls( camera, renderer.domElement);
 controls.minPolarAngle = toRadians(0); //was trying to limit the object 
 controls.maxPolarAngle = toRadians(45); //movement with these
controls.enablePan = false;
controls.enableZoom = false;
//controls.enabled = false; 
controls.update();

I also have a basic animate function. I want to later implement auto rotate as a button option.

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
}

Just to recap, my question is: How do I keep focus on an object when rotating the camera? OR How do I rotate the object without moving the camera?

Edited to add my object code:

var loader = new THREE.PLYLoader();
loader.load( 'sleeve.ply', function ( geometry ) {
     geometry.computeVertexNormals();
     var material = new THREE.MeshStandardMaterial( { color: 0xffffff } );
     sleeve = new THREE.Mesh( geometry, material );
     scene.add( sleeve );
});

Answer 1

To keep focus on an object you should use https://threejs.org/docs/#api/en/core/Object3D.lookAt

object.lookAt(x,y,z) or object.lookAt(vector);

For controls you should change the target https://threejs.org/docs/#examples/controls/OrbitControls.target

controls.target = object;

Or you can modify transform controls, if you want to rotate object and not rotate camera around object.

https://threejs.org/examples/?q=control#misc_controls_transform