This component of the website is in .jsx while whole website is in .tsx. I want to convert this into .tsx file. Can anyone help or guide. No matter what I do, I ran into more and more errors.
extend({ RoundedPlaneGeometry: geometry.RoundedPlaneGeometry })
function Scene({ children, ...props }) {
const ref = useRef()
const scroll = useScroll()
const [hovered, hover] = useState(null)
useFrame((state, delta) => {
ref.current.rotation.y = -scroll.offset * (Math.PI * 2) // Rotate contents
state.events.update() // Raycasts every frame rather than on pointer-move
easing.damp3(state.camera.position, [-state.pointer.x * 2, state.pointer.y * 2 + 4.5, 9], 0.3, delta)
state.camera.lookAt(0, 0, 0)
})
return (
<group ref={ref} {...props}>
<Cards category="spring" from={0} len={Math.PI / 4} onPointerOver={hover} onPointerOut={hover} />
// More Cards
</group>
)
}
function Cards({ category, data, from = 0, len = Math.PI * 2, radius = 5.25, onPointerOver, onPointerOut, ...props }) {
const [hovered, hover] = useState(null)
const amount = Math.round(len * 22)
const textPosition = from + (amount / 2 / amount) * len
return (
<group {...props}>
<Billboard position={[Math.sin(textPosition) * radius * 1.4, 0.5, Math.cos(textPosition) * radius * 1.4]}>
<Text font={suspend(inter).default} fontSize={0.25} anchorX="center" color="black">
{category}
</Text>
</Billboard>
{Array.from({ length: amount - 3 /* minus 3 images at the end, creates a gap */ }, (_, i) => {
const angle = from + (i / amount) * len
return (
<Card
key={angle}
onPointerOver={(e) => (e.stopPropagation(), hover(i), onPointerOver(i))}
onPointerOut={() => (hover(null), onPointerOut(null))}
position={[Math.sin(angle) * radius, 0, Math.cos(angle) * radius]}
rotation={[0, Math.PI / 2 + angle, 0]}
active={hovered !== null}
hovered={hovered === i}
url={`/img${Math.floor(i % 10) + 1}.jpg`}
/>
)
})}
</group>
)
}
function Card({ url, active, hovered, ...props }) {
const ref = useRef()
useFrame((state, delta) => {
const f = hovered ? 1.4 : active ? 1.25 : 1
easing.damp3(ref.current.position, [0, hovered ? 0.25 : 0, 0], 0.1, delta)
easing.damp3(ref.current.scale, [1.618 * f, 1 * f, 1], 0.15, delta)
})
return (
<group {...props}>
<Image ref={ref} url={url} scale={[1.618, 1, 1]} side={THREE.DoubleSide} />
</group>
)
}
function ActiveCard({ hovered, ...props }) {
const ref = useRef()
const name = useMemo(() => generate({ exactly: 2 }).join(' '), [hovered])
useLayoutEffect(() => void (ref.current.material.zoom = 0.8), [hovered])
useFrame((state, delta) => {
easing.damp(ref.current.material, 'zoom', 1, 0.5, delta)
easing.damp(ref.current.material, 'opacity', hovered !== null, 0.3, delta)
})
return (
<Billboard {...props}>
<Text font={suspend(inter).default} fontSize={0.5} position={[2.15, 3.85, 0]} anchorX="left" color="black">
{hovered !== null && `${name}n${hovered}`}
</Text>
<Image ref={ref} transparent position={[0, 1.5, 0]} url={`/img${Math.floor(hovered % 10) + 1}.jpg`}>
<roundedPlaneGeometry parameters={{ width: 3.5, height: 1.618 * 3.5 }} args={[3.5, 1.618 * 3.5, 0.2]} />
</Image>
</Billboard>
)
}
I used ChatGPT but it got even worse! For example I don’t even know what this error means “Type ‘MutableRefObject<Group | undefined>’ is not assignable to type ‘Ref<Group> | undefined’.
Type ‘MutableRefObject<Group | undefined>’ is not assignable to type ‘RefObject<Group>’.
Types of property ‘current’ are incompatible.
Type ‘Group | undefined’ is not assignable to type ‘Group | null’.
Type ‘undefined’ is not assignable to type ‘Group | null’.ts(2322)”!
