threejs的transformControls拖拽结束的异常

transformControls拖拽结束以后会以结束点的射线拾取重新选中新的模型,这里发现是监听事件的问题

// 创建 TransformControls
        const transformControls = new TransformControls(camera, renderer.domElement);
        const transformControlsHelper = transformControls.getHelper()
        scene.add(transformControlsHelper);

        
        transformControls.addEventListener('dragging-changed', (event) => {
            controls.enabled = !event.value;
        });

        // 鼠标点击选择物体
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();
       

        let isDragging = false;

        transformControls.addEventListener('mouseDown', () => {
        isDragging = true;
        });
        transformControls.addEventListener('mouseUp', () => {
        isDragging = false;
        });

        function onMouseClick(event) {
            if (isDragging) return; // 不在拖动时切换控制目标

            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);

            const intersects = raycaster.intersectObjects(interactiveGroups);
            if (intersects.length > 0) {
                transformControls.attach(intersects[0].object);
            } else {
                transformControls.detach();
            }
        }

        window.addEventListener('click', onMouseClick, false);

window.addEventListener('click', onMouseClick, false);

换成

window.addEventListener('pointerdown', onMouseClick, false);
  • 使用 pointerdown 当您需要:

立即响应按下动作(如拖拽开始)

支持触摸设备的即时反馈

检测压力敏感设备的压力级别

  • 使用 click 当您需要:

传统的点击行为

确保用户完成点击动作

兼容性要求(click 有更广泛的浏览器支持)

推荐一个webgl在线三维编辑器
https://github.com/nikonikoCW/Meteor3DEditor
官网
http://www.meteor3d.cn/

你可能感兴趣的:(threejs的transformControls拖拽结束的异常)