Working with Three.js: Incorporating appropriate model scale and size dimensions

Currently, I am engrossed in a three.js project that enables users to import .obj models into a scene. However, I have encountered an issue with two models of different sizes - one scaled to mm and the other having an arbitrary scale. Despite being distinctly diverse in size when viewed in 3D model software like MeshLab and Blender, they inexplicably appear in the scene with identical dimensions!

Q: What could possibly be causing these visibly distinct models to appear the same size in three.js?

Here is evidence showing that the objects are loaded and saved with varying scales

To access the particular three.js project mentioned above, click on this link:

Disclaimer - I would like to clarify that this inquiry is not for self-promotion purposes. I seek assistance as I am struggling to pinpoint the root cause of this issue.

Edit: Subsequent research has unveiled that .OBJ files do not retain unit/scale data consistently across different software platforms. Therefore, my plan is to implement a feature that allows users to specify their own unit dimensions (in mm) when uploading models, which will then be converted to SI units upon upload.

javascriptthree.js.objobjloader

Answer №1

Unfortunately, the Wavefront OBJ format does not include a unit parameter, making it tricky to determine the scale of vertices as they could be relative to any unit of measurement.

Even if two models have the same vertices and scale, they may have been created using different units, resulting in them being imported and displayed at the same size. The modeling software might use its native unit for scale, a custom unit, or ignore it altogether. This lack of standardization makes it challenging to interpret the scale of models.

Some software attempts to address this issue by identifying the software used to create the model from non-standardized comments within the file header. However, parsing these comments can be complex, especially if the original source information is lost due to conversion by third-party software.

To properly import and scale OBJ files, you may need to normalize the geometry, set up an orthographic camera, use object outlines for reference, and potentially allow users to adjust the scale based on a background ruler image.

Alternatively, supporting a format like Collada (DAE files) that embed units could simplify the scaling process. Collada offers better unit support and broader functionality compared to OBJ, with tools like THREE.js providing importers for Collada files.

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

What could be the reason behind the failure of Google Place API integration?

When I try to access the JSON data from the provided link, it works fine. However, when I integrate it into our project, there seems to be an issue. Link to JSON Data ...

javascriptjsongoogle-places-api

"Error message: Antd datepicker is throwing an error stating that date.clone/date.load is not a

I am working on a React app that has a checkbox to disable a datepicker. However, when I use the checkbox to disable it, I am unable to select any date. If I remove the checkbox and its function, there is no error. Currently, the error message I am getting ...

javascriptreactjsnext.jsreact-hooksantd

Vue.Js for a Single Page Application utilizing Two Data Sources

Currently, I am working on developing a Single Page Application using vue.js. My project consists of 2 bundles of pages stored in separate S3 buckets - one public and one private. The public bundle is meant to be accessible to all users, while the private ...

javascriptvue.jslazy-loadingsingle-page-application

Is the Jest function, containing an asynchronous call to User.findAll [using Sequelize with PostgreSQL], failing its test?

Why is my test failing for the getAllUsers function? I suspect that the assertions are executed before all async calls to User.findAll complete. Any suggestions on how to fix this? Here is the code being tested: const { Op } = require('sequelize&apo ...

javascriptnode.jsexpressjestjs

Sizing labels for responsive bar charts with chart.js

I'm encountering a problem with my bar chart created using chart.js - the responsive feature works well for some elements but not all. Specifically, the labels on my bar chart do not resize along with the window, resulting in a strange look at smaller ...

javascriptjquerychart.js

Displaying values from a JSON array in a BIRT report

I'm facing an issue with printing JSON values from a database column in my Birt report. It seems to only display the last line of the JSON array, rather than all the lines before it. Below is the code for my dynamic text field: var phone = JSON.parse ...

javascriptjavajsonbirt

What methods can be used to secure Next.js API routes and prevent them from being directly accessed through the URL

I am seeking a solution for concealing the response data of next.js API routes when accessed through URL. I need to protect certain sensitive information from direct access by users. ...

javascriptsecuritynext.js

Unable to make a POST request to the application

Creating a basic web page with server.js var path = require("path"); var express = require("express"); var app = express(); var bodyParser = require("body-parser"); app.listen(8000, function() { console.log("server is listening on port 8000"); }) app.us ...

javascriptnode.jsexpress

Why is three.js looking at the mouse? What's the reason behind it?

I'm struggling with grasping some key principles in my understanding of three.js. Currently, I have an interesting setup where I've managed to make a virtual eyeball follow the user's mouse cursor. The concept is inspired by a tutorial from ...

three.jsgeometry

What is the best way to dynamically refresh only the images on a webpage using Java, without causing any disruption to the other content on the page?

Is there a way to dynamically update only the images on a page from our database using Java, without impacting the other content on the page? ...

javajavascript

Specify a preset selection time in a TextField of time type in Material UI

I am looking to establish a default time for a textfield of type time in Material UI. My requirement is that before the user clicks on the picker, no time should be pre-set, but once they click, 08:00 should appear as the default time to choose from. View ...

javascriptreactjsmaterial-uitextfieldpicker

Execute the component function located within one page using another page

Can someone help me understand how to trigger OnSwipe from inside a different JS file named CardFooter.js? This file contains a button with an OnClick event that triggers OnSwipe from the preceding JS file called CardItem.js. Both of these files are includ ...

javascriptreactjsnext.js

Resolving the clash between LookAt and controls within three.js

I am in the process of developing an application that showcases a 3D model of a building, and so far it's functioning well. I attempted to manipulate the "PerspectiveCamera" using LookAt, but I discovered that LookAt does not function properly when I ...

javascriptcamerathree.js

Encountering a problem when trying to send an API request for multer in order to save

I encountered an issue with my node API that uses multer to store files. I am receiving an error when calling it and seeking assistance. Below is the code snippet along with the specific error message - Code - const storage = multer.diskStorage({ d ...

javascriptnode.jsexpressmulter

Uncertain about the unique JavaScript method of defining a function

I am exploring various ways of defining a function, but I recently stumbled upon a method that seems unfamiliar to me. As a newcomer in this field, can someone help me understand how this specific function declaration works and when it should be used? The ...

javascripttypescriptfunctionarrow-functions

order in which child objects are drawn

Encountering the following issue: I am attempting to create rings around Saturn, but they appear to be rendered in an incorrect order: https://i.sstatic.net/rVg3H.jpg The problem lies in how each planet is constructed. Each planet is a child of a differ ...

javascriptthree.js

`"Error: posts.map is not a function" - What steps can be taken to resolve this issue?`

While working on fetching data from my local Drupal instance in React JS, I encountered a situation where I needed to pass the data from Drupal using the JSON API module which sends the data in JSON format. You can view the JSON API data in the following i ...

javascriptreactjsarraysjsondrupal-9

What steps should I take to solve this wheel-related issue in my Vue 3 application?

I have been developing a Single Page Application (SPA) using Vue 3, TypeScript, and The Movie Database (TMDB). Currently, I am tackling the implementation of a search feature and I've encountered a bug. The "search-box" component is located in src&b ...

javascriptvue.jsvuejs3

Interface specifying a React.ref property

When attempting to use a string as the ref, I encountered a warning when trying to access ref?.current Property 'current' does not exist on type 'string' What should be used for the ref prop in the interface? I am uncertain of the upfr ...

javascripttypescript

Utilizing JSON format, handling special characters, and storing data in a database

My friend approached me with a question and although I wanted to offer immediate help, I realized that seeking advice from others may provide better solutions. Situation: Imagine there is a Form that includes a RichText feature: DHTMLX RichText (). This R ...

javascripthtmljsonajax