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/