How to access the BufferGeometry of IFC items in web-ifc-three - three.js

I'm trying to get the geometry of an element
i.e. a BufferGeometry object corresponding to an expressId I have (not through picking).
Basically I'm asking how to traverse the IFC model and export each object as a separate OBJ.
I'll note I have reverse engineered code to achieve that for some version of the package, but it uses undocumented functionality, so naturally it broke in later versions (the code also colors the geometry according to the material's color so I don't need an mtl):
Don't copy this code it won't work
Object.values(bimModel.ifcManager.state.models[bimModel.modelID].items).forEach(type => {
Object.entries(type.geometries).forEach(([id, geometry]) => {
const properties = bimModel.getItemProperties(Number(id))
const numVertices = geometry.getAttribute('position').count
const color = type.material.color.toArray().map(x => x * 255)
const vertexColors = new Uint8Array(Array.from({ length: numVertices }, () => color).flat())
geometry.setAttribute('color', new BufferAttribute(vertexColors, 3, true))
})
})

This is exactly what we do to export models to glTF. The basic workflow is:
Decide what IFC categories you would like to export.
Get all the items of each category.
Reconstruct the mesh for each item.
Export the mesh using the Three.js exporter of your choice.
Let's see a basic example to get all the meshes from the walls. The process is not as straightforward as having each IFC item as a separate mesh, but that's the price for having the draw calls at minimum (otherwise, a browser wouldn't stand even medium-sized IFC files):
import { IFCWALLSTANDARDCASE } from 'web-ifc';
async function getAllWallMeshes() {
// Get all the IDs of the walls
const wallsIDs = manager.getAllItemsOfType(0, IFCWALL, false);
const meshes = [];
const customID = 'temp-gltf-subset';
for (const wallID of wallsIDs) {
const coordinates = [];
const expressIDs = [];
const newIndices = [];
const alreadySaved = new Map();
// Get the subset for the wall
const subset = viewer.IFC.loader.ifcManager.createSubset({
ids: [wallID],
modelID,
removePrevious: true,
customID
});
// Subsets have their own index, but share the BufferAttributes
// with the original geometry, so we need to rebuild a new
// geometry with this index
const positionAttr = subset.geometry.attributes.position;
const expressIDAttr = subset.geometry.attributes.expressID;
const newGroups = subset.geometry.groups
.filter((group) => group.count !== 0);
const newMaterials = [];
const prevMaterials = subset.material;
let newMaterialIndex = 0;
newGroups.forEach((group) => {
newMaterials.push(prevMaterials[group.materialIndex]);
group.materialIndex = newMaterialIndex++;
});
let newIndex = 0;
for (let i = 0; i < subset.geometry.index.count; i++) {
const index = subset.geometry.index.array[i];
if (!alreadySaved.has(index)) {
coordinates.push(positionAttr.array[3 * index]);
coordinates.push(positionAttr.array[3 * index + 1]);
coordinates.push(positionAttr.array[3 * index + 2]);
expressIDs.push(expressIDAttr.getX(index));
alreadySaved.set(index, newIndex++);
}
const saved = alreadySaved.get(index);
newIndices.push(saved);
}
const geometryToExport = new BufferGeometry();
const newVerticesAttr = new BufferAttribute(Float32Array.from(coordinates), 3);
const newExpressIDAttr = new BufferAttribute(Uint32Array.from(expressIDs), 1);
geometryToExport.setAttribute('position', newVerticesAttr);
geometryToExport.setAttribute('expressID', newExpressIDAttr);
geometryToExport.setIndex(newIndices);
geometryToExport.groups = newGroups;
geometryToExport.computeVertexNormals();
const mesh = new Mesh(geometryToExport, newMaterials);
meshes.push(mesh);
}
viewer.IFC.loader.ifcManager.removeSubset(modelID, undefined, customID);
return meshes;
}

Related

How to set object position to be center of its mass?

Right now, when I upload my model, its center(highlighted by transformControls) is not in the model's center of mass. How can I shift it there?
I tried this:
(model) => {
box = new Box3();
box.expandByObject(model);
const centerOfBox = new Vector3();
box.getCenter(centerOfBox);
const size = new Vector3();
box.getSize(size);
const centerOfWorld = new Vector3(0, size.y/2, 0);
const offset = new Vector3();
offset.subVectors(centerOfWorld, centerOfBox);
const scale = model.scale;
model.translateX(scale.x*offset.x);
model.translateY(scale.y*offset.y);
model.translateZ(scale.z*offset.z);
}
and also this:
(model) => {
model.traverse(function(child) {
const rememberPosition = child.getWorldPosition(new Vector3());
const box = new Box3();
box.expandByObject(child);
const centerOfBox = new Vector3();
box.getCenter(centerOfBox);
const offset = new Vector3();
offset.subVectors(rememberPosition, centerOfBox);
child.traverse(function(ch) {
if (child instanceof Mesh) {
ch.geometry.translate(offset.x, offset.y, offset.z);
ch.translateX(-offset.x);
ch.translateY(-offset.y);
ch.translateZ(-offset.z);
}
});
});
model.position.copy(new Vector3());
}
In the latter version, I tried to shift the geometry to be at the object's position and then shift everything (geometry+position) back to the original place (original place = visibly original place).

ThreeJS: Is there any possible way to reduce the amount of triangles count

Hi I have some very complex models to display which comes from Revit files that my customer provides.
But sometimes the amount of details in the model is just way too much for the purpose of the website.
I would like to reduce the amount of vertexes/triangles in the model to simplify the display and enhance performance.
I have used simply modifiers where I cant able to view the model itself.
Is this possible from within ThreeJS? Or is there maybe an other solution for this?
const renderMeshFunction = async (material: any, geometry: any, id: any) => {
let count = 0;
const emptyFunction = () => { };
const onBR = () => {
const _count = (count < 3 ? count : Math.floor(Math.random() * count) + 1);
return ((renderer: WebGLRenderer, scene: Scene,
camera: Camera, geometry: Geometry | BufferGeometry,
_material: Material, group: Group) => {
_material.clippingPlanes = checkIsClipping();
});
};
count = geometry.maxInstancedCount;
const mesh = new Mesh(geometry, material);
let modifier = new SimplifyModifier();
let simplified = mesh.clone();
simplified.material = simplified.material.clone();
let countSimple = Math.floor((simplified.geometry as any).attributes.position.count * 1); // number of vertices to remove
simplified.geometry = modifier.modify(simplified.geometry, countSimple);
that.scene.add(simplified);
mesh.name = id || Date.now().toString();
mesh.matrixAutoUpdate = false;
mesh.drawMode = 0;
mesh.onBeforeRender = onBR.apply(that);
mesh.onAfterRender = emptyFn;
mesh.geometry.dispose();
mesh.material.dispose();
geometry.dispose();
material.dispose();
material = undefined;
return mesh;
};

Can you use if statements in .nest(). If not what is the best way to assign labels to array elements so they fit in several groups

Is it possible to use if statements within .nest()? I'm trying to populate a column with several keys, but instead of looking for a name I want to assign a name/value to individual rows based on whether the value in the column is within a certain range of numbers. I have looked at the D3 Nest Tutorial and examples and I'm still having a hard time. This is the code I have at the moment, which isn't working. Any help would be greatly appreciated!
fireballData.forEach( d => {
years.forEach(year => {
const latitude = d['Latitude (deg.)'];
const impactEnergy = d['Calculated Total Impact Energy (kt)'];
const impactTest = +impactEnergy;
const impactLevel = nest('impactTest')
.key(function(d) { if (d.impactTest < .5) {return "impactA" }});
// .sortKeys(d3.ascending)
// .key(function(d) { return d.impactEnergy; })
// .sortKeys(function(a,b) {
// return impactEnergy.indexOf(a) - impactEnergy.indexOf(b); })
// .sortValues(function(a,b) { return ((a.who < b.who)
// ? -1
// : 1);;
const longitude = d['Longitude (deg.)'];
const impactYear = d['PeakBrightnessDate_TimeUT'];
const row = {
//year,
impactLevel,
impactEnergy,
latitude,
longitude,
impactYear
};
console.log(row);
});
});
Just to be a bit more clear, I want to assign five or six impact levels to the column impactLevel based on how big of a value impactEnergy is. This would then leave each row with the impactLevel id (ie impactLevel1) followed by the rest of data of that object. Any solustions or suggestions are great appreciated! I am still very new to d3 and I am still learning the in's and out's.
So for what I was trying to accomplish using .nest wasn't a good solution. The better way of going about creating the new array was to use .map.
export const loadAndProcessData = () =>
Promise
.all([
csv('data.csv')
])
.then(([fireballData]) => {
const minYear = 2015;
const maxYear = 2100;
const years = range(minYear, maxYear + 1);
const data = [];
// Special thanks to Darshit Shah for helping me figure this bit out
const showData = fireballData.map(d =>{
const impactYear = d['PeakBrightnessDate_TimeUT'];
const latitude = d['Latitude (deg.)'];
const longitude = d['Longitude (deg.)'];
const impactEnergy = +d['Calculated Total Impact Energy (kt)'];
const target = impactEnergy;
const type = 'Impact Year: ' + impactYear + ', Latitude: ' + latitude + ', Longitude: ' + longitude;
return {
sorce: (impactEnergy < 0.15 ? "0-0.15" : (impactEnergy < 0.25 ? "0.15-0.25" : (impactEnergy < 0.5 ? "0.25-0.5" : ">0.5"))),
target,
type
}
});
data.push(showData);
return data;
`

Updating geometric value

I'm using 'dat.gui' for user input and want the tableBoardGeometry and the tableLegsGeometry to update in my render method with the values from the input.
Geometric declarations
const boxWidth = 2;
const boxHeight = 0.1;
const boxDepth = 1;
const tableBoardGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const tableLegPosition = (boxWidth * 0.45);
const tableLegHeight = 1.6
const tableLegHeightPosition = (tableLegHeight/2)
const tableLegsGeometry = new THREE.BoxGeometry(0.05, tableLegHeight, 0.05);
Dat.Gui
var gui = new dat.GUI();
var controls = function() {
this.TableWidth = 1;
this.TableHeight = 1;
this.LegsWidth = 1;
this.LegsHeight = 1;
this.RotationSpeed = 0.005;
}
var title = new controls();
gui.add(title, 'RotationSpeed', 0.005, 0.1);
Render Method
const render = () => {
requestAnimationFrame(render);
tableBoard.rotation.y -= title.RotationSpeed;
/* I'd like to update the Geomtrics here depending on user input */
renderer.render(scene, camera);
orbitCamera()
}
I've tried using:
tableBoard.scale.x = title.TableWidth;
and it doesnt work properly because of the variable dependencies for getting the right number. The variable that i'd like to update is tableLegHeightPosition
edit:
The issue is that the sub mesh follows the parent mesh on scaling

Cocos Creator js animate sprite

I have animated a sprite using a sprite sheet and the update function,
like so:
Note: I have dragged the plist into the atlas field of the sprite node (the same node the monster.js script is attached to) in the Ccos Creator UI.
//monster.js
onLoad: function(){
// change monsters face
this.faces['1'] = 'monster1';
this.faces['2'] = 'monster2';
this.faces['3'] = 'Rmonster1';
this.faces['4'] = 'Rmonster2';
}
update: function (dt) {
this.timekeep += dt;
if(this.timekeep > 0.1){
var self = this;
cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
self.getComponent(cc.Sprite).spriteFrame = atlas.getSpriteFrame(self.faces[self.monstersN]);
});
this.timekeep = 0;
this.monstersN++;
if(this.monstersN > 4){
this.monstersN = 1;
}
}
It actually works fine. I have already thought I should export the cc.loader.loaderRes into the onLoad function and save the atlas as a global var instead of loading every time the update is called.
However…seeing that there are built in animation functions, this can’t be the correct solution. So I tried this:
onLoad: function () {
// change monster face
this.faces['1'] = 'monster1';
this.faces['2'] = 'monster2';
this.faces['3'] = 'Rmonster1';
this.faces['4'] = 'Rmonster2';
var self = this;
cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
var sprite = self.getComponent(cc.Sprite);
var animFrames = [];
for (var i = 1; i < 4; i++) {
var spriteFrame = atlas.getSpriteFrame(self.faces[i]);
var animFrame = new cc.AnimationFrame();
animFrame.initWithSpriteFrame(spriteFrame, 1, null);
animFrames.push(animFrame);
}
var animation = sprite.Animation.create(animFrames, 0.2, 100);
var animate = sprite.Animate.create(animation);
sprite.runAction(animate);
});
},
I get this error:
cc.AnimationFrame is not a constructor
So then I tried this:
onLoad: function () {
// change monster face
this.faces['1'] = 'monster1';
this.faces['2'] = 'monster2';
this.faces['3'] = 'Rmonster1';
this.faces['4'] = 'Rmonster2';
var self = this;
cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
self.atlasA = atlas;
});
var sprite = this.getComponent(cc.Sprite);
var animFrames = [];
for (var i = 1; i < 4; i++) {
var spriteFrame = this.atlasA.getSpriteFrame(this.faces[i]);
var animFrame = new cc.AnimationFrame();
animFrame.initWithSpriteFrame(spriteFrame, 1, null);
animFrames.push(animFrame);
}
var animation = sprite.Animation.create(animFrames, 0.2, 100);
var animate = sprite.Animate.create(animation);
sprite.runAction(animate);
},
I get this error:
Cannot read property ‘getSpriteFrame’ of undefined
How can I use cc.animate to change the sprite using the spritesheet I have. All I want to achieve is to move through the plist in the order the images are in the plist, repeated until the monster is put back into the pool it came from.
Here is the solution for anyone who may still be looking.....
cc.AnimationClip.createWithSpriteFrames([sf1, sf2, ...], fps)

Resources