How to inject earcut to a react+babylon project?

Questions
1

Babylon is a excellent web3d library, react is a excellent web-ui library, and they all support typescript,

By reading this doc, I create a project which contian react and babylonjs with typescript, it work well, but when I use the MeshBuilder.CreatePolygon function it report this bug.

ReferenceError: earcut is not defined
Function.e.CreatePolygon
C:/Users/Administrator/Documents/WebProjects/SunnyHouseWeb/node_modules/_babylonjs@4.2.0-beta.12@babylonjs/babylon.js:16

Babylonjs is no longer built-in the earcut, I have to add it to my project in advance.
Has anyone ever tried to do that?

I have found an artical for this question, but the answer mention a way to change webpack config, I don’t think change webpack config in a create-react-app project is a wise thing so I didn’t try it.

I have try use React-script-tag to add earcut as react component to my project, but it doesn’t work.

2

Have you added the earcut npm package to your project? I have never tried this, so I am just first asking :slight_smile:

You can inject your own version of earcut when creating polygons. It is the last variable in the CreatePolygon function and if you import it yourself from “earcut” you can use it when generating your mesh.

3

Here is my package.json, I didn’t focus the version of earcut, just use npm to install earcut to my project, and I have imported it, but I don’t use earcut directly, I used BABYLON.MeshBuilder.CreatePolygon function which depends on earcut.

{
  "name": "react-ts",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/earcut": "^2.1.1",
    "@types/jest": "^24.0.0",
    "@types/jquery": "^3.5.2",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "babylonjs": "^4.2.0-beta.10",
    "babylonjs-materials": "^4.2.0-beta.10",
    "diff-match-patch-typescript": "^1.0.7",
    "earcut": "^2.2.2",
    "jquery": "^3.5.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-script-tag": "^1.1.2",
    "react-scripts": "3.4.3",
    "typescript": "^3.7.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app",
    "allowShortCircuit": true,
    "allowTernary": true,
    "allowTaggedTemplates": true
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}


import * as React from 'react';
import './App.css';
import DesignStage from './DesignStage';
import Topbar from './UIComponents/Topbar'
import 'earcut'
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Topbar/>
        <DesignStage />
      </div>
    );
  }
}

export default App;
4

You just need to import earcut, get a reference of the object, and provide it to babylon (in the function you are using). so

import * as earcut from "earcut"

and then use the earcut variable as the last variable of the function

3 Likes
5

Thanks for your anwser, it has solved my problem!
I did’t notice that there is a earcut inject param in Babylon.CreatePolygon function!

1 Like