Seeking assistance with rendering a basic scene within a nextJS route named "lab2".
Encountering the following error:
Error: class constructors must be invoked with 'new'
Call Stack:
renderWithHooks
mountIndeterminateComponent
beginWork
callCallback
...
The errors are associated with components such as <BoxGeometry>, <MeshPhysicalMaterial>, and <ForwardRef(Canvas)>.
Below is the code for Lab2.js route:
import { Canvas } from "@react-three/fiber";
import Floor from "../components/floor";
function Lab2() {
return(
<div className="w-screen h-screen">
<Canvas
shadows={true}
className="bg-slate-500"
camera={{
position: [-6, 7, 7],
}}>
<Floor position={[0, -1, 0]} />
</Canvas>
</div>
);
}
export default Lab2;And the floor.js component:
import { BoxBufferGeometry, MeshPhysicalMaterial } from "three";
function Floor(props) {
return (
<mesh {...props} recieveShadow={true}>
<BoxBufferGeometry args={[20,1,10]} />
<MeshPhysicalMaterial color='white' />
</mesh>
);
}
export default Floor;List of dependencies and versions:
"dependencies": {
"@react-three/fiber": "^8.0.27",
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"three": "^0.141.0"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4"
}
If anyone can offer guidance, it would be highly appreciated.