javascript - 浏览器中的对象旋转不平滑

Question

我正在浏览器中可视化对象。对象应该被视为一次绕一个轴(X 或 Y 或 Z)旋转，或者用户可以使用鼠标旋转它。 我遇到的问题:

1-当我绕一个轴自动旋转对象时，它开始以一种可行的方式旋转(即使它不像 OpenGL 中那样平滑)，一分钟后，旋转开始变得非常离散，即 Angular 似乎增加 180 度)

2-当我用鼠标旋转对象时，它一点也不平滑(我不知道鼠标事件是多久被触发的)。

3- 如何用鼠标绕两个轴旋转对象？ Y 和 X。

4-如何将 View 窗口放入一个小div中？我尝试过，但它变得很大并且超出了界限，

这是我的代码:

<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>

非常感谢

Answer 1

要使窗口更小，您可以使用元素样式并将高度和宽度值设置为您希望其显示的内容:

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

对于鼠标控制和旋转，您应该查看 Threejs.org 上的示例(尤其是“canvas”下):

• Mouse Control
• More Mouse Control