如何在反应三个js中过滤点击?
How to filter on-click in react three js?
所以我探索 2 cubes sample。我只想一次单击一个多维数据集。但是,当我单击一个立方体时,该立方体在当前立方体后面有一个立方体,两者都被单击了。如何强制点击并悬停在最近的一个?
换句话说,在立方体 A 上 clicking\hovering 我希望立方体 B 不被点击
我的代码示例:
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
function Box(props) {
// This reference will give us direct access to the mesh
const mesh = useRef()
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
// Rotate mesh every frame, this is outside of React without overhead
useFrame(() => {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01
})
return (
<mesh
{...props}
ref={mesh}
scale={active ? 1.5 : 1}
onClick={(e) => setActive(!active)}
onPointerOver={(e) => setHover(true)}
onPointerOut={(e) => setHover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
)
}
export default function App() {
return (
<Canvas>
<ambientLight intensity={0.5} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<Box position={[1.2, 0.5, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>
)
}
解决了here
主要差异:
function intersectionsFilter(intersections) {
return intersections?.length ? [intersections[0]] : intersections
}
export default function App() {
return (
<Canvas raycaster={{ filter: intersectionsFilter }}>
所以我探索 2 cubes sample。我只想一次单击一个多维数据集。但是,当我单击一个立方体时,该立方体在当前立方体后面有一个立方体,两者都被单击了。如何强制点击并悬停在最近的一个?
换句话说,在立方体 A 上 clicking\hovering 我希望立方体 B 不被点击
我的代码示例:
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
function Box(props) {
// This reference will give us direct access to the mesh
const mesh = useRef()
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
// Rotate mesh every frame, this is outside of React without overhead
useFrame(() => {
mesh.current.rotation.x = mesh.current.rotation.y += 0.01
})
return (
<mesh
{...props}
ref={mesh}
scale={active ? 1.5 : 1}
onClick={(e) => setActive(!active)}
onPointerOver={(e) => setHover(true)}
onPointerOut={(e) => setHover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>
)
}
export default function App() {
return (
<Canvas>
<ambientLight intensity={0.5} />
<spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
<pointLight position={[-10, -10, -10]} />
<Box position={[1.2, 0.5, 0]} />
<Box position={[1.2, 0, 0]} />
</Canvas>
)
}
解决了here
主要差异:
function intersectionsFilter(intersections) {
return intersections?.length ? [intersections[0]] : intersections
}
export default function App() {
return (
<Canvas raycaster={{ filter: intersectionsFilter }}>