Not smooth object rotation in the browser

Question

I am visualizing objects in the browser. The object should be viewed rotating around one axis a time (X or Y or Z) or the user can rotate it with the mouse. The problems I am having:

1- When I autorotate the object around one axis, it starts to rotate in a feasable way (even it is not smooth as in OpenGL) and after a minute, the rotation starts to be very descrete, i.e. the angle seems to be increasing by 180 degrees)

2- When I rotate the object with the mouse, it is not smooth at all, (I don't know how aften the mouse event is being fired).

3- How can I rotate the object with the mouse around two axis? Y and X.

4- How to put the view window into a small div? I tried but it goes big and out the boundaries,

Here is my code:

<script>
    var t = 0;
    var container, interval,
            camera, scene, render,
            linesMaterial,
            isMouseDown = false, onMouseDownPosition,
            radius = 200, angle_y = 0, angle_x = 0;
    init();

    function init() {
        var t = 0;
        var scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        {#        renderer.setSize(document.getElementById('test').clientWidth,  document.getElementById('test').clientHeight);#}
        {#            document.getElementById('test').appendChild(renderer.domElement);#}


        // Object drawing


        onMouseDownPosition = new THREE.Vector2();

        document.addEventListener('mousemove', onDocumentMouseMove, false);
        document.addEventListener('mousedown', onDocumentMouseDown, false);
        document.addEventListener('mouseup', onDocumentMouseUp, false);
        document.addEventListener('mousewheel', onDocumentMouseWheel, false);


        render = function () {
            requestAnimationFrame(render);
            renderer.render(scene, camera);

            angle_y = angle_y + 0.1;

            camera.position.x = {{ neuron.center.x }} +radius * Math.cos(angle_y);
            camera.position.y = {{ neuron.center.y }};
            camera.position.z = {{ neuron.center.z }} +radius * Math.sin(angle_y);


            camera.position.x = {{ neuron.center.x }};
            camera.position.y = {{ neuron.center.y }} +radius * Math.cos(angle_x);
            camera.position.z = {{ neuron.center.z }} +radius * Math.sin(angle_x);
            camera.lookAt(new THREE.Vector3({{ neuron.center.x }}, {{ neuron.center.y }}, {{ neuron.center.z }}));

        };

        render();
    }

    function onDocumentMouseDown(event) {

        event.preventDefault();

        isMouseDown = true;
        onMouseDownPosition.x = event.clientX;
        onMouseDownPosition.y = event.clientY;
    }

    function onDocumentMouseMove(event) {

        event.preventDefault();

        if (isMouseDown) {
            var angle_step = 0.4;

            if (event.clientX < onMouseDownPosition.x) {
                angle_y += angle_step;
            }
            else if (event.clientX > onMouseDownPosition.x) {
                angle_y -= angle_step;
            }

            if (event.clientY < onMouseDownPosition.y) {
                angle_x += angle_step;
            }
            else if (event.clientY > onMouseDownPosition.y) {
                angle_x -= angle_step;
            }
        }
        render();

    }

    function onDocumentMouseUp(event) {

        event.preventDefault();

        isMouseDown = false;
        render();
    }

    function onDocumentMouseWheel(event) {

        var wheel_Step = 5;

        if (event.wheelDeltaY > 0) {

            radius -= wheel_Step;
        }
        else {
            radius += wheel_Step;
        }
    }


</script>

Thank you very much

Answer 1

To make the window smaller, you can use element styling and and set height and width values to what you want it to be displayed as:

renderer.domElement.styleWidth = '100px';
renderer.domElement.styleHeight = '100px';

For mouse control and rotation you should look at the examples on threejs.org (especially under 'canvas'):

• Mouse Control
• More Mouse Control