Instructions for importing a JSON 3D model and placing it at the center in Three.js

Is there a way to accurately load a JSON object and position it at the origin? I have tried using object.position.x and mesh.position.x but haven't been successful in aligning the object with the origin. My goal is to calculate the maximum and minimum x, y, and z values of the object in order to create a bounding box that will encompass the entire object. However, my current method does not work when the object's position is not at the origin. Is there a better approach to achieve this desired result?

javascriptjsonthree.js

Answer №1

If the bounding box attribute of the mesh geometry is not defined, you can use the computeBoundingBox() method to set it. Here's how you can achieve this using Vector operations:

var center = new THREE.Vector3();
center.x = mesh.geometry.boundingBox.min.x + (mesh.geometry.boundingBox.max.x - mesh.geometry.boundingBox.min.x) / 2;
center.y = mesh.geometry.boundingBox.min.y + (mesh.geometry.boundingBox.max.y - mesh.geometry.boundingBox.min.y) / 2;
center.z = mesh.geometry.boundingBox.min.z + (mesh.geometry.boundingBox.max.z - mesh.geometry.boundingBox.min.z) / 2;

mesh.position.set(-center.x, -center.y, -center.z);

This will align your mesh to the origin point.

Answer №2

Invoke mesh.geometry.center(), which will adjust the geometry to be centered at the origin point.

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

Send a redirect after a certain delay to a URL stored in a variable outside of the current scope

Upon making an ajax request, the JSON response contains a link that needs to redirect the user to another page after 3 seconds. The current approach used is: response = JSON.parse(res); var link = response.link; setTimeout("window.location.href=link",300 ...

javascript

The resizing function on the droppable element is malfunctioning on Mozilla browsers

I've been working on making one div both droppable and resizable. Surprisingly, everything is functioning perfectly in Chrome but not in Firefox. If you'd like to see the issue for yourself, here is my jsFiddle demo that you can open in Firefox: ...

javascriptjqueryhtmlcss

What is the importance of having Express in the frontend?

As someone who is relatively new to the world of JavaScript and web applications, I recently came across an Express web application project that contained a public directory, client directory, and server directory. This has raised some questions for me. I ...

javascriptnode.jsreactjsexpress

Error message: Unchecked runtime error - Unable to retrieve data from the specified URL. The extension manifest must include permission to access this particular host. This issue is occurring in manifest

Can someone help me out? I keep on receiving the error messages Unchecked runtime.lastError: Cannot access contents of url. Extension manifest must request permission to access this host. and Unchecked runtime.lastError: Could not establish connection. Rec ...

javascriptgoogle-chrome-extensionmanifest.json

Algorithmically alter the view of the webvr camera

I am looking to dynamically change the position of a view within a webvr scene. My approach involves using the position.add method. Below is the code snippet that demonstrates how I programmatically move the camera: <a-entity position="33 0 -33" rota ...

javascriptaframewebvr

The .each function in JavaScript is creating conflicts with other classes on the webpage

HTML <ul class="courseDates"> <li class="dateOne col-sm-2"> {tag_course date 1} </li> <li class="dateTwo col-sm-2"> {tag_course date 2} </li> <li class="dateThree col-sm-2"> { ...

javascriptjqueryeach

Simple guide to returning values from PHP using AJAX

I have a script on my login page that uses AJAX to send data to PHP, and PHP then returns whether the login was successful or not. I am curious about how I can modify my scripts to also send back two variables and receive them in my login JavaScript so tha ...

phpjavascriptjqueryajaxjson

Designing a website similar to sevenly.org using jquery: A step-by-step guide

My understanding of javascript and jquery is at a beginner level. I am interested in creating a design similar to Sevenly, where one page/div moves over another. I'm not sure where to begin with this. Any advice or ideas on how to implement this effec ...

javascriptjqueryhtmlcssuser-interface

Is it possible to extract information from a string with regular expressions?

As I sift through a myriad of arbitrary "Header" data in node. Here's an example of what it looks like: _Aa:GA1.1.78037747.867108, 44907=5xyz; Webstorm-a36041d5=9fbb-48e9-b19e-e3f0a3282151; srce=coolernode; nsid=1234; cookie_data=T%3D1; _gat_PP= ...

javascriptnode.js

It's recommended to utilize the callback feature with setLoggedIn to ensure the previous state is captured effectively, as illustrated below:

To ensure capturing the previous state when using setLoggedIn, it is recommended to utilize the callback option. This will help in keeping track of changes and ensuring smoother functionality: ...

javascriptreactjsbuttonreact-hooks

Combining ReactJS event handling for onClick and onKeyDown into a single handler for TypeScript

To ensure accessibility compliance, I am incorporating onKeyPress handlers into my application. However, I am facing a challenge with interactive <div /> elements. Here are the event handlers I want to trigger on click: const handleViewInfoClick = ( ...

javascriptreactjstypescript

Is the memory usage of node.js proportional to the number of concurrent requests, or is there a potential memory leak?

Running the following node.js code: var http = require('http'); http.createServer(function(req,res){ res.writeHead(200,{'Content-Type': 'text/plain'}); res.write("Hello"); res.end(); }).listen(8888); Upon starting the server ...

javascriptnode.jsmemory-leaks

Tips for making WebDriver pause until Sencha AJAX request finishes

While testing a page with Selenium WebDriver, I encountered an issue related to the Sencha JavaScript library being used on the underlying page. The problem arises when I input a value into a field and an AJAX call is made to validate that field. If the va ...

javascriptajaxextjsselenium-webdriver

Attempting to transmit JavaScript information to my NodeJS server

Having some trouble sending geolocation data to NodeJS through a POST request. When I check the console log in my NodeJS code, it's just showing an empty object. I've already tested it with postman and had no issues receiving the data. The probl ...

javascriptnode.jsexpress

Error: $controller does not function as a controller within another controller

I recently started learning Angular JS and attempted to call one controller within another, but encountered the following error: ionic.bundle.js:21157 TypeError: $controller is not a function at new <anonymous> (http://localhost:8080/itravel/www/js/ ...

javascriptangularjsdependency-injectionangularjs-scopeangularjs-controller

Identifying when an element hovers over a particular section

I am facing an issue with the side dot navigation on my website. The navigation is standard with a fixed position, but I also have two types of sections with different backgrounds - one white and the other black. The problem arises when the dots are not vi ...

javascriptjquery

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

javascripthtmlcssnivo-slider

retrieving data of an Android application using PHP

Does anyone know of a way to retrieve information about Android apps such as the app's ID in the market, category, pricing, icon, and more from Google Play? I'm aware that there is a method for the App Store on iOS where you can access app inform ...

phpjsoncakephpapp-storegoogle-play

Fixing blurry text on canvas caused by Arbor.js mouse event issues

Currently, I am utilizing arborjs in my project. The text within the canvas is created using fillText in html5. While everything functions correctly on a Retina display MacBook, the text appears blurry. To address this, I applied the following solution: v ...

javascriptjqueryhtmlcanvas

React Native: Unable to update React state during logout process

Currently, I am working on a mobile app and learning new practices in React every day as a junior developer. Today, I need assistance with implementing a User Logout function. In my Profil.js file, I have the Logout function inside an IconButton that gets ...

javascriptreactjsreact-nativestatelogout