We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I was trying to recreate this sample from r3f https://codesandbox.io/p/sandbox/condescending-tereshkova-r7f742?file=%2Fsrc%2FPrice.js%3A32%2C4
My issue is related with the Mask since the Text is not limited by the Mask and its stencil props:
<Mask id={1}> <planeGeometry args={[10, 1.55]} /> </Mask>
this is the code:
function App() { const [price, setPrice] = useState([1, 3, 1, 5]); useEffect(() => { setTimeout(() => { setPrice([7, 5, 6, 8]); }, 2000); }, []); return ( <div className="w-screen h-screen"> <Canvas> <ambientLight intensity={1.5 * Math.PI} /> <Sky /> <group position={[0, 0, 0]}> {price.map((x, index) => ( <Counter index={index} key={index} value={x} /> ))} <Mask id={1}> <planeGeometry args={[10, 1.55]} /> <meshBasicMaterial color={"red"} /> </Mask> </group> </Canvas> </div> ); } function Counter({ index, value }: { index: number; value: number }) { const ref = useRef(null); const stencil = useMask(1); useFrame((state, delta) => easing.damp( ref.current!["position"], "y", value * -2, 0.1 * (4 - index), delta ) ); return ( <group position-x={index * 1.1} ref={ref}> {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((number) => ( <Text key={number} position={[0, number * 2, 0]} fontSize={2} // font={"./helvetiker_regular.typeface.json"} > {number} <meshStandardMaterial {...stencil} /> </Text> ))} </group> ); }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
I was trying to recreate this sample from r3f https://codesandbox.io/p/sandbox/condescending-tereshkova-r7f742?file=%2Fsrc%2FPrice.js%3A32%2C4
My issue is related with the Mask since the Text is not limited by the Mask and its stencil props:
this is the code:
The text was updated successfully, but these errors were encountered: