Mesh from Three-JS is appearing on the other side of the model

https://i.sstatic.net/yLrC0.png

Currently, I am utilizing a custom model created in Blender for my ThreeJS project. After exporting it to a .obj file, I then utilized the Three-js conversion utility to generate a json file. When I set the model to rotate, it reveals the other side of the model. Below is the code snippet I am employing to load the model:

  loader.load("pegnin.js", function(geometry, materials){
    material = new THREE.MeshPhongMaterial( {
      color: 0xff0000,
      polygonOffset: true,
      polygonOffsetFactor: 1, // positive value pushes polygon further away
      polygonOffsetUnits: 1
    });
    material.depthTest = true;
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
  });

Live Demo

javascriptthree.jsblender

Answer №1

In three.js, it is assumed that front-faces have a winding order of counter-clockwise. To put it another way, the front-face in three.js is determined by the face's winding order rather than the face normal.

If your model's front-faces have a clockwise winding order, you can use the following work-around without having to modify your model:

mesh.material.side = THREE.DoubleSide;

Version: three.js r.85

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

Ensure to verify the presence of a specific element in an array prior to examining the rest in Javascript

I am currently working with an array of objects and I need to check if any of the objects have a title of 'food' before checking for any other titles. However, my current code checks sequentially. Below you will find the code snippet: let db = ...

javascriptarrays

What advantages does the Step function (AWS) offer compared to setTimeout (Javascript) for scheduling tasks?

I am currently in the process of developing an API service that allows any client to provide me with their HTTP request along with the desired time in seconds for execution. I have considered two potential approaches to achieve this: Utilizing a lambda f ...

javascriptamazon-web-servicesaws-lambdaaws-step-functions

Strange behavior detected in TypeScript generic function when using a class as the generic parameter

class Class { } const f0 = <T extends typeof Class> (c:T): T => { return c } const call0 = f0 (Class) //ok const f1 = <T extends typeof Class> (c:T): T => { const a = new c() return a //TS2322: Type 'Class' is not assigna ...

javascripttypescript

The art of designing Mongoose and Router files

Let me share my directory structure with you: bin/ www models/ myMongooseModel.js public/ ... routes/ index.js anotherroute.js views/ ... app.js package.json In my app.js file, I have configured some settings using app.set and app.use comman ...

javascriptnode.jsmongoose

The valueChanges event of a Reactive Form is activated whenever options from a datalist are selected

Whenever a user types into the input field, I am making an API call to retrieve and display data in a datalist for autocompletion (typeahead). control.get('city').valueChanges.pipe( map((searchText) => searchText.trim().toLowerCase()), fi ...

javascripthtmlangularrxjs

The query does not produce a match when using the LIKE operator with the retrieved ajax data

My goal is to sync up profiles in my MySQL database with the names and skillsets dropped into my droppable div. At this link, you can find a snippet of code for reference. I am facing two main issues - firstly, the error message mysql_fetch_array() expects ...

phpjavascriptjquerymysql

JavaScript OOP problem with object instances

I'm currently working on developing an app in JavaScript and trying to grasp the concept of Object-Oriented Programming. I created a simple "class" where I set an empty array in its prototype. However, when I create objects from this class and pass va ...

javascriptjquery

Angular.js is experiencing difficulties when using the input value attribute in conjunction with ng-model

I've been hard at work on an app that allows users to edit items, with those changes updating in a database. To prevent empty form submissions, I automatically fill the input fields with the current item's information. form.form-update(method="p ...

javascriptangularjsmongodbpost

Develop an AJAX script for processing multiple form inputs in PHP and HTML

I am working on a code that involves multiple form submissions, but the submit functionality is not working due to having multiple submits on one page. I have realized that I need an Ajax script to handle this, but I am new to it. Can someone provide me wi ...

javascriptphphtmlcssajax

Deciding on excluding empty key:value pairs from an object for various filtering needs

One of the features in my app allows users to filter results by "blood group" and "city", along with other areas. The information is retrieved from a database using Axios for Vuejs, incorporating query strings within the URL. For example: http://example.co ...

javascriptlaravelvue.jsvuejs2

Why is React App showing up twice on the webpage?

After successfully creating a React app based on Free Code Camp's Drum Machine project that passed all tests on Code Pen, I encountered an issue when transferring the code to Visual Studio. Surprisingly, the app now fails one test (#6) even though it ...

javascripthtmlreactjs

Error: The script is unable to access the property "div" because it is undefined

I keep encountering this issue "Cannot read property 'div' of undefined" This is the snippet in question function validateData(){ for(let j = 0; j < 13; j++){ if(dataArr[j].data.textContent === resultSet[j].result.div. ...

javascriptfunctionif-statement

Calling a JavaScript function using string parameters

Lately, I've stumbled upon an issue when attempting to execute a function with multiple arguments. <button type = "button" id = "clickmepls" onclick = killButton("clickmepls", "grave1")> Click me please </button> The definition of the fu ...

javascriptfunctionargumentssyntax-error

Observable in RXJS, with a pipe that transforms based on a dynamic function

I want to create an observable that gets populated with a custom pipe every time it is called. Let me explain this concept with an example: const myObservable = timer(1000); return myObservable.pipe(getCustomPipe()); function getCustomPipe() { return c ...

javascriptangularrxjs

Exploring the possibilities of integrating JSONP with Framework7

I've been attempting to retrieve images from the Instagram public API using ajax and JSONP: var target = https://www.instagram.com/p/BP3Wu_EDXsjdT5Llz13jFv2UeS0Vw0OTxrztmo0/?__a=1?callback=?'; $$.ajax({ ty ...

javascriptjqueryajaxinstagram-apihtml-framework-7

Can text be inserted into an SWF file using ASP.NET or Javascript via an online platform?

I am managing a website that features videos created by a graphic designer who updates and adds new content regularly. I am looking to add dynamic text to these videos after a specific amount of time, such as "Hosted by XXX". However, I am hesitant to ask ...

javascriptasp.netflashedit

Looping through a JSON array and encoding it using the `

I am looking to retrieve data from the database using AJAX and populate a 'select' tag with that data. Each name should be displayed in its own 'option'. Here is the code snippet: Index.php: <label>Select:</label> <sel ...

javascriptphpjqueryajaxdatabase

jQuery - translating and organizing names of countries

I have implemented a jQuery function to organize a list of country names based on the user's selected language code (via a language select dropdown). You can find more information on this topic in this related post. The translation of country names s ...

javascriptjqueryhtmlsorting

How to manage a particular process ID in Node.js?

I am currently working on a node application that allows clients to control a program running on the server. The program needs to run in its own terminal window at all times. Here is the ideal scenario: When a client clicks a button, a command is executed ...

javascriptnode.jsprocesschild-processcommand-line-interface

What could be causing my jQuery to malfunction after I include the .sqrt() function?

Seeking assistance in creating a grid of divs, I am working on finding the square root of the user's input to determine the height and width required to form a square. The code below is what I currently have: $('#size').click(function(){ $ ...

javascriptjqueryhtmlcss