Web Development Tools
Exploring Next JS, TypeScript, and React Fiber
Sample Code
import { useFrame } from '@react-three/fiber'
import React, { useRef, useState } from 'react'
interface PolyhedronCanvasProps {
position: [number, number, number],
polyhedron: any
}
const PolyhedronCanvas = ( props: PolyhedronCanvasProps ) => {
const ref = useRef()
const [count, setCount] = useState(0)
useFrame((_, delta) => {
ref.current.rotation.x += delta
ref.current.rotation.y += 0.5 * delta
})
return (
<mesh
position={props.position}
ref={ref}
onPointerDown={() => setCount((count + 1) % 3)}
geometry={props.polyhedron[count]}
>
<meshPhongMaterial color={'lime'} wireframe/>
</mesh>
)
}
export default PolyhedronCanvas
ref.current.rotation.x += delta
ref.current.rotation.y += 0.5 * delta
While attempting to launch the Next JS application, encountered some TypeScript errors related to
'ref.current' is possibly 'undefined'Although the project is functional, striving to resolve these TypeScript errors causing inconsistencies in the appearance of JSX files within VS Code.