在react-three-fiber / three.js上创建点击事件监听器可以通过以下步骤实现:
import { Canvas, useThree } from 'react-three-fiber';
import { useState } from 'react';
import { Raycaster, Vector2 } from 'three';
const [clickedObject, setClickedObject] = useState(null);
const ClickableMesh = ({ onClick, ...props }) => {
const { camera, mouse } = useThree();
const raycaster = new Raycaster();
const [hovered, setHovered] = useState(false);
const handleClick = () => {
if (onClick) {
onClick();
}
};
const handlePointerMove = (event) => {
const { clientX, clientY } = event;
const rect = event.target.getBoundingClientRect();
const x = ((clientX - rect.left) / rect.width) * 2 - 1;
const y = -((clientY - rect.top) / rect.height) * 2 + 1;
mouse.set(x, y);
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(mesh);
setHovered(intersects.length > 0);
};
return (
<mesh
{...props}
onClick={handleClick}
onPointerMove={handlePointerMove}
onPointerOut={() => setHovered(false)}
>
<boxBufferGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'red' : 'blue'} />
</mesh>
);
};
const App = () => {
const handleObjectClick = () => {
console.log('Object clicked!');
};
return (
<Canvas>
<ClickableMesh position={[0, 0, 0]} onClick={handleObjectClick} />
</Canvas>
);
};
通过以上步骤,你就可以在react-three-fiber / three.js上创建一个点击事件监听器了。当点击ClickableMesh组件时,会触发handleObjectClick函数,并在控制台输出"Object clicked!"。你也可以根据需要自定义点击事件的逻辑。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云