Why does my OBJ import in Three.js only display a single object without any children attached?

I have been using the standard OBJLoader from Three.JS to import my .OBJ files. The issue I am facing is that when I upload my model, it comes in as a single object without any children. Although the geometry is correct and everything seems fine, I want to be able to separate the parts into individual meshes. For instance, if I import a bed, I would like to manipulate just one side of the bed or select a specific mesh from the entire model.

Here is the file I am trying to upload: Test file.obj

Upon loading this file into Three.js, you will notice that it appears as a single object. However, looking at the .OBJ file, you can see that the meshes are separated (e.g., g akrMesh_65_65, g akrMesh_66_66). How can I modify the loading process so that each mesh is treated as a separate object?

Answer №1

Unfortunately, the current version of ObjLoader does not support groups.

To address this issue, consider the following steps:

  1. Take a closer look at ObjLoader.js to gain insight into why it is unable to function as desired.

  2. For additional information on this matter, refer to http://github.com/mrdoob/three.js/issues/2898.

  3. As indicated in the aforementioned discussion, you may find that using can provide a workaround by allowing you to import OBJ files and export them as three.js JSON scenes.

Version: three.js r.65

Answer №2

Once you have your obj file loaded into Blender or another software (WestLangley suggested Clara.io as an alternative), feel free to make any edits such as removing unnecessary meshes, and then save the file in three.js JSON format.

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

Modifying shapes and figures in three-dimensional Javascript

I am currently struggling to transform a cube into a sphere in Three.js either after a specific time interval or upon an event click. I have attempted changing the geometry property from BoxGeometry to SphereGeometry with no success. Despite trying some po ...

The class functions perfectly under regular circumstances but ceases to operate once it is initialized

I'm currently developing a bluetooth remote in React Native. The issue I am facing is that my BLE class works perfectly on its own, but certain sections of code seem to malfunction when implemented within another class. import BLE from './Core/BL ...

What is the best method for retrieving information from Google Firestore and integrating it into my Vue component?

In the process of creating a game lobby where one player initiates a game and waits for another player to join. Once the second player joins, the Firestore document containing information about the game is updated with the player's name stored in the ...

The inefficiency of invoking Jquery on elements that do not exist for the purpose of caching

What is the impact if JQuery attempts to access elements that do not exist? Will there be any significant CPU overhead other than script loading? Does it matter if this is done for a class or an id? For optimization purposes and to minimize simultaneous c ...

How to redirect in Next.js from uppercase to lowercase url

I'm trying to redirect visitors from /Contact to /contact. However, following the instructions in the documentation results in an endless loop of redirects. This is my attempted solution: // next.config.js async redirects() { return [ { ...

Having trouble fetching JSON data from a URL in my React Native project, the response is not as expected

getData() { return fetch("http://bitcfeedcms.rf.gd/script.php") .then(response => { console.log(response); response.json(); }) .then(responseJson => { this.setState({ data: responseJson }); }) .catch(error => { console.er ...

Utilizing Treant.js within a Vue.js application

After attempting to integrate the Treant.js library into my Vue app for creating a tree diagram from JSON data, I encountered some errors. In my main view, here are the import statements... import Vue from "vue" import store from "../../store" import { ge ...

Calculate a new value based on input from a dynamic textbox within a datatable when a key is pressed

This question is a follow-up from the following solved queries (please do not mark it as a duplicate): jquery: accessing textbox value in a datatable How to bind events on dynamically created elements? I have generated a dynamic textbox within a dat ...

"Encountering issues with ModalPopupExtender in Internet Explorer, while it functions properly in

Currently, I am encountering a critical issue while implementing ajaxmodalpopupextender on my webpage. The functionality operates smoothly in Firefox with an appealing appearance, however, it encounters display problems in IE where it appears to the side a ...

python django you can only access the first statement

Only the first statement in my name app is accessible to me Javascript: <script type="text/javascript> function searched(){ {% for names in name %} nameSearched = document.getElementById('name').value; document.get ...

Is it possible that the rotation of multiple images using jquery in php is not functioning properly?

Is there a way to display images using PHP and rotate them using canvas and jQuery? The issue arises when showing more than one image as the rotation fails. I suspect the problem lies in the image or canvas ID in the JavaScript code, but I'm unable to ...

Remove any current query parameters from the Angular UI Router when navigating to the same route

I am currently using angular ui router to navigate between different pages and I have a route that includes multiple query parameters. The issue I am encountering is that when I switch routes for the same page with new query parameters, the existing parame ...

converting HTML values to TypeScript

I'm a beginner with Angular and could use some assistance. Currently, I have two components - one for the index and another for navigation. Within the index component, there are subcomponents that change based on the value of a variable called produ ...

Securing data in AngularJS $http.post requests: Best practices

While working on $http.post requests for my app's backend, I noticed a security issue. When inspecting the data using tools like firebug in Firefox, I can see all the information being sent. Is it possible for third parties to intercept this data? Th ...

Guide on replacing buttons with <a> tags in express.js posts

I've incorporated handlebars as my chosen templating engine and I'm utilizing buttons to trigger app.post() in my JavaScript file. <form method="POST" action="/smo_assessment"> <div class="container" id="div1"> <h3 id="header" ...

Google map with a fully visible HTML element on top

When certain points on a Google map are clicked, a small popup box appears. This works fine in the regular small Google map mode. However, when the Google map is switched to full screen mode by clicking the full screen button (which is shown when `fullScr ...

Guide on exporting type definitions and utilizing them with npm link for a local package

I am in the process of developing a new testing tool called tepper as an alternative to supertest. My goal is to make this package available in both ESM and CJS formats. However, I'm encountering an issue where users of the library are unable to locat ...

The scaling of the viewport does not seem to be functioning properly on the mobile device

As a beginner in website development, I am currently working on a new project that is still in the early stages of development. My goal is to ensure that this website is responsive for mobile devices. I have added the following meta tag <meta name="view ...

Tips on redirecting the treeview menu using Material-UI 4

Currently, I am utilizing Material UI 4's Treeview component. However, I am struggling to figure out how to include a parameter that allows me to redirect to other pages when the user clicks on an item. In the past, I relied on a different method. Ch ...

How can I save the output of a function in a variable within an *ngIf directive and then utilize it within the same *ngIf block?

My scenario is as follows: I have a function that returns an array I need to conditionally render a component - only if the array exists and its length is greater than zero. The returned array should be passed as an @Input() to this component. Since t ...