Comments (9)
Hey,
I also had this topic on my mind the other day. It be a great contribution to the example!
Here we are dealing with two separate topics.
- Is there a way to center the camera at the selected object?
- Is there a way to center the camera at the geometric center of the scene when an IFC is imported?
Maybe we can start with the first topic (as I think it is more important) and then think about the second one. Your implementation is not working because for the example I am using smooth zoom. This object controls the camera and is represented by the controls
object (in three-scene.js
), and it can be controled using its target
attribute. Something like this should work:
function pick(camera, controls) {
[...]
console.log(pickedObject._Data);
const pos = getCenterPoint(pickedObject);
controls.target.set(pos.x, pos.y, pos.z);
}
}
canUserPick = false;
}
function getCenterPoint(mesh) {
var geometry = mesh.geometry;
geometry.computeBoundingBox();
var center = new THREE.Vector3();
geometry.boundingBox.getCenter( center );
mesh.localToWorld( center );
return center;
}
With this, the camera should look at the selected object, but the transition is really abrupt. We have several options,for me, the ideal behaviour would be that when clicking on an object, the camera does not move, but if I later try to orbit, the centre of orbit is that object. Hopefully this makes sense. 😅 This is the behaviour in a lot of 3d apps, including Revit and BIMvision. I'm not sure if the following can be done, as I haven't tried it, but it's an idea. Feel free to try anything else you come up with!
This means changing the target
to the selected object, and then compensating the rotation of the camera with the angle that form the projection of both objects to the camera. This is just considering the horizontal rotation; then, we also have to calculate the height difference between both target
objects and compensate it with a vertical rotation.
(Behold my amazing mouse-drawn sketch). Alfa is the horizontal rotation, Beta is the vertical rotation.
This way we can hopefully get the abovementioned behavior.
There are also other cool functionalities we can implement (here or in another issue):
- Camera animation that moves the camera to the selection.
- Camera animation that makes zoom extent to the scene.
from web-ifc-viewer.
Sounds like a plan! I will try to find time to work on it in the coming days. It will take me a while before I can build something that's worth a pull request, so if you have a plan ready for implementation, you can just start and I can chime in:)
Best regards
Kristoffer
from web-ifc-viewer.
Hello! Sorry, I haven't had time to look more into this:( If you have a plan of how to implement this I think you will have a solution up and running much faster than what I can deliver :)
from web-ifc-viewer.
This was already solved by @Voffknur.
from web-ifc-viewer.
If you prefer to stick with the "zoom extent" functionality, you can forget about picking and create a new button that gets all the bounding boxes or centers of the meshes in the scene (using, for example, the getCenterPoint
logic of my previous comment), and calculate with trigonometry the position of the camera so that it targets at the central point of the scene and has all the objects within its angle view.
from web-ifc-viewer.
Awesome! Thanks for the detailed suggestion.
Now when I click on an object the camera moves slightly and the rotation center is set to that object and I can easily zoom to it.
The only change to your suggestion was to use controls.target = getCenterPoint(pickedObject);
instead of controls.target.set(..);
which resulted in an error (see error messages below).
// scene-picker.js
function pick(camera, controls) {
if (canUserPick && importedIFC.children) {
if (pickedObject) {
pickedObject.material = pickedObjectSavedMaterial;
pickedObject = undefined;
}
raycaster.setFromCamera(pickPosition, camera);
const intersectedObjects = raycaster.intersectObjects(importedIFC.children);
if (intersectedObjects.length) {
pickedObject = intersectedObjects[0].object;
pickedObjectSavedMaterial = pickedObject.material;
pickedObject.material = pickedObjectMaterial;
console.log(pickedObject._Data);
// Slight modification of proposal (even though this suggestion results in printed warning)
controls.target = getCenterPoint(pickedObject);
}
}
canUserPick = false;
}
// Proposed function as is
function getCenterPoint(mesh) {
var geometry = mesh.geometry;
geometry.computeBoundingBox();
var center = new THREE.Vector3();
geometry.boundingBox.getCenter( center );
mesh.localToWorld( center );
return center;
}
// three-scene.js (reference to pick)
[...]
pick(camera, controls);
For some reason controls.target.set(..)
gave me an error (shown below) so I opted for controls.target = getCenterPoint(pickedObject);
.
The controls.target = getCenterPoint(pickedObject);
does however print a warning about the target.set being immutable, but at least it works. I am guessing there is a better way of handling this?
I agree that moving the camera while picking is not ideal. The instant camera-jump whilst clicking on items in the viewer looses its charm after a few clicks :) So I propose that this particular functionality could be implemented as a specific key or special keypress combination as opposed to part of the "pick" method. Maybe it could be a part of the "smooth-zoom.js" lib?
Let me know what you think,
Best regards
Kristoffer
from web-ifc-viewer.
In your case controls.target.set(..)
is not working because I made a mistake in the definition of the controls in three-scene.js
. 😅 Now it should work.
Yes, I agree. We can assign the extend to selection
functionality to a button or keyboard press. Hopefully, you can wrap this functionality in a separate file / module like extend-to-selection.js
(maybe doing the selected object global, as we probably want to access this object from different places in the application), so even though we bind it to a specific button, other users of the library can easily change / plug / unplug it.
PD: Only making the extend to selection
functionality would be really nice already, but if you make this transition animated, it would be spectacular. 😉 Just an idea.
from web-ifc-viewer.
Hey @Krande! Is there any news on this? The library suffered some breaking changes, but they should not affect what you are doing, as IFC.js is now focused on having this kind of code. Just remember to pull the latest changes, which have been drastic.🙂 Also, if you still plan to do this, feel free to drop a draft PR to let us help you. Cheers!
from web-ifc-viewer.
Hi @agviegas! Sorry, I'm not sure I understood your last comment, is this zoom to all
or extend to selection
a method that's available through the web-ifc-viewer
API? I'm investigating this topic but I didn't find any solution out of the box.
from web-ifc-viewer.
Related Issues (20)
- getItemProperties returns RefLatitude/RefLongitude as undefined
- IfcSelection Error: Cannot read properties of undefined (reading 'mesh') HOT 3
- unexpected token 'export' trying to import in a sveltekit typescript app HOT 2
- TS + React + WP5 resolve errors HOT 1
- ComputeAllPlanViews() Set maximum size exceeded HOT 2
- Floorplan: showing the same planview for each floorplan || Can't use the measure tool on those plan views HOT 3
- Rendering Issue with Transparency for Certain Items (e.g., Windows) HOT 1
- Wireframe view from the clipped zone HOT 1
- IFC Viewer in Flutter App example HOT 1
- setwasmpath error for web-ifc-viewer in Gatsby.js HOT 2
- this.wasmModule.OpenModel is not a function HOT 3
- Request to Reupload Documentation for Web-Ifc-Viewer HOT 6
- No file in the viewer HOT 5
- Documentation availability HOT 1
- Import issue when using web-ifc-viewer 1.0.218 HOT 2
- Bim Model loading stuck at 15% HOT 2
- Problem with selecting element in IFC files v4.3 HOT 1
- Failed to resolve module 'three' and 'obc' in Express.js server with using Ifc.js HOT 1
- OBC.Components dispose() failed HOT 2
- Inquire about the LOD related matters of IFC HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web-ifc-viewer.