Question

在这里，我试图禁用轨迹球控件的旋转事件并调用自定义旋转事件。在OrbitControl中尝试进行操作时（controls.enableRotate = false;），但在进行轨迹球控制时，它将同时执行轨迹球控制和自定义事件旋转功能。这是小提琴 https://jsfiddle.net/azso936f/1/ 在小提琴中，旋转操作可在mousemove上进行，而当我们按下鼠标时，trackballcontrol的旋转功能也可进行

var scene, renderer, camera;
    var cube;
    var controls;
    var containerWidth = window.innerWidth,
        containerHeight = window.innerHeight;
    var isDragging = false;
    var previousMousePosition = {
        x: 0,
        y: 0
    };
    init();

    animate();

    function init() {
        configureRenderer();

        scene = new THREE.Scene();
        configureCube();
        configureCamera();
        configureLight();
        configureControls();
    }

    function configureRenderer() {
        renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true
        });
        renderer.setSize(containerWidth, containerHeight);
        document.body.appendChild(renderer.domElement);

        window.onresize = function () {
            renderer.setSize(window.innerWidth, window.innerHeight);
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            if (controls)
                controls.handleResize();
        }

        renderer.domElement.addEventListener("wheel", function (e) {
            const delta = event.deltaY;

            let x = 2 * event.clientX / window.innerWidth - 1;
            let y = 1 - 2 * event.clientY / window.innerHeight;
            let cursorpos = new THREE.Vector3(x, y, 1);

            cursorpos.unproject(camera);

            let dir = new THREE.Vector3().copy(cursorpos).sub(camera.position).normalize();
            let shift = new THREE.Vector3().copy(dir).multiplyScalar(delta * 0.1);

            camera.position.add(shift);
            controls.position0.add(shift);
            controls.target.add(shift);
        });

        renderer.domElement.addEventListener('mousemove', event => {

            isDragging = true;
        });

        renderer.domElement.addEventListener('mousemove', function (e) {
            isDragging = true;
            //console.log(e);
            var deltaMove = {
                x: e.offsetX - previousMousePosition.x,
                y: e.offsetY - previousMousePosition.y
            };

            if (isDragging) {

                var deltaRotationQuaternion = new THREE.Quaternion()
                    .setFromEuler(new THREE.Euler(
                        toRadians(deltaMove.y * 1),
                        toRadians(deltaMove.x * 1),
                        0,
                        'XYZ'
                    ));

                cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
            }

            previousMousePosition = {
                x: e.offsetX,
                y: e.offsetY
            };
        });

        function toRadians(angle) {
            return angle * (Math.PI / 180);
        }
        renderer.domElement.addEventListener('mouseup', event => {
            isDragging = false;
        })
    }


    function configureCube() {
        var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
        var cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0xff0000
        });
        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.set(50, 0, 0);

        scene.add(cube);
    }

    function configureCamera() {
        camera = new THREE.PerspectiveCamera(45, containerWidth / containerHeight, 1, 1000);
        camera.position.set(0, 160, 400);
        camera.lookAt(scene);
    }

    function configureLight() {
        pointLight = new THREE.PointLight(0xffffff, 1.0, 100000);
        pointLight.position.set(0, 300, 200);
        scene.add(pointLight);
    }

    function configureControls() {
        controls = new THREE.TrackballControls(camera, renderer.domElement);
        // configuration of controls
        controls.rotateSpeed = 5.0;
        controls.zoomSpeed = 0.0;
        controls.panSpeed = 2.0;
        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0;

    }

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

Answer 1

在小提琴中，旋转操作可在mousemove上进行，而当我们将鼠标按下时，trackballcontrol的旋转功能也可进行

将.rotateSpeed的旋转速度（THREE.TrackballControls）设置为0：

controls = new THREE.TrackballControls(camera, renderer.domElement);

controls.rotateSpeed = 0.0;

可以通过缩放THREE.Euler角度来更改转速：

renderer.domElement.addEventListener('mousemove', function (e) {
    const that = this;
    var rotateSpeed = 0.1;
    var deltaMove = {
        x: e.offsetX - previousMousePosition.x,
        y: e.offsetY - previousMousePosition.y
    };

    if (isDragging) {
        var deltaRotationQuaternion = new THREE.Quaternion()
            .setFromEuler(new THREE.Euler(
                toRadians(deltaMove.y * rotateSpeed),
                toRadians(deltaMove.x * rotateSpeed),
                0,
                'XYZ'
            ));
        cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
    }

    previousMousePosition = {
        x: e.offsetX,
        y: e.offsetY
    };
});

如何禁用轨迹球旋转事件并调用自定义旋转事件并在自定义事件中设置旋转速度

1 个答案: