Two-faced, object model in ThreeJS

Is there a way to render an obj model double-sided in three.js (r.84)?

Below is the code snippet for loading the obj using obj loader:

THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
  var mtlLoader = new THREE.MTLLoader();
  mtlLoader.setPath('house3/');
  mtlLoader.load( 'House.mtl', function( materials ) {
      materials.preload();
      var objLoader = new THREE.OBJLoader();
      objLoader.setMaterials( materials );
      objLoader.setPath( 'house3/' );
      objLoader.load( 'House.obj', function ( object ) {
          scene.add( object );
      });
  });

Answer №1

Revision 84 of Three.js does not come with OBJMTLLoader: https://github.com/mrdoob/three.js/issues/8105

However, the solution provided in the link worked with a slight modification:

THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
  var mtlLoader = new THREE.MTLLoader();
  mtlLoader.setPath('house3/');
  mtlLoader.load( 'House.mtl', function( materials ) {
      materials.preload();
      var objLoader = new THREE.OBJLoader();
      objLoader.setMaterials( materials );
      objLoader.setPath( 'house3/' );
      objLoader.load( 'House.obj', function ( object ) {
          object.traverse( function( node ) {
              if( node.material ) {
                  node.material.side = THREE.DoubleSide;
              }
          });
          scene.add( object );
      });
  });

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

Managing authentication tokens in next.js

I'm currently working on a next.js app that requires authorization for certain functionalities. In the past with CRA, I would store the token in a config.js file and easily import, use, and update it throughout my application. Here is an example of ho ...

Troubleshooting the "Failed to mount component" error in Vue: fixing template or render function definition issues

Struggling with writing a Vue component, encountering the issue: Failed to mount component: template or render function not defined. Tried various fixes like adding default when importing the component, but none of them seem to work. My component code is i ...

Variations between <div/> and <div></div>

When using Ajax to load two divs, I discovered an interesting difference in the way they are written. If I write them like this: <div id="informCandidacyId"/> <div id="idDivFiles"/> Although both divs are being loaded, only one view is added ...

The objects-to-csv module encountered an error: fs.existsSync is not a valid function for this

"TypeError: fs.existsSync is not a function" Whenever I try to create a CSV file and input some data into it, this error message pops up. const objectstocsv = require('objects-to-csv'); export default { data () { return { ...

Using AJAX along with the append method to dynamically add identical HTML content multiple times to a single element

Although I have successfully implemented most of the desired functionality with this JavaScript code, there is a persistent bug that is causing unnecessary duplicates to be created when appending HTML. Detecting Multiples The problem lies in the fact tha ...

Click on a specific date on the calendar in the Javascript Django application to retrieve items based on

I'm currently working on a calendar application using JavaScript and Django. I am struggling to figure out how to display items based on the selected date when clicking on a day. Is there anyone who can suggest a solution? My assumption is that I may ...

Is there a period, question mark, apostrophe, or space in the input string?

Currently, I am in the process of developing a program that can determine if an input string includes a period, question mark, colon, or space. If these punctuation marks are not present, the program will return "false". However, if any of them are found, ...

Updating the attributes of an FBX object in ThreeJS post asynchronous loading

I have successfully loaded an FBX Object into the scene const objLoader = new FBXLoader(); objLoader.load( '{{asset('models/model.fbx')}}', function ( object ) { scene.add( object ); object.position.y = 0 ...

Guide to adding a checkbox to a JavaScript list

I'm currently working on building a task list using JavaScript. The concept is to type something into the input field and then, when the user clicks the button, a checkbox with that text will be generated. However, I'm facing an issue as I am no ...

Unable to locate an element on the webpage due to a JavaScript-based error, which then becomes hidden after a few seconds. (Registration form)

While completing a registration form, I encounter a hidden message after clicking on the register button. Struggling to locate this elusive element has been an ongoing challenge for me. Unfortunately, my attempts to find the element have been unsuccessful ...

Adjusting the sensitivity of mousewheel and trackpad using JavaScript

I am currently utilizing CSS3 to smoothly move a div up and down based on the direction of scrolling. By monitoring the mouse wheel event, I can detect when a user scrolls down and trigger a CSS3 transition to slide the div up. However, I am encountering a ...

What are the steps to set up Redis Store in my production environment?

I am currently in the process of setting up Redis as a session store, but for some reason it's not functioning properly. I have integrated passport.js and express-flash, however when I attempt to run the current Redis setup, it fails to work: var ses ...

Stop the page from scrolling when scrolling within a specific DIV to address the [Violation] warning appearing in the console

Initially, it may seem like a duplicate question that has been answered here, but there are additional aspects that need to be addressed. How do I resolve the following [Violation] warning in the Google Chrome console? [Violation] Added non-passive eve ...

An error has been noticed: "Unexpected token o" - Syntax is not

I'm currently developing a web application and have encountered an issue: $("#post").click(function () { var u = $('#u').val(); var j = $('#j').val(); $.post("http://www.myweb.php", { u: u, j: ...

Having trouble with a link not working correctly after concealing the file extension with htaccess?

I've configured the ht-access file to hide the .php file extension. Here's the code inside the .htaccess file: # Apache Rewrite Rules <IfModule mod_rewrite.c> Options +FollowSymLinks RewriteEngine On RewriteBase / # Add trailing slash to U ...

jQuery powered image wall with dynamic scrolling

Can someone assist me in figuring out the best approach for this task? I am interested in creating a scrolling image wall using jQuery. The goal is to display numerous small images (such as Twitter profile pics) tiled one after another across the entire w ...

The jQuery UI Dialog is experiencing an issue with a button that is triggering a HierarchyRequest

I am facing an issue with a piece of javascript that works perfectly on other pages but is now throwing a HierarchyRequestError on a new page. This leads me to believe that there may be an HTML problem on this particular page. Here is a simplified version ...

Locate every item that has a value that is not defined

My data is stored in indexeddb, with an index on a text property of the objects. I am trying to retrieve all objects where this property's value is undefined. I have been experimenting with IDBKeyRange.only(key), but when I use null, undefined, or an ...

Image-switching button

I'm new to JavaScript and struggling with my first code. I've been staring at it for two days now, but can't figure out what's wrong. The goal is to create an HTML page where the user can change an image by clicking on a button, and th ...

Navigating through a large array list that contains both arrays and objects in Typescript:

I have an array containing arrays of objects, each with at least 10 properties. My goal is to extract and store only the ids of these objects in the same order. Here is the code I have written for this task: Here is the structure of my data: organisationC ...