Can anyone assist me with slowing down the mouse-controlled rotation of a 3D object in javascript? The current rotation is too sensitive and difficult to control manually. Below is the code I am using:
<html>
<head>
<script src="js/three.js"></script>
<script src="js/ColladaLoader.js"></script>
<script src="js/OrbitControls.js"></script></head>
<body>
<script>
// Setting up the global variables for scene, camera, and renderer.
var scene, camera, renderer, mesh;
init();
animate();
// Scene initialization function.
function init() {
// Creating the scene and defining its size.
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x999999 ) );
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Creating a renderer and appending it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Creating a camera, positioning it away from the model, and adding it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT,1,1000);
camera.position.z = 100;
scene.add(camera);
// Adding an event listener that resizes the renderer based on the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Setting the background color of the scene.
renderer.setClearColor(0x333F47, 1);
// Creating a light, setting its position, and adding it to the scene.
var pointLight = new THREE.PointLight(0xffffff, 0.6);
pointLight.position.set(80,90,150);
scene.add(pointLight);
// Loading the mesh and including it in the scene.
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( "models/water.dae", function(result){
result.scene.scale.x = .01;
result.scene.scale.y = .01;
result.scene.scale.z = .01;
result.scene.position.z = 20;
result.scene.updateMatrix();
result.scene.matrixAutoUpdate = false;
scene.add(result.scene);
});
// Adding OrbitControls for navigating with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;
controls.target.z = 20;
}
// Function to render the scene and update as needed.
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>
Any comments or suggestions are greatly appreciated.