我有一组可单击的对象,可以使用滚轮或单击并拖动来旋转它们。我遇到的问题是,当您拖动鼠标然后在对象上方释放时,它将启动单击动画。
Here是指向简化项目小提琴的链接。
有人知道如何在拖动过程中停止记录点击吗?似乎有点困难,因为它们是射线投射的物体。
我的js函数:
document.addEventListener("mousedown", function () {
isMouseDown = true
startX = event.pageX
startY = event.pageY
document.body.style.cursor = 'grabbing';
})
document.addEventListener("mouseup", function () {
isMouseDown = false
document.body.style.cursor = 'grab';
})
document.addEventListener("mousemove", function (event) {
if (isMouseDown) {
document.body.style.cursor = 'grabbing'
}
aimX = ((window.innerWidth / 2) - event.pageX) * 0.35
aimY = ((window.innerHeight / 2) - event.pageY) * 0.5
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera)
const intersections = raycaster.intersectObjects(group.children)
if (intersections.length > 0) {
if(projectHov){
if (INTERSECTED != intersections[0].object) {
if (INTERSECTED)
INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
INTERSECTED = intersections[0].object;
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
//setting up new material on hover
INTERSECTED.material.color.setHex( 0xadadad );
if (INTERSECTED){
if(projectHov){
document.body.style.cursor = "pointer"
}
}
}
}
} else {
if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
document.body.style.cursor = "grab";
INTERSECTED = null;
}
// Moving the objects ==========================
if(isMouseDown) {
let currentRotation = new THREE.Matrix4();
currentRotation.makeRotationFromEuler(group.rotation);
let newEuler = new THREE.Euler(0, ((event.pageX - startX) + (event.pageY - startY)) / 325, 0);
let newRotation = new THREE.Matrix4();
newRotation.makeRotationFromEuler(newEuler);
let finalRotation = new THREE.Matrix4();
finalRotation.multiplyMatrices(newRotation, currentRotation);
group.rotation.setFromRotationMatrix(finalRotation);
startX = event.pageX;
startY = event.pageY;
}
})
section.addEventListener('click', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersections = raycaster.intersectObjects(objects)
// Animation =================================
if (intersections.length > 0){
if(projectHov){
tl.play();
tl.to(backTag, 1, {
delay: 1.25,
autoAlpha:1,
}, 0);
}
// Animation ===================================
if (intersections[0].object == old ) {
if(projectHov){
tlOld.play();
projectHov = false
tlOld.to(old, 1.5, {three:{scaleX: 1.5, scaleY: 1.5, x:0, y:0, z:0}, ease:Power2.easeInOut}, 0);
tlOld.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
tlOld.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
tlOld.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
tlOld.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0);
groupRotate = false
}
}
答案 0 :(得分:0)
您可能希望将intersections[0].object.uuid;
存储在变量中,并在mousedown和mouseup上对其进行更新。然后在鼠标向上比较存储的uuid和光线投射的对象uuid。仅在它们相等时才进一步处理。