Please I tried extruding a polygon using Mesh builder. I have as entry an Array of Vector3 points from a GeoJSON file.
But got this error. 
Please can someone help me ?
Hy 
welcome to the forum!
can you please provide a repro
https://babylonjs-playground.com
Thanks.
Please I am very new to the Forum and to Babylon JS (beginner), do you mean send an example of the code I used ?
yes!
that way it i will be easier to discover the issue
import * as BABYLON from ‘babylonjs’;
import * as GUI from ‘babylonjs-gui’;
import { World } from ‘…/graphics/World’;
import { project } from ‘…/utils/tilesConverter’;
import materials from ‘…/graphics/Materials’;
import naturesDB from ‘…/natures/natures.js’;
import geojsonsDB from ‘…/buildings/05_E3.js’;
export class IndoorGeojsonLayer {
private world: World;
private url: string;
private materials: {[key: string]: BABYLON.StandardMaterial};
private headers: any;
private natures: any;
private options: any;
private material: [BABYLON.StandardMaterial];
private mouseMoved = true;
private prevPosition: BABYLON.Vector2;
constructor(url: string, options = {}) {
this.url = url;
const defaultOptions = {
onLeftPick: () => {},
onRightPick: () => {},
onPickOut: () => {},
onDoublePick: () => {},
onPointerOver: () => {},
onPointerOut: () => {},
}
this.options = Object.assign(defaultOptions, options);
window.addEventListener('pointerdown', (e) => {
this.mouseMoved = true;
this.prevPosition = new BABYLON.Vector2(e.clientX, e.clientY);
});
window.addEventListener('pointerup', (e) => {
this.mouseMoved = Math.hypot(e.clientX - this.prevPosition.x, e.clientY - this.prevPosition.y) > 10;
this.prevPosition = new BABYLON.Vector2(e.clientX, e.clientY);
const {pickedMesh} = this.world.scene.pick(e.clientX, e.clientY);
if(!pickedMesh && !this.mouseMoved) this.options.onPickOut(e, this);
});
this.headers = new Headers({
'X-User-Id': this.options.userId,
'X-Auth-Token': this.options.authToken
});
}
public getScene() {
return this.world.scene;
}
public focusOnGeometry(uuid) {
const mesh = this.world.scene.getMeshByID(uuid);
this.world.camera.zoomOn([mesh], true);
}
public focusOnBuilding() {
const levels = this.world.scene.getMeshesByTags(‘level’);
levels.map(l => l.getDescendants().map((m: BABYLON.Mesh) => {
m.setEnabled(m.nuExt);
}));
const grounds = this.world.scene.getMeshesByID('ground');
grounds.map(m => m.setEnabled(true));
const building = this.world.scene.getMeshByID('building');
if(building) building.setEnabled(true);
}
public focusOnLevel(levelId: string) {
const levels = this.world.scene.getMeshesByTags(‘level’);
levels.forEach((level) => {
if(level.id !== levelId)
level.getDescendants().map((m: BABYLON.Mesh) => m.setEnabled(false));
else
level.getDescendants().map(m => {
m.setEnabled(m.visibleInLevel)
if(m.visibleInLevel && !m.edgeRendered) {
m.enableEdgesRendering(.85, true);
m.edgesWidth = 10.0;
m.edgesColor = new BABYLON.Color4(.3, .3, .3, 1);
m.edgeRendered = true;
}
})
});
const grounds = this.world.scene.getMeshesByID('ground');
grounds.map(m => m.setEnabled(false));
const building = this.world.scene.getMeshByID('building');
building.setEnabled(false);
}
public async addTo(world: World) {
this.world = world;
this.materials = materials(this.world.scene);
const natures = await this.getNatures();
return this;
}
public setColor(id, color) {
const mesh = this.world.scene.getMeshByID(id);
mesh.material = new BABYLON.StandardMaterial(color, this.world.scene);
mesh.material.diffuseColor = BABYLON.Color3.FromHexString(color);
mesh.getDescendants().map((m: BABYLON.Mesh) => {m.material = mesh.material});
}
public async buildBuilding(buildingUuid: string) {
this.world.on(‘setview’, () => {
this.world.scene.getMeshesByTags(‘level’).map(l => {
l.dispose();
})
})
// const response = await fetch(this.url + '/buildings/' + buildingUuid, { headers: this.headers });
// const geojsons = await response.json();
const geojsons = geojsonsDB;
geojsons.map(this.meshFromFeatureCollection.bind(this));
return this;
}
private async getNatures() {
// const response = await fetch(this.url + ‘/natures’, { headers: this.headers });
// const json = await response.json();
const json = naturesDB;
this.natures = json;
console.dir(this.natures);
}
private meshFromFeatureCollection(featureCollection, index = 0) {
const levelMesh = new BABYLON.AbstractMesh(featureCollection.properties.id, this.world.scene);
BABYLON.Tags.EnableFor(levelMesh);
levelMesh.addTags(‘level’);
const meshes = featureCollection.features.map((f) => {
const mesh = this.meshFromFeature(f);
console.dir(mesh)
mesh.parent = levelMesh;
});
const nu = this.world.scene.getMeshesByTags("FnYo7P99ZdsCWnhR4");
if (nu.length === 0) return;
const mesh = BABYLON.Mesh.MergeMeshes(nu, true, true);
BABYLON.Tags.EnableFor(mesh);
mesh.addTags('nuExt');
mesh.id = levelMesh.id;
mesh.parent = levelMesh;
mesh.nuExt = true;
mesh.enableEdgesRendering(0.85, true);
mesh.edgesWidth = 15.0;
mesh.edgesColor = new BABYLON.Color4(.5, .5, .5, 1);
mesh.visibleInBuilding = true;
this.assignActionManager(mesh);
mesh.setEnabled(false);
levelMesh.position.y = levelMesh.initialPosY = 3 * index;
}
private meshFromFeature(feature) {
console.dir(feature);
if (feature.properties["natureId"] === null)
feature.properties["natureId"] = 1;
console.dir('la nature Id pas bonne ',feature.properties["natureId"]);
return this.meshFromFeatureGeometry(feature.geometry, feature.properties);
}
private meshFromFeatureGeometry(geometry, { id, natureId, area }) : BABYLON.Mesh {
console.log( id, natureId, area);
//{ name, _id, visibleInBuilding, visibleInLevel, altitude, height, pickable, materialUuid, extruder }
//const params = this.natures.find(natur => natur._id === natureId);
//console.dir(params);
const { name, _id, visibleInBuilding, visibleInLevel, altitude, height, pickable, materialUuid, extruder } = this.natures.find(natur => natur._id === natureId);
console.dir(name);
const [shape, ...holes] = geometry.coordinates.map(shape => {
return shape.map(lonLat => {
const projection = project(this.world.options.from, this.world.options.to, lonLat.reverse());
const origin = this.world.originPoint;
return BABYLON.Vector3.FromArray([projection[0] - origin[0], 0, projection[1] - origin[1]]);
}).slice(1);
});
const faceColors = extruder === 'VERT2MT' ? [
new BABYLON.Color4(0, 0, 0, 1),
new BABYLON.Color4(1, 1, 1, 1),
new BABYLON.Color4(0, 0, 0, 1),
] : [];
console.dir({shape,holes});
const mesh = BABYLON.MeshBuilder.ExtrudePolygon(id, { shape, holes, depth: height, sideOrientation: BABYLON.Mesh.DOUBLESIDE, faceColors }, this.world.scene);
//const mesh = BABYLON.MeshBuilder.ExtrudePolygon(id, shape, this.world.scene);
mesh.scaling.y = -1;
mesh.flipFaces();
mesh.position.y += altitude;
//mesh.isSelectable = pickable;
//mesh.area = area;
// mesh.visibleInLevel = visibleInLevel;
// mesh.originalMaterial = mesh.material = this.materials[materialUuid];
// mesh.visibleInBuilding = visibleInBuilding;
BABYLON.Tags.EnableFor(mesh);
//mesh.addTags(natureId);
if(pickable) {
this.assignActionManager(mesh)
}
mesh.setEnabled(false);
return mesh;
}
private assignActionManager(mesh) {
mesh.actionManager = new BABYLON.ActionManager(this.world.scene);
mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnDoublePickTrigger, (e) => this.options.onDoublePick(e, this)));
mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, (e) => this.options.onPointerOver(e, this)));
mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, (e) => this.options.onPointerOut(e, this)));
mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLeftPickTrigger, (e) => {
setTimeout(() => {
if(!this.mouseMoved) this.options.onLeftPick(e, this) }, 200)
}));
mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnRightPickTrigger, (e) => {
setTimeout(() => {
if(!this.mouseMoved) this.options.onRightPick(e, this) }, 200)
}));
}
public explode(amount: number) {
const levels = this.world.scene.getMeshesByTags(‘level’);
levels.map(l => {
l.getDescendants().map((m: BABYLON.Mesh) => {
m.setEnabled(!m.nuExt && m.visibleInBuilding);
});
l.position.y = l.initialPosY * amount;
});
const grounds = this.world.scene.getMeshesByID('ground');
grounds.map(m => m.setEnabled(false));
const building = this.world.scene.getMeshByID('building');
if(building) building.setEnabled(false);
}
}
export default (url, options) => new IndoorGeojsonLayer(url, options);
// WEBPACK FOOTER //
// ./src/layers/IndoorGeojsonLayer.ts
Hi @ifk_2019 , welcome to the Babylon.JS community!
It’s easiest to get help with an issue by creating a playground scene via https://playground.babylonjs.com, which allows you to isolate the portion of your project that is causing your issue, and allows us to easily run and see what’s happening first hand.
Would you be able to minimize your posted code to a saved scene that reproduces the issue?
1 Like
Hi @Drigax It will be difficult for me. I am trying to continue someone’s code and there is no doc and history. The code is also very complex; so I can’t really simplify it to reproduce the error on playground.
But the origin of the error is a function m in CreatePolygon, if MeshBuilder. Where m is called as a function, while it is not.
Can you share the running code somewhere?