Exploring the technique of importing OBJ files into Three.js

As I attempt to upload an OBJ file along with its associated MTL files into a WebGL scene using Three.js, I have encountered a perplexing issue. In my code, I have included global variables to track the loading progress of the OBJ and MTL files. Strangely, despite it being only one set of files, the "obj" variable is of type "Group" and contains two "children". The first child appears to consist solely of vertices, with an empty "faces" array. On the other hand, the second child contains both vertices and faces. Surprisingly, using just the data from the second child (geo[1]) produces the same result as using the entire obj.

This discrepancy raises questions about the underlying logic behind this behavior. Why does a single set of OBJ and MTL files produce an object with two children where one child lacks face information?

This issue is particularly significant for me because I intend to manipulate the vertices and faces to create a voxelized volume, necessitating direct access to the scene objects.

scapula = new THREE.OBJMTLLoader();
scapula.load('obj/scapulaTWO.obj', 'obj/scapulaTWO.mtl', function (object) {
    // var material = new THREE.MeshFaceMaterial(materials);
    var material = new THREE.MeshLambertMaterial({
        color: 0xFFFF66
    });
    obj = object; //group

    object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
            console.log(child instanceof THREE.Mesh)

            geo[i] = child; //mesh
            // apply custom material
            child.material = material;

            // enable casting shadows
            child.castShadow = true;
            child.receiveShadow = true;

            i = i + 1;
        }
    });

    scene.add(geo[1]);
});

Answer №1

Once your object has been parsed by the loader, the content found within is directly influenced by the model you provided.

If you open your *.obj file with a text editor, you can examine the groups and other elements present within. It's important to note that three.js does not simply extract vertices and place them in separate groups without regard for the original structure.

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

Comparison between bo-html and bo-text

As I was going through the documentation for the bindonce directive, a question popped into my head regarding the distinction between bo-html and bo-text. bo-html: This evaluates "markup" and displays it as HTML within the element. bo-text: ...

Attempting to establish a cookie from the server end, however, it is not being successfully set on my client

Attempting to set a cookie on the client browser from the server side using Node.js and Express. When signing up, the cookie is properly sent in the response object but not being set on the client browser. Additionally, when trying to access a protected AP ...

What is the best way to retrieve combined reducers in react-redux?

I am currently experimenting with react-redux to manage states and props in a small project. Take a look at this example code: (Index.js) import React, { Component } from 'react' import { render } from 'react-dom' import { Provider ...

"Implement highcharts redraw() method to update the chart, along with a callback function that interacts

I am working with a chart that utilizes the events.load function to draw lines based on the properties of the chart. The load function is functioning as expected, but I want to erase and redraw the lines each time the chart is redrawn, such as when hiding ...

What steps can be taken to stop the page from refreshing and losing its state when cancelling navigation using the back and forward browser buttons in React-router v4.3?

I'm currently facing an issue with a page in which user inputs are saved using a react context object. The problem arises when a user navigates away from the page without saving their entries. I want to prompt the user to either continue or cancel, wh ...

Create an Angular 2 webpack production project and ensure that the dist folder does not contain any source code

I am currently developing a web application using Angular 2 with TypeScript and angular-cli. I needed to test the application on the server without uploading the source code, so I used the command "ng build --prod". Despite deleting all .map files from the ...

The v-data-table fails to refresh with new data

Within my Vuex store, I have an object called portfoliosData which contains a property named metrics. state: { portfoliosData: { performance: [], metrics: [] }, When I trigger an action, I update the property in the store and aim to ...

Ways to resolve the issue of missing data display in Angular when working with the nz-table

Below is the code snippet: <nz-table #listTable nzSize="middle" [nzData]="data"> <thead> <tr> <th nzShowExpand></th> <th>Location</th> <th>Device</th> ...

Find a specific string within an array where both the keys and values are subject to change

Below is an array that I have: var Array = [{id:100,name:'N1',state:'delhi',country:'india',status:'active'}, {id:101,name:'N2',state:'kenya',country:'africa',status:'suspended&a ...

How to hide bullet points in a list when the links are hidden, utilizing either Jquery or CSS

In my attempt to hide bullet points from a list when links are hidden, the first and second links have been hidden using backend code in C#. I am trying to make sure that the bullets are only displayed if there are actual links present. <div class="l ...

Updating table rows in real-time using SocketIO

My intention is to create a makeshift queueing system using socketIO. I am populating my table dynamically, with each row having a unique identifier. The idea was that when a user clicks a button on a particular row, a socket emit event would be sent to th ...

How can we pass the onClick prop from a child component to a parent component in React with Typescript?

Currently, I am utilizing React along with TypeScript. I am curious about the process of passing an event from the parent component to a child component using props. Here is an example for better understanding: parent.tsx const ParentComponent: React.F ...

PhantomJS - Error: Variable "$" is not defined

I am encountering an issue with my PhantomJS script. It runs smoothly on my local machine (Mac), but when I try to run it on my Linux server, I receive the following error message: ReferenceError: Can't find variable: $ https://fantasy.premierleague. ...

Experiencing issues with integrating Vue.js into Spring MVC JSP pages

I am currently in the process of integrating views into my JSP files for my Spring MVC application. I have set up a very basic configuration, but I am encountering an issue where the message displayed from the 'msg' attribute in the data object a ...

Managing jQuery Dependency in Node Package

I am facing an issue while trying to implement the 'jvectormap' package in Node, as it has a dependency on jQuery. My query is fairly straightforward. Whenever I attempt to import jVectorMap, I encounter the following error: Uncaught ReferenceE ...

Having difficulty displaying a div using ng show

As a newcomer to AngularJS, I am encountering an issue with displaying a div through AngularJS. Although values are changing in the subheaddiv(index) function, they are not being reflected in the HTML. Snippet of HTML code:- <div ng-repeat="details i ...

Tips on modifying the content of a Material UI Card

I have a Material UI card displaying some details, along with an 'Edit' button. When the Edit button is clicked, I want to update the content of the card within the same layout. Below is the code snippet: <Card className={classes.root} variant ...

Instructions on how to adjust the modal width in react-responsive-modal?

Is it possible to adjust the width of the modal in react-responsive-modal? <div style={{width: '600px'}} > <Modal open={open} onClose={this.onCloseModal} closeOnOverlayClick={true}> <CreateSubmenu onFormSubmit={this.o ...

Tips for creating a cohesive group of HTML elements within an editable area

Imagine having a contenteditable area with some existing content: <div contenteditable="true"> <p>first paragraph</p> <p> <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-s ...

What is the best way to store my JSON output in a JavaScript variable?

In my jsonOutput.php page, the code looks like this: $response['imgsrc'] = $filename[1]; echo json_encode($response); When executed, it produces a JSON output like {"imgsrc":"071112164139.jpg"} My query now is, how can I make use of ...