BabylonJS 和 React - ReferenceError: earcut is not defined答案

【问题标题】：BabylonJS and React - ReferenceError: earcut is not definedBabylonJS 和 React - ReferenceError: earcut is not defined
【发布时间】：2020-12-16 18:43:45
【问题描述】：

使用 BabylonJS 和 React。在我当地的 React 环境中，我可以只使用一个球体来创建一个场景。过去，我能够创建一个由段组成的环。该代码在运行与 React 相同的版本 (4.1.0) 以及最新的 alpha 版本的 Playground 中运行良好。

https://www.babylonjs-playground.com/#KECBIZ

当我将此代码从操场移动到本地 React 环境时，我收到以下错误：

Function.push../node_modules/@babylonjs/core/Meshes/Builders/polygonBuilder.js._mesh__WEBPACK_IMPORTED_MODULE_2__.Mesh.ExtrudePolygon
C:/sourceES6/core/Meshes/Builders/polygonBuilder.ts:85
  82 |     return PolygonBuilder.CreatePolygon(name, options, scene, earcutInjection);
  83 | };
  84 | 
> 85 | Mesh.ExtrudePolygon = (name: string, shape: Vector3[], depth: number, scene: Scene, holes?: Vector3[][], updatable?: boolean, sideOrientation?: number, earcutInjection = earcut): Mesh => {
  86 |     var options = {
  87 |         shape: shape,
  88 |         holes: holes,

来自我本地 React 环境的代码

    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, 0, 50, BABYLON.Vector3.Zero(), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);

    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    let ring = createRing(10, 2, 2, 16);
    ring.segments.forEach(s => {
        let polygon = BABYLON.Mesh.ExtrudePolygon(ring.id, s.vectors, 2, scene);
        polygon.rotate(BABYLON.Axis.Y, s.offset);
    });

我已经使用 NPM (https://doc.babylonjs.com/how_to/polygonmeshbuilder) 安装了 Earcut。我错过了什么？

【问题讨论】：

标签： reactjs babylonjs

【解决方案1】：

你可以像这样在 index.tsx 文件中导入它而无需更改 webpack

import * as earcut from "earcut";
(window as any).earcut = earcut;

你也需要这样做

npm install @types/earcut --save-dev
npm install earcut --save

【讨论】：

【解决方案2】：

你需要更新你的 webpack 插件：

    plugins: [
        ...
        new webpack.ProvidePlugin({
            'earcut': 'earcut'
        }),
    ]

【讨论】：