I am currently working on dynamically loading object files using THREE.OBJLoader and positioning them in the center of the scene or canvas to ensure the entire object is visible in the camera view. Since the objects are dynamic, I do not have fixed height or width data.
What I have achieved: https://i.sstatic.net/z2H3D.png
What I am aiming for: https://i.sstatic.net/o8E4h.png
References I have consulted so far:
- Three.js zoom to fit width of objects (ignoring height)
How to Fit Camera to Object
Smart Centering and Scaling after Model Import in three.js
Adjusting camera for visible Three.js shape
Calculate camera zoom required for object to fit in screen height
Move camera to fit 3D scene
Three.js calculate object distance required to fill screen
How to calculate the z-distance of a camera to view an image at 100% of its original scale in a 3D space
Code Snippet:
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
// scene
scene = new THREE.Scene();
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl(path);
mtlLoader.setPath(path);
mtlLoader.setMaterialOptions({
ignoreZeroRGBs: true
});
mtlLoader.load(path, function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath(path);
objLoader.load(path, function(object) {
var helperBox = new THREE.BoundingBoxHelper(object, 0x888888);
helperBox.update();
scene.add(helperBox);
//Scene
scene.add(object);
var boxFrmScene = new THREE.Box3().setFromObject(scene);
var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x);
var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
var pos = scene.position;
var boundingSphere = boxFrmScene.getBoundingSphere();
var center = boundingSphere.center;
camera.position.set(center.x, center.y, (dist * 1.1));
camera.lookAt(pos);
}, function(error) {
console.log(error);
});
}, function(error) {
console.log(error);
});
The object I used can be found here: . I am seeking guidance on the correct approach to solve this issue, especially since I am not well-versed in 3D mathematics. Any help would be greatly appreciated.
PS: Still struggling with 3D math concepts.
Edit: I have attempted the solution mentioned in this:How to Fit Camera to Object but it has not resolved my problem. In fact, it's flipping my object upside down. My goal is to position the object in the center of the camera.
Edit 2: I have made some progress on this issue. The object is now fully visible within the camera frustum. Next, I need to find a way to center it. I have updated the code snippet below scene.add(object);
var pos = scene.position;
camera.position.set(pos.x, pos.y, 100);
camera.lookAt(pos);
var boxFrmScene = new THREE.Box3().setFromObject(scene);
var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x);
var fov = camera.fov * (Math.PI / 180);
var distance = Math.abs(height / Math.sin(fov / 2));
camera.position.set(pos.x, pos.y, distance + (height / 2));
camera.updateProjectionMatrix();