Alignment issue with ThreeJS Collada file

I'm currently diving into the world of ThreeJS and I am experimenting with loading collada files into a viewer. My journey began by replicating the code from the Elf colladaLoader demo.

I successfully managed to display the model inside an 800px square modal window, and it looks fantastic. However, I encountered an issue when attempting to load other .dae files - they do not appear centered.

The demo was clearly set up with precise configurations to ensure the object and camera are correctly positioned. Unfortunately, I cannot predict the files I will be loading in advance.

Is there a method to instruct the camera to focus directly on the object, centering it, and move it back enough to fill the entire container?

javascriptthree.jscollada

Answer №1

Utilizing camera.lookAt( object.position ) will handle most of your requirements. However, finding the ideal camera distance is a bit more subjective. Here is a common approach:

object.updateMatrixWorld();
const box = new THREE.Box3().setFromObject(object);
const size = box.getSize().length();
const center = box.getCenter();

object.position.x += (object.position.x - center.x);
object.position.y += (object.position.y - center.y);
object.position.z += (object.position.z - center.z);
camera.position.copy(center);
camera.position.x += size / 2.0;
camera.position.y += size / 5.0;
camera.position.z += size / 2.0;
camera.near = size / 100;
camera.far = size * 100;
camera.updateProjectionMatrix();
camera.lookAt(center);

For further details, refer to the THREE.Object3D documentation in three.js r89.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an issue while following the Amadeus JavaScript beginner's guide

I have recently started working with Amadeus and encountered a roadblock at the initial stage. I am using the test URL (test.api.amadeus.com). Upon implementing the example code with my API key and API secret, I am receiving the following error: ClientErro ...

javascriptphpnode.jsamadeus

React version 18.2.0 and Next.js version 13 faced an issue with hydration failure due to the initial user interface not matching. This problem

Upon opening the page, I encounter an error when focusing on the input element right away. However, if I wait a few seconds before focusing on the input element, the error does not occur. Unfortunately, I have been unable to resolve this issue. Interesting ...

javascriptreactjsnext.js

Tips for accessing the initial value within JSON curly braces

In my code, there is a function that returns the following: { 'random_string': '' } The value of random_string is an unknown id until it is returned. How can I extract this value in JavaScript? Appreciate any help. Thanks. ...

javascriptjson

What is the best way to retrieve a specific value from a JSON file using a numerical identifier?

Imagine a scenario where there is a JSON file structured like this: { "data": [ { "id": "1", "name": "name1" }, { "id": "2", "name": "name2" } ] } If you know the ...

javascriptjson

Tips for displaying a slideshow within a div using JavaScript

When the HTML loads for the first time, the div slideshow remains hidden until a button is clicked. Any suggestions on how to display the first div without requiring a button click? var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { s ...

javascriptvue.jsslideshow

Event emitting from a parent Vue.js component

I can't figure out why my code is not functioning properly. I have an event called 'leave' that should be triggered on blur. The components show up correctly, but the event doesn't fire when leaving the inputs. Vue.component('te ...

javascripthtmleventsvue.jscomponents

Vue fails to detect changes in an Array

Hey everyone, I'm currently working on a Vue project and I have been attempting to create a recursive tree from a flat list. My goal is to toggle the expanded property of each item when clicked, but for some reason, it's not updating. The issue ...

javascriptvue.jsvuejs2

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...

javascriptjqueryhtmlcss

The admin-ajax.php file in WordPress consistently fails to return any value other than

I developed a WordPress ajax plugin, but I am facing an issue where admin-ajax.php always returns 0 and the plugin doesn't work as expected. Here is the code I have implemented: add_action( 'wp_ajax_example_ajax_request', 'example_aja ...

javascriptphpjqueryajaxwordpress

Positioning the comments box on Facebook platform allows users to

Need assistance, I recently integrated the Facebook comments box into my Arabic website, but I am facing an issue where the position of the box keeps moving to the left. Here is an example of my website: Could someone please suggest a solution to fix the ...

javascriptcssfacebookfacebook-comments

Troubleshooting problem with JSON object and HTML paragraph formatting

Attempting to incorporate my JSON object value into <p> tags has resulted in an unexpected change in formatting. The output in the console.log appears as shown in this image LINE INTERFACE UNIT,OMNITRON DX-64 LIU Item ...

javascripthtmljson

In React Router, redirect when location.state is not defined

import React, { useState } from "react"; import { Redirect } from "react-router-dom"; function Update(data) { if(!data.location.state) return <Redirect to="/"/> const [name, setName] = useState(dat ...

javascriptreactjstypescriptreact-router-dom

What is the best way to send an event handler to a sibling component?

I am facing a situation where I have an eventHandler that needs to be handled by its sibling component. The <Brains /> component contains several properties (such as this.randomNumber = 555 inside the constructor) that are required for the proper fun ...

javascriptreactjs

Is it true that JavaScript Date.parse doesn't recognize Alaska Timezones?

When using JavaScript's Date.parse, it handles Pacific Time without any issues: Date.parse('June 20 2015 10:22 PDT') However, it encounters issues with Alaska Time: Date.parse('June 20 2015 10:22 AKDT') Does anyone have a relia ...

javascripttimezone

React: the value of this.props.item has not been defined

When attempting to pass an array from one component to another and then to a third component, the item is showing up as undefined. In my App.js file, I am trying to pass this.state.searchResults to the SearchResults component. import React from 'rea ...

javascriptreactjs

Error: The variable 'err' is undefined in the mongoose mongodb code

Every time I try to execute this code, an error pops up stating that err is undefined Below is the code snippet causing the issue: app.post('/tinder/cards', (req, res) => { const dbCard = req.body; Cards.create(dbCard, (err, data) => { ...

javascriptdatabasemongodbmongooseerror-handling

Using jQuery to show text upon hover using a `for` loop

I'm currently working on a webpage and incorporating a feature where hovering over specific div elements triggers the display of certain text in another div. There are 5 elements that I want to make hoverable and show text upon interaction. After imp ...

javascripthtmljquerycss

Having trouble modifying the Input with split() in angularJS

I am faced with a nested JSON object that contains an array as one of its properties. Each item in the array is separated by a ';'. My goal is to use ';' as a delimiter to split each array item and make necessary changes. However, I am ...

javascriptarraysangularjsjsonangularjs-scope

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

javascripthtmlarraysvue.js

How to fetch an image from a web API using JavaScript

I have recently entered the world of web development and I am facing an issue where I am trying to retrieve a Bitmap Value from a web api in order to display it on an HTML page using JavaScript. However, despite my efforts, the image is not getting display ...

javascripthtmlasp.net-web-api