Issue with Three.js bounding box when importing a Blender JSON model

I am encountering some challenges when it comes to manipulating the objects imported from Blender. It seems like the pivot point is always set at 0,0,0 instead of the current position of the object. Despite correctly positioning and importing the objects in the Blender scene, I face difficulties when trying to rotate them.

To further investigate, I have utilized BoundingBoxHelper. However, the bounding box does not appear surrounding the object as expected; instead, it is centered in the world with a default size of 1 unit.

Below is the code snippet used to load the alien model:


texture6 = THREE.ImageUtils.loadTexture('images/alien1.png', {}, function() {
        renderer.render(scene, camera);
    });

    loader = new THREE.JSONLoader();
    loader.load( "models/alien1.js", function( geometry ) {
        geometry.computeFaceNormals();
        geometry.computeCentroids();
        geometry.computeBoundingBox();

        var mat = new THREE.MeshBasicMaterial({map: texture6,transparent: true, color:0x00FF00} );
        var mesh = new THREE.Mesh( geometry, mat );
        scene.add(mesh);

        bbHelper = new THREE.BoundingBoxHelper( mesh, 0xff0000 );
        scene.add( bbHelper );
    });

Observing the outcome: (The red bounding box should encapsulate the green alien but appears in the center of the scene)

Do you have any suggestions on how to address this issue?

Answer №1

It is essential to invoke bbHelper.update().

If the object is in motion, ensure the invocation happens within the render loop.

three.js version 59

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

Instructions for removing and recreating an input field along with its parent elements when the value of a Select tag is changed

I currently have a table with four fields, as illustrated below: Semester | Exam Status | GPA | Fee Status My query is regarding the behavior when changing the value in Exam_Status: I noticed that the Select tag-> does not clear automatically. Specifi ...

Execute two queries using MongoDB and Node.js

I'm currently facing a minor issue that I can't seem to resolve. My challenge is to pass two queries to my add_people.ejs file. While I can successfully pass one query, I am unsure of how to pass the second one. Here is an example of what I have ...

Using node.js for synchronous callbacks in node.js programming

I am new to node.js, and from what I've gathered, each callback creates a new event that can be executed in parallel. For instance, consider the following code with a callback: function testFunction(var1){ s3.head(var1, function(data, err){ ...

JSON Novice - persistently storing data in JSON during browser refreshes

My AJAX poll was set up following a guide found here: http://www.w3schools.com/php/php_ajax_poll.asp Instead of storing the poll entries from an HTML radio button in an array within a text file as demonstrated in the tutorial, I wanted to save them in a J ...

Utilizing modular structure for efficient jQuery AJAX request

Seeking guidance on optimizing multiple GET ajax calls, where each function contains repeated $.ajax({}) code lines. Is it feasible to create a single $.ajax({}) function and utilize it in all functions instead of duplicating the code? Perhaps something ...

Toggle draggable grid in jQuery

Imagine I have a grid set up using the following code: $( "#dragIt" ).draggable({ grid: [ 15, 15 ] }); Now, there is a checkbox located below the div. Is there a way for me to switch the grid on and off by toggling the checkbox? I've searched the of ...

Extracting POST information through PHP's AJAX Request

I am facing an issue where I keep receiving null values when using the following code: Here is my Ajax request: formData = { u: "3959eeadb32e02b85a792e21c", id: "6d7613df26" }; $.ajax({ ...

Using React.js - Discover the best way to incorporate a function within a child component to unmount a different child component from the same parent, and then mount a new component in its place

Consider this scenario: import React, { Component } from 'react'; import BodyContent from './BodyContent'; import BottomOne from './BottomOne'; import BottomTwo from './BottomTwo'; class App extends Component { re ...

To link the information within the angularJS controller

I've recently generated a div element dynamically within the controller function of my AngularJS application. However, I'm facing an issue where the data is not binding as expected inside this div element. Here is a snippet of my code: function ...

Use Backbone.js to dynamically insert partial views based on specific routes, similar to how ng-view works in AngularJS

After gaining experience with AngularJs, I am now looking to dive into Backbone.js. However, I am struggling to understand how this library handles routes and partial views/templates "injection". In Angular, we can easily set up static components like th ...

Tips for creating a transparent background in a three.js and PyQt application

I'm using threejs to incorporate 3D objects into my PyQt application. I managed to display a cube after some exploration. Now I am looking to make the scene background transparent so that the blue background color of the app can show through. I am unc ...

Avoid the situation where the prop overrides the existing data

I am facing a challenge with vue.js as a beginner. I have an array filled with objects that I send through props to my router-view. Within one of my router-view components, I am using this array in multiple functions by referencing it with 'this.data ...

Creating a customized conditional overflow style in _document.js for Next.js

Is there a way to dynamically change the overflow style for the html and body elements based on the page being viewed? For instance, on the about page, I want to hide overflow for html but not for body, whereas on the contact page, I want to hide overflow ...

When the user presses the enter key to submit data, the Ajax page reloads

I am facing an issue with a simple form for sending messages from one person to another using AJAX method POST to prevent page reload. The problem arises when the user hits [ENTER] in the field, causing the page to reload instead of the AJAX working as int ...

How can I create editable text using typed.js?

How can I achieve the same text animation effect on my website as seen on the homepage of ? I want to utilize the library available at . Specifically, how do I stop the animation when the text is clicked, allowing users to input their own text? Below is ...

Check to see if the property of the object does not exist within the array and update as

My goal is to add the variable content into the database content using the $push method, but only if the content.hash doesn't already exist in the database. I want to avoid duplicating information unnecessarily. return shops.updateAsync({ "user": u ...

When executing my code to delete a file and remove it from the database, an error message pops up in the console

I've been working on implementing a delete image feature on my website. Although my code successfully deletes the file from the images folder and removes the corresponding record from the database, I encounter an error in the console that prevents me ...

Encountering Flow type errors when declaring global variables in React

type Props = { checkedItems:any }; class MyApp extends Component<Props> { constructor(props) { super(props); this.checkedItems = []; } } In this code snippet, I am utilizing Flow for type checking within a React class component. However ...

Querying specific data from the API using unique identifiers

If the api.football-data.org/v1/competitions holds this data: { "_links": { "teams": { "href": "http://api.football-data.org/v1/competitions/444/teams" } }, "id": 444, "caption": "Campeonato Brasileiro da Série A", ...

A function similar to setCell for modifying form fields in JqGrid

After searching through numerous answers from @Oleg, I couldn't find the solution I was looking for. I am dealing with a grid where I can edit inline in certain fields. Specifically, I am working with autocomplete functionality and when I select an it ...