How to set object position to be center of its mass? - three.js

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).

Related

Ammo Threejs Breakable objects debis set material after breaking in fragments

i have initially breakable object with nice texture material loaded.
After breaking in fragments lost original material and load some default material.
Any suggest?
I use code from threejs example with ammo:
Source code:
import * as THREE from "three";
import {ConvexObjectBreaker} from "../jsm/misc/ConvexObjectBreaker";
import {updatePhysics} from "./updater";
export class MagicPhysics {
// Physics variables
gravityConstant = 7.8;
collisionConfiguration;
dispatcher;
broadphase;
solver;
physicsWorld;
margin = 0.05;
convexBreaker = new ConvexObjectBreaker();
// Rigid bodies include all movable objects
rigidBodies = [];
pos = new THREE.Vector3();
quat = new THREE.Quaternion();
transformAux1;
tempBtVec3_1;
objectsToRemove = [];
// Player
ammoTmpPos;
ammoTmpQuat;
tmpTrans;
numObjectsToRemove = 0;
impactPoint = new THREE.Vector3();
impactNormal = new THREE.Vector3();
// kinekt type of movement
kMoveDirection = {left: 0, right: 0, forward: 0, back: 0};
// velocity type of movement
moveDirection = {left: 0, right: 0, forward: 0, back: 0};
tmpPos = new THREE.Vector3();
tmpQuat = new THREE.Quaternion();
constructor(options) {
console.log("MagicPhysics =>", options)
this.updatePhysics = updatePhysics.bind(this);
this.config = options.config;
}
initPhysics() {
// Physics configuration
this.collisionConfiguration = new Ammo.btDefaultCollisionConfiguration();
this.dispatcher = new Ammo.btCollisionDispatcher(this.collisionConfiguration);
this.broadphase = new Ammo.btDbvtBroadphase();
const solver = new Ammo.btSequentialImpulseConstraintSolver();
this.physicsWorld = new Ammo.btDiscreteDynamicsWorld(
this.dispatcher,
this.broadphase,
solver,
this.collisionConfiguration
);
this.physicsWorld.setGravity(new Ammo.btVector3(0, -this.gravityConstant, 0));
this.transformAux1 = new Ammo.btTransform();
this.tempBtVec3_1 = new Ammo.btVector3(0, 0, 0);
}
createRigidBody(object, physicsShape, mass, pos, quat, vel, angVel) {
if(pos) {
object.position.copy(pos);
} else {
pos = object.position;
}
if(quat) {
object.quaternion.copy(quat);
} else {
quat = object.quaternion;
}
const transform = new Ammo.btTransform();
transform.setIdentity();
transform.setOrigin(new Ammo.btVector3(pos.x, pos.y, pos.z));
transform.setRotation(
new Ammo.btQuaternion(quat.x, quat.y, quat.z, quat.w)
);
const motionState = new Ammo.btDefaultMotionState(transform);
const localInertia = new Ammo.btVector3(0, 0, 0);
physicsShape.calculateLocalInertia(mass, localInertia);
const rbInfo = new Ammo.btRigidBodyConstructionInfo(
mass,
motionState,
physicsShape,
localInertia
);
const body = new Ammo.btRigidBody(rbInfo);
body.setFriction(0.5);
if(vel) {
body.setLinearVelocity(new Ammo.btVector3(vel.x, vel.y, vel.z));
}
if(angVel) {
body.setAngularVelocity(
new Ammo.btVector3(angVel.x, angVel.y, angVel.z)
);
}
object.userData.physicsBody = body;
object.userData.collided = false;
this.scene.add(object);
if(mass > 0) {
this.rigidBodies.push(object);
// Disable deactivation
body.setActivationState(4);
}
this.physicsWorld.addRigidBody(body);
return body;
}
createConvexHullPhysicsShape(coords) {
const shape = new Ammo.btConvexHullShape();
for(let i = 0, il = coords.length;i < il;i += 3) {
this.tempBtVec3_1.setValue(coords[i], coords[i + 1], coords[i + 2]);
const lastOne = i >= il - 3;
shape.addPoint(this.tempBtVec3_1, lastOne);
}
return shape;
}
createParalellepipedWithPhysics(sx, sy, sz, mass, pos, quat, material) {
const object = new THREE.Mesh(
new THREE.BoxGeometry(sx, sy, sz, 1, 1, 1),
material
);
const shape = new Ammo.btBoxShape(
new Ammo.btVector3(sx * 0.5, sy * 0.5, sz * 0.5)
);
shape.setMargin(this.margin);
this.createRigidBody(object, shape, mass, pos, quat);
return object;
}
createDebrisFromBreakableObject(object) {
object.castShadow = true;
object.receiveShadow = true;
const shape = this.createConvexHullPhysicsShape(
object.geometry.attributes.position.array
);
shape.setMargin(this.margin);
const body = this.createRigidBody(
object,
shape,
object.userData.mass,
null,
null,
object.userData.velocity,
object.userData.angularVelocity
);
// Set pointer back to the three object only in the debris objects
const btVecUserData = new Ammo.btVector3(0, 0, 0);
btVecUserData.threeObject = object;
body.setUserPointer(btVecUserData);
}
removeDebris(object) {
this.scene.remove(object);
this.physicsWorld.removeRigidBody(object.userData.physicsBody);
}
}

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

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;
}

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;
};

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

If i mirror an image with the canvas multiple times, why does the image lose quality?

mirror() {
const mirrorCanvas = document.createElement('canvas') as HTMLCanvasElement;
const clientRect = this.parentRef.nativeElement.getBoundingClientRect();
const image = new Image();
image.src = this.imageBase64;
image.onload = () => {
mirrorCanvas.width = clientRect.width;
mirrorCanvas.height = clientRect.height;
const ctx = mirrorCanvas.getContext('2d');
if (ctx) {
ctx.scale(1, -1);
ctx.drawImage(image, 0, 0, clientRect.width, clientRect.height);
this.imageBase64 = (mirrorCanvas.toDataURL(`image/${this.format}`, 1));
}
}
}
I have this code, which mirrors the image.
However if i keep mirroring this image, it will lose quality, even if i set the quality to 1.
Why is that?

Resources