What is the best way to ensure all models are loaded with identical sizes and camera positions?

I am in the process of setting up a website that loads 3D models in PLY format, using Three.js along with its PLYLOADER.

However, I am encountering an issue where each model is loading in a different position. While I have managed to align them perpendicularly to the ground, some appear distant from the camera, and others seem rotated around the Y-axis (not at their center).

Below is a snippet of my HTML code:

<div id="WebGL-output"></div>

And this is the segment of my JS code:

<script type="text/javascript">
    // Code block for initializing scene, camera, controls, etc.
</script>

I'm seeking assistance on ensuring all models load with identical camera positions, centralized alignment, and consistent size.

Additionally, if transitioning to a different file extension would yield better results, I am open to suggestions.

Thank you in advance.

EDIT: Following guidance provided by @alex, I have made improvements to my code, resulting in well-centered models. The only aspect remaining is establishing a fixed camera position once the model is loaded.

Answer №1

Currently, I can see two possible solutions from what I understand:

  1. Your objects are not properly centered. The best solution would be to open the model files in a 3D editor and ensure they are all set to the same size with consistent center points.

  2. After loading the model, add it to an Object3D and locate its center.

You can find more information about this in the documentation on Object3D.

In the code below, "this.objectAll" refers to the Object3D object. This object is placed inside a box, and we align the controls to look at the center of that box. If all models are consistent, this should solve the issue.

this.boundingBox = new THREE.Box3();
this.boundingBox.setFromObject(this.objectAll);
this.boundingBox.center(this.controls.target);

Wishing you the best of luck!

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

Placeholder for empty values in Angular UI mask

Currently, I have implemented the angular ui mask directive for a date field. However, it is inserting underscores as a placeholder. Is there a way to display nothing in the placeholder instead? ...

Converting a Matrix4 to a Matrix3 in ThreeJS: A Step-by-Step Guide

Seeking guidance on converting a Matrix4 to a Matrix3 in ThreeJS. Attempting to obtain the 'inverse view rotation' matrix. My understanding is that the following steps are required: 1) Convert the camera.matrixWorldInverse to a Matrix3 2) In ...

Fleeting hover effect

When using the CSS "hover" selector, a temporary style is applied to an element, but it's not permanent: div:hover { background-color: red; } Attempting to achieve the same effect with JavaScript can be more complex and challenging when dealing with ...

GraphQL is not capable of fetching data directly from a mysql database

Trying to incorporate GraphQL with MySQL in a Node.js Express server has been my recent challenge. Unfortunately, every time I execute my query, an error surfaces. Here is the specific error message: { "errors": [ { "message&quo ...

Is there a way to listen for the validation of an HTML5 form before it is submitted?

I've been trying to figure out a way to detect if a form has been validated, but so far, no luck. For example: User clicks the submit button The form is invalid, so the submit event doesn't occur At this point, I want to add the class .form-fe ...

The Jquery click event is not triggering after the initial click

I am dealing with some HTML content: <div class="post-container self"> <a href="/user/Wiz"> <img class="avatar" alt="Profile Picture" src=""> </a> <div class="post-body"> <div class="post" style ...

Validating Inputs with an Array of Values in my Angular 2 Application

I have been exploring ways to retrieve data from an array of values instead of a single value when using [(ngModel)] binding in my Angular 2 application. The current setup functions perfectly with a single value, as shown below. The data is pulled from the ...

Controlling the Output in Typescript without Restricting the Input

I am interested in passing a function as a parameter, allowing the function to have any number of parameters but restricting the return type to boolean. For example, a function Car(driver: Function) could be defined where driver can be ()=>boolean or ( ...

Adjust the size of the font for the placeholder text

I've been attempting to adjust the font size of the placeholder text. I added the font size property to the listed classes below, but for some reason, it's not taking effect. Could you please advise me on how to resolve this issue so that I can ...

Utilizing the nativescript-loading-indicator in a Vue Native application: Step-by-step guide

I am attempting to incorporate the nstudio/nativescript-loading-indicator package into my Vue Native App, but I am experiencing issues with its functionality. import {LoadingIndicator, Mode, OptionsCommon} from '@nstudio/nativescript-loading-indicato ...

Unable to access the users property of the discord.js client

I encountered an issue with the blacklist command that I can't seem to resolve, despite trying multiple solutions. Discord.js version: 13.6.0 Node.js version: 16.13.2 Command snippet: const { MessageEmbed } = require('discord.js'); mod ...

Why is Selectpicker (bootstrap-select) not functioning properly and displaying a disabled menu?

Currently, I am attempting to implement the selectpicker feature from Bootstrap-Select in order to create a dropdown menu that supports multiple selections. Below is the snippet of code that I have included in my HTML file: <select class="selectpicker" ...

Store a JSON object without creating a reference to it

My issue is presented in a much simpler manner. Here is the json (you can view it here if you wish) {"resource":[{"id":"1408694994","obj":[{"id":"1","action":[{"name":"ON","id":"301"},{"name":"OFF","id":"302"}]},{"id":"2","action":[{"name":"ON","id":"303 ...

The onChange method seems to be malfunctioning when used with radio buttons

I'm having an issue with my form's radio button. It is supposed to do something when the selected item changes, but it only works when the page first loads and not when I select a different item. Below is the code snippet: <div key={item} cla ...

Issue with disabling elements using jQuery in IE 10

I'm encountering a problem with using attr('disabled', 'disabled') or prop("disabled", true) in Internet Explorer when using jQuery. This works fine in Firefox and Chrome but not in IE. Any suggestions? I'm attempting to disa ...

How can I effectively remove event listeners while still preserving the context in a stimulus controller that listens to events multiple times?

My HTML page has the following controller setup: ... <div data-controller="parent"> <div data-target="parent.myDiv"> <div data-controller="child"> <span data-target="child.mySp ...

What are the possible reasons for the failure of JavaScript when called dynamically through Ajax?

I've always been a big supporter of the JavaScript code for sorting tables. It's incredibly effective. However, I recently encountered an issue while trying to make the sorting function work with Ajax. I have a div layer on my main page that fe ...

Using $npm_package_ notation to retrieve information about the version of a private package

When using Npm, you can easily access package information from the package.json file by using a helpful prefix. For example, you can extract the react version with $npm_package_dependencies_react to find the current version of react listed in the file. Ho ...

Programming the tab pages within Chrome

By using JavaScript, I successfully opened a new tab at www.blogger.com from the Main.html page. <script> window.open("https://www.blogger.com"); </script> I am now on the blogger page. My goal is to automatically scroll to the end of the bl ...

Creating form inputs dynamically in HTML and then sending them to a PHP script programmatically

On my webpage, users can click a button to add new form inputs as needed. However, I'm running into an issue trying to access these new inputs in the PHP file where I submit the data. Here is the code snippet for the button within the form on the pag ...