开发者问题收集

ThreeJS + NextJS：类构造函数必须用“new”调用

2022-06-23
602
javascript three.js next.js react-three-fiber

我正尝试在“lab2”内的 nextJS 路由内渲染一个简单的场景。

我一直收到此错误： 

class constructors must be invoked with 'new'
Call Stack
renderWithHooks
node_modules\react-reconciler\cjs\react-reconciler.development.js (7363:0)
mountIndeterminateComponent
node_modules\react-reconciler\cjs\react-reconciler.development.js (12327:0)
beginWork
node_modules\react-reconciler\cjs\react-reconciler.development.js (13831:0)
callCallback
node_modules\react-reconciler\cjs\react-reconciler.development.js (14219:0)
invokeGuardedCallbackDev
node_modules\react-reconciler\cjs\react-reconciler.development.js (14268:0)
invokeGuardedCallback
node_modules\react-reconciler\cjs\react-reconciler.development.js (14329:0)
beginWork$1
node_modules\react-reconciler\cjs\react-reconciler.development.js (19537:0)
performUnitOfWork
node_modules\react-reconciler\cjs\react-reconciler.development.js (18686:0)
workLoopSync
node_modules\react-reconciler\cjs\react-reconciler.development.js (18597:0)
renderRootSync
node_modules\react-reconciler\cjs\react-reconciler.development.js (18565:0)
performConcurrentWorkOnRoot
node_modules\react-reconciler\cjs\react-reconciler.development.js (17836:0)
workLoop
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (266:0)
flushWork
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (239:0)
performWorkUntilDeadline
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (533:0)
EventHandlerNonNull*
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (571:0)
<unknown>
node_modules\react-reconciler\node_modules\scheduler\cjs\scheduler.development.js (633:3)
./node_modules/react-reconciler/node_modules/scheduler/cjs/scheduler.development.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (148:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
<unknown>
node_modules\react-reconciler\node_modules\scheduler\index.js (6:2)
./node_modules/react-reconciler/node_modules/scheduler/index.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (159:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
$$$reconciler
node_modules\react-reconciler\cjs\react-reconciler.development.js (19:24)
createRenderer
node_modules\@react-three\fiber\dist\index-4f1a8e2f.esm.js (1041:31)
<unknown>
node_modules\@react-three\fiber\dist\index-4f1a8e2f.esm.js (1628:2)
./node_modules/@react-three/fiber/dist/index-4f1a8e2f.esm.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (18:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
<unknown>
webpack-internal:///./node_modules/@react-three/fiber/dist/react-three-fiber.esm.js (30:99)
./node_modules/@react-three/fiber/dist/react-three-fiber.esm.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (29:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
<unknown>
webpack-internal:///./pages/lab2.js (4:95)
./pages/lab2.js
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (93:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (288:21)
<unknown>
node_modules\next\dist\build\webpack\loaders\next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Croot%5CDocuments%5CCS%20things%5CPhys_2%5Cphys2labs%5Cpages%5Clab2.js&page=%2Flab2! (5:15)
onEntrypoint/<
node_modules\next\dist\client\route-loader.js (235:50)
promise callback*onEntrypoint
node_modules\next\dist\client\route-loader.js (235:41)
register
node_modules\next\dist\client\index.js (268:58)
<unknown>
node_modules\next\dist\build\webpack\loaders\next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Croot%5CDocuments%5CCS%20things%5CPhys_2%5Cphys2labs%5Cpages%5Clab2.js&page=%2Flab2! (2:0)
./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Croot%5CDocuments%5CCS%20things%5CPhys_2%5Cphys2labs%5Cpages%5Clab2.js&page=%2Flab2!
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (71:1)
options.factory
/_next/static/chunks/webpack.js (633:31)
__webpack_require__
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/webpack.js (37:33)
__webpack_exec__
/_next/static/chunks/pages/lab2.js (220:61)
<unknown>
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (221:78)
__webpack_require__.O
/_next/static/chunks/webpack.js (86:23)
<unknown>
file:/C:/Users/root/Documents/CS%20things/Phys_2/phys2labs/.next/static/chunks/pages/lab2.js (222:56)
<unknown>
webpackJsonpCallback@http://localhost:3000/_next/static/chunks/webpack.js?ts=1656026286152 (1181:46)
<unknown>
/_next/static/chunks/pages/lab2.js (9:61)

我收到三个这样的错误，控制台将这些错误归因于 <BoxGeometry>、<MeshPhysicalMaterial> 和 <ForwardRef(Canvas)> 组件。

这是我的 Lab2.js 路由： 

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;

以及我的 floor.js 组件： 

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;

我的依赖项和版本： 

"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"
  }

如能提供任何帮助，我们将不胜感激。

1个回答

在 React-Three-Fiber 中，您不需要从 three 导入 BoxBufferGeometry 和 MeshPhysicalMaterial ，如果您只想在 jsx 组件中返回它们（就像您没有导入 mesh 一样！），请将它们转换为驼峰式命名，如下所示： 

function Floor(props) {
    return (
        <mesh {...props} recieveShadow={true}>
            <boxBufferGeometry args={[20,1,10]} />
            <meshPhysicalMaterial color='white' />
        </mesh>
    );
}

export default Floor;
DCVDiego
2022-06-28