Blocks are missing geometry faces in THREE OBJ Loader

When importing OBJs from Google Blocks, I have noticed that some faces are missing. Despite applying smooth shading, the missing faces refuse to show up. Any suggestions on how to make them appear? Below is my current template:

mtlLoader.load(mtlUrl, (materialLoader) => {
        materialLoader.preload();

        for (let material in materialLoader.materials) {
            materialLoader.materials[material].side = THREE.DoubleSide;
        }

        let objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materialLoader);

        let onSuccess = function (object) {
            var mesh = object.children[0];
            mesh.geometry = new THREE.Geometry().fromBufferGeometry(mesh.geometry);
            mesh.geometry.computeFaceNormals();
            mesh.geometry.mergeVertices();
            mesh.geometry.computeVertexNormals();
            mesh.geometry.center();

            this.group.add(object);                
        };

        let onProgress = function (event) {
            if (event.lengthComputable) {
                let percentComplete = event.loaded / event.total * 100;
                let output = 'Download of Object: ' + Math.round(percentComplete) + '%';
            }
        };

        let onError = function (event) {
            let output = 'Error of type "' + event.type + '" occurred when trying to load: ' + event.src;
        };

        objLoader.load(objUrl, onSuccess, onProgress, onError);
    });

Reference images:

https://i.sstatic.net/2IWD5.png

Desired outcome:

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

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

Tips for invoking code in app.js using Mithril

I'm currently working on a website that utilizes node.js with express for the backend, and mithril for the client-side. I want to find a way to establish communication between the mithril js file and express without using ajax, forms, or jquery. Here ...

vue-awesome-swiper / The button's name is synchronized, causing all other swiper elements to move in unison

<template> <swiper v-for="item in items" :key="item.id" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slid ...

What's the best way to handle the output of an HTTP request in my specific situation?

Struggling to pass http request results from parent controller to child controller... This is what I have: <div ng-controller = "parentCtrl"> <button ng-click="callApi()">click me</button> <div ng-controller = "childCtrl"& ...

While running tests on a React project, the `npm test` command is successful, but unfortunately,

I created a new react app using create-react-app and included some basic components and tests. The tests work fine when running 'npm test', but I encounter an 'Unexpected token' error when using Jest to run the tests with imported compo ...

Guide to generating a new element and displaying updated data whenever it is retrieved in a React application

I'm completely new to React and I'm struggling with rendering and listing data fetched from Firebase on my HTML page. I attempted the following approach: const Music = ({ match }) => { const [titles, setTitles] = useState([]); // Change ...

Discover the power of Mapbox Geocoding

After implementing Mapbox's Geocoder Contro, I am thrilled with how well it is working. One thing that I am trying to figure out is how to display a marker at the exact location of the address that was searched for. Below you can see the code snippet ...

Enhance your Blender model with realistic physics using the power of Physijs in three.js

Is there a way to incorporate physics into a blender model? I attempted to use ConvexMesh and ConcaveMesh without success. var mesh = {... code for exporting from blender ...} var loader = new THREE.JSONLoader(); var mesh_obj = loader.parse(mesh,'./ ...

The function crypto.signText() does not prompt the user for a certificate

My goal is to digitally sign a form on the client side and then send it to the server for verification. I have incorporated the crypto.signText() function into my code, but I am encountering an issue where the form does not prompt me to select a certifica ...

Unable to utilize the onAngularGridCreated emitter

I'm currently facing an issue with the Angular Slickgrid library. I need to customize the sorting button function by using the onAngularGridCreated event, which should return the instance of my grid. However, when I include the following code in my an ...

Vue - Error Message from Eslint Regarding Absence of Variable in Setup Function

Interestingly, the Vue.js documentation strongly recommends using the <script setup> syntax of the Composition API. The issue with this recommendation is that the documentation lacks depth and it conflicts with other tools (like eslint). Here is an e ...

Setting the Base Href for Angular Routing and Managing Views

In the process of developing a web application, I have set <base href="phoenix/"> in the header according to the instructions provided in this article. Despite specifying the base tag in the header with the URL mapped as http://localhost/phoenix/, m ...

What is the best way to send multiple requests for the same file and retrieve the necessary response in PHP using jQuery AJAX?

var postID = $post->ID; $.ajax({ type: "POST", url: "<?php echo get_template_directory_uri();?>/b.php", data:{postID:postID}, dataType: 'json', success: function(re ...

The process of retrieving keys and values from localStorage in html5

I have stored some important key-value pairs in local storage. Now I need to retrieve both the keys and values, and then display them by appending the values in a list item (li). Currently, my attempt at this looks like: for (var i = 0; i < localStorag ...

Extracting a variable established on the client side and passing it to a server-side node backend

I am currently working on creating a comments section for a web application. The front end of the app displays information about the threading level of each comment. When users submit comments, I need to pass this threading information to the back end in o ...

The audio event continues to trigger even after it has been removed using removeEventListener

In my React component, specifically handling an audio track with an HTML <audio> element, I have implemented the following lifecycle methods: componentDidMount() { const {track} = this.props; this.refs.audio.src = track.getTrackUrl(); _.each(t ...

Having trouble accessing the EJS image with express.static in Node JS

i am attempting to retrieve an image from the uploads path using EJS, here is my file route here is the code in 'dotemplate.js' <div class="col-xs-12"> <h2 style="text-align: center; font-size: 12pt" >ATTACHMENT</h2> & ...

The rendered output from ThreeJs OBJLoader appears quite distorted with noticeable pixelation

I'm currently attempting to load a .obj file using the OBJLoader in an AngularJS application. However, the output appears very pixelated. https://i.sstatic.net/eRnmg.png I've tried adjusting the camera position and perspective (codes are commen ...

Having trouble with the form parsing not functioning properly

I have been utilizing Express.js along with the body-parser module for form parsing on the server. However, I am facing an issue where the content received appears as an empty object under res.body. This is how my app.js looks: var express = require("exp ...

JS code ensures that only active results are displayed to the user by filtering out deleted results before

My server output is being processed to exclude any deleted parts before returning it. The schema structure is as follows: results: - result: -item: -itemReservations: -reservationPart: -isDeleted ...

Issue reported: "Usage of variable 'someVar' before assignment" ; however, it is being properly assigned before usage

This piece of code showcases the issue: let someVar: number; const someFunc = async () => { someVar = 1; } await someFunc(); if (someVar == 1) { console.log('It is 1'); } As a result, you will encounter ...