Using Next,js. Got 'earcut' is not defined error

Questions
1

First thing to know : I know I have to download ‘earcut’ lib via npm/cdn

document says I can add earcut in webpack like below, but I don’t know how to do with next.js

module.exports = {
    context: __dirname,
...
    plugins: [
        new webpack.ProvidePlugin({
            'earcut': 'earcut'
        })
    ]
}

I tried other third party library to modify config. but never works.
It is so inconvenient pass earcut to ExtrudePolygon function everytime I call it.

It’s not a question that’s directly related to babylon.js but I need your help.If you are using next.js , please let me know how you using function that require earcut.

thanks

2

cc @RaananW

4

oh, how did I miss this one?..

Importing earcut will provide you the package but will not necessarily provide you with the global namespace population that you are looking for.

What are you using earcut for? polygonMesh? you can inject the imported earcut as the last variable in the constructor, and then you don’t need the global assignment. Anyhow, want to share your code?

5

Yes, I am using earcut for Polygon mesh.

My point is, It is for weird to me. I have to import “earcut” everytime when I use PolygonMesh or like else.
Is there any other way to skip param for ExtrudePolygon function??

Here is my code. some changes from offical tutorial.
Thanks for your help

import {
  CreateCylinder,
  MeshBuilder,
  Vector3,
  Vector4,
  Texture,
  StandardMaterial,
  Animation,
} from "@babylonjs/core";
import { ExtrudePolygon } from "@babylonjs/core";
import earcut from "earcut";

export default function Car(name: string, scene?: any) {

  // mashes
  const sample = Array(24)
    .fill(null)
    .map((_, index) => {
      if (index === 0) return new Vector3(-0.3, 0, -0.1);
      if (index === 1) return new Vector3(0.2, 0, -0.1);
      if (index === 22) return new Vector3(0, 0, 0.1);
      if (index === 23) return new Vector3(-0.3, 0, 0.1);
      const weight = index - 2;
      return new Vector3(
        0.2 * Math.cos((weight * Math.PI) / 40),
        0,
        0.2 * Math.sin((weight * Math.PI) / 40) - 0.1
      );
    });

  // materials
  const carMat = new StandardMaterial("carMat");
  carMat.diffuseTexture = new Texture(
    "https://assets.babylonjs.com/environments/car.png"
  );

  const faceUV = [
    new Vector4(0, 0.5, 0.38, 1),
    new Vector4(0, 0, 1, 0.5),
    new Vector4(0.38, 1, 0, 0.5),
  ];

  /* I want to write this line like 

const car =   ExtrudePolygon(name,{shape:sample, depth:0.2,wrap:true,faceUV:faceUV},scene)

  */

const car = ExtrudePolygon(
    name,
    { shape: sample, depth: 0.2, wrap: true, faceUV: faceUV },
    scene,
    earcut
  );
  car.material = carMat;

  // wheel

  const wheelMat = new StandardMaterial("wheelMat");
  wheelMat.diffuseTexture = new Texture(
    "https://assets.babylonjs.com/environments/wheel.png"
  );

  const wheelRB = CreateCylinder(`${name}_wheelRB`, {
    diameter: 0.125,
    height: 0.05,
    faceUV: [
      new Vector4(0, 0, 1, 1),
      new Vector4(0, 0.5, 0, 0.5),
      new Vector4(0, 0, 1, 1),
    ],
  });
  wheelRB.material = wheelMat;
  wheelRB.parent = car;
  wheelRB.position.z = -0.1;
  wheelRB.position.x = -0.2;
  wheelRB.position.y = 0.035;

  //animation
  const animWheel = new Animation(
    "wheelAnimation",
    "rotation.y",
    30,
    Animation.ANIMATIONTYPE_FLOAT,
    Animation.ANIMATIONLOOPMODE_CYCLE
  );
  animWheel.setKeys([
    { frame: 0, value: 0 },
    { frame: 30, value: 2 * Math.PI },
  ]);
  wheelRB.animations = [animWheel];

  const wheelRF = wheelRB.clone(`${name}_wheelRF`);
  wheelRF.position.x = 0.1;
  const wheelLB = wheelRB.clone(`${name}_wheelLB`);
  wheelLB.position.y = -0.2 - 0.035;
  const wheelLF = wheelRF.clone(`${name}_wheelLF`);
  wheelLF.position.y = -0.2 - 0.035;

  return car;
}
6

Not sure what you mean with skip param. you will need to inject earcut to the function, just like you are doing right now.

what you can do as well is assign earcut to the global namespace (i.e. window.earcut = earcut) after loading it. This is, however, contradicting es modules architecture. It’s a solution, but what is the issue with providing the injected earcut?

1 Like