Struggling to replicate the Quad from .obj file using only Face3

My latest project involved creating a tool to analyze the lengths and angles of faces on a 3D object. However, after updating to version r67 of Three.js, I encountered an issue where Face4 disappeared and I struggled to replicate my previous work. Specifically, the code snippet n = (f instanceof THREE.Face3) ? 3 : 4 allowed me to add 4 uv's to Face4. Yet, I am now unable to discern when a Face4 would have existed so that I can add 2 Face3 instead.

Below is a snippet of code that showcases a function designed to work with the geometry of the object:

 function draw(g)
    {
        objectContainer = new THREE.Object3D();

        texture = THREE.ImageUtils.loadTexture('uvmap.png');
        texture.flipY = false;

        materials = [];
        materials.push(new THREE.MeshLambertMaterial({
        map: texture,
        vertexColors: THREE.VertexColors
        }));

        var faceIndices = ['a','b','c','d'];

        var color = new THREE.Color(0xffffff);
        color.setHex(0x333333);

        var uvs = [];
        uvs.push(new THREE.Vector2(0,1));
        uvs.push(new THREE.Vector2(0,0));
        uvs.push(new THREE.Vector2(1,1));
        uvs.push(new THREE.Vector2(1,0));

        for (i = 0; i < g.faces.length; i++)
        {
            face = g.faces[i];
            geo = new THREE.Geometry();
            geo.faces.push(new THREE.Face3(0,1,2));
            geo.faceVertexUvs[0] = [];
            geo.faceVertexUvs[0].push([uvs[0], uvs[1], uvs[3]]);
            geo.faces[0].materialIndex = 0;

            for (j = 0; j < 3; j++)
            {
                fi = face[faceIndices[j]];
                v = g.vertices[fi];
                geo.vertices.push(new THREE.Vector3(v.x,v.y,v.z));
                geo.faces[0].vertexColors[j] = color;
            }

            geo.computeVertexNormals(); 
            geo.computeBoundingBox();

            obj = new THREE.SceneUtils.createMultiMaterialObject(geo, materials);

            objectContainer.add(obj);
        }
        scene.add(objectContainer);
    }

Answer №1

Make sure to only assign 3 UV values to each face3!

    /* define faces and UV coordinates */
        if (n == 3)
        {
            g.faces.push(new THREE.Face3(0,1,2));
            g.faceVertexUvs[0].push([ uvs[0], uvs[1], uvs[2] ]);

        }

Avoid setting the 4th UV value uvs[3]!

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

Promises and Their Valuable Variables

Recently I began learning JavaScript and I'm encountering some confusion. Here's the code snippet that is causing me trouble: api.posts .browse({ limit: 5, include: 'tags,authors' }) .then(posts => { posts.forEach(post =&g ...

The Map Function runs through each element of the array only one time

I'm new to JavaScript and experimenting with the map() function. However, I am only seeing one iteration in my case. The other elements of the array are not being displayed. Since this API generates random profiles, according to the response from the ...

What is the best way to extract a value from two different HTML identifiers?

Something tells me that this task is quite simple. I just need some guidance on what I might be missing here. All I really want is a basic program that can extract the content from <span id "text"> and paste it into <div id="text2">. funct ...

``What is the mechanism behind callbacks in AngularJS when making a call to a REST service?

Currently, I am diving into the world of AngularJS and REST. The code snippet that I'm analyzing has the term callback repeatedly used in an authentication function. I'm curious to know if "callback" is a JavaScript or Angular keyword, or simply ...

Struggling to find a way to showcase API data on a HTML site

Is there a way to dynamically show the live prices of crypto currencies on my website? I wrote a script that successfully displays the current price, but I'm struggling with implementing auto-refresh using setInterval. Here's the code I have so f ...

What is the process of creating a new array by grouping data from an existing array based on their respective IDs?

Here is the initial array object that I have: const data = [ { "order_id":"ORDCUTHIUJ", "branch_code":"MVPA", "total_amt":199500, "product_details":[ { ...

Avoiding "Origin null is not allowed" error in Express.js POST request

I am attempting to send JSON data containing a set of key and values from JavaScript to Express.JS. Following advice from other posts, I have included the use of CORS and also added res.header("Access-Control-Allow-Origin", "*");. When testing the POST r ...

Is there a way to determine if jQuery lightslider has been initialized, and if so, how can I effectively remove the instance?

Currently, I have integrated the JQuery lightSlider into my project. Despite some code adjustments, it is functioning well. My goal is to dynamically replace the lightSlider content with data returned via AJAX, which I have successfully achieved. After r ...

JavaScript element styling in a Partial view, experiencing issues with functionality

In the main view, the javascript element is working fine. However, in the partial view it seems to not be functioning even though it is correctly formatted. Any ideas on how to fix this issue? Check out this fiddle for reference: http://jsfiddle.net/bgrin ...

Guidance on implementing fallback font formats using FontFace API

I am exploring the FontFace API (not @fontface) and wondering if there is an easy way to include multiple font formats, similar to providing multiple sources in @fontface. Alternatively, is there a simple method to identify which font formats are supporte ...

Trying to toggle between two Angular components within the app component using a pair of buttons

Currently, I am developing an application that requires two buttons to display different nested apps. Unfortunately, I am unable to use angular routing for this particular design. These two buttons will be placed within the app.component. When Button A i ...

Ionic3 footer using ion-tabs

Is there a way to create a common footer for all pages with 5 buttons, where the first button is selected by default? The page opened by this first button should have three tabs. I have already created the tabs but am unsure how to add the footer without r ...

Learn how to properly display the state array within a React component. Even though the array is present in the state, you may encounter issues where it

I am facing an issue while trying to display data from firestore in my React component. I have updated the global state array with the firestore data and it is being updated, but when I try to render that array, it shows as undefined. Initially, I attempt ...

Detecting repeated property values within a collection of embedded objects

I am currently working with a JSON file that contains an array of nested objects and arrays to represent a shopping cart. My goal is to identify duplicate values and update the quantity of the item if duplicates exist, otherwise simply add the items to the ...

Obtain precise JSON information using Node.js

Having limited experience with Angular JS and Node JS, I find myself in need of assistance. On the server side, I have multiple JSON files containing language translations. Based on a client's request for a specific language, such as French, I must re ...

Unveiling the Secrets of Encoding and Decoding JSON within a Concealed HTML

I am in the process of creating a unique control using HTML and JQuery that will showcase a specific text value. Users will have the ability to input various key/value pairs. Here is the current code snippet I am working with: <input id="keyValue" type ...

Tips for sending a String[] to my Angular 2 HTML template

In the export class of my component, I have a string array variable declared like this; barChartLabel:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012']; To display t ...

Concerns regarding the set-up of the latest React application

My goal is to become proficient in React, so I decided to install Node.js (v 10.16.0 LTS) and run the following commands using Windows Powershell: npx create-react-app my-app cd my-app npm start However, after making changes to the code (such as modifyin ...

Is there a way to retrieve the value from an input box?

<td class="stockQuantity"> <input class="form-control" id="Cart1" name="qty_req" required="required" type="text" value=""><br> <button type="button" o ...

Save JSON data from Javascript to a file on the server without using a server-side application

I am currently working with a .js client and need to save an object to a file on the server. This is new to me as I am not familiar with file i/o using JavaScript. My plan is to utilize jquery and json for this task, and I am using java serverside. Althoug ...