Issue with display of 3D model in THREE.js due to graphical glitch

I've encountered a visual anomaly with a model I imported using JSONLoader. It's difficult to describe, you'll have to see it for yourself.
It seems to be related to the different materials and the camera's point of view.

You can access the plunk here:
http://plnkr.co/edit/0VjHiGNmWFHxdoMWC3GV?p=info

Part of the code involving JSONLoader:

var loader = new THREE.JSONLoader();
loader.load( 'tv.js',
        function ( geometry, materials ) {
        var tv = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial(materials) );
        glScene.add(tv);
} );

Here is a screenshot showcasing the glitch

Answer №1

The issue you are experiencing is related to z-fighting.

If your camera's near plane is set too low, such as 0.01 in your case, it can result in accuracy problems with depth sorting.

To solve this, adjust your near plane to a value of 1 or 10.

For more information, you can refer to .

Using three.js version r.81

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

Remove HTML tags from a table cell containing a combination of radio buttons and labels

Javascript Function: My JavaScript function posted below is designed to iterate through the column indexes specified in the 2nd parameter and also iterate through the element ids provided in the 3rd parameter. It will then populate the textbox, radiobutto ...

instructions on invoking a function within the knockout $.getJSON() operation

I am currently experimenting with a basic knockout script (still in the learning process). $.getJSON(clientUrl + "/list/" + 1, function (data) { var viewModel = { clients: ko.observableArray(data) }; ko.applyBindings(viewModel); }); The initial arg ...

Extract information from a Web Service using Javascript

As a novice in web app development, I am currently working on creating a login page and retrieving user data from a local database using JavaScript. Despite my efforts, I seem to have made an error somewhere in my code. Below is the snippet of my JavaScrip ...

Angular 4's Mddialog experiencing intermittent display problem

While using MDDialog in my Angular app, I've encountered a couple of issues. Whenever a user clicks on the div, flickering occurs. Additionally, if the user then clicks on one of the buttons, the afterclose event is not triggered. Can anyone provide ...

I lose my user interface after a series of clicking events

I've created a React application that generates new quotes without repetition, but I'm encountering an issue where the UI disappears after clicking enough times. What could be causing this behavior in my code? The console displays an object error ...

Unusual express middleware usage in NodeJS

app.use(function(req,res,next){ console.log('middleware executed'); next(); }); app.get('/1',function(req,res){ console.log('/1'); res.end(); }); app.get('/2',function(req,res){ console.log('/2'); res.end() ...

Performing addition operations on numbers entered through an HTML input field using PHP

I am looking to create a feature where the numbers entered in an input form are added together. I need to store these numbers in an array and have them display in a new line when a button is clicked. Here is the HTML code for the input field and button: ...

Sending a JavaScript string to a PHP script from a Chrome extension content script

I am currently developing a chrome extension that is designed to extract text data from specific websites when I visit them, and then store this data in a SQL database. The JavaScript code for data extraction is functioning correctly and is able to capture ...

Encountering difficulties in updating CSS styles using the useState hook in React

I am currently working on creating a modal in react that changes the background color when opened. The goal is to have the background color darken when the modal is activated and return to normal when the modal is closed. I attempted to achieve this using ...

Remove an item from a multidimensional array that contains a specific key-value pair

I need to remove the low-level object (for example, in the code below, under personal data there are two objects, I want to delete the one where action is "OLD") under each section where the "action" is "OLD" I'm utilizing lodash in my current projec ...

JavaScript - Issue encountered while reaching the bottom of the webpage

While conducting tests using Firebug/Firefox, I am trying to execute a simple command that will scroll the page to the bottom. Here is the command: window.scrollBy(0,3000); Seems straightforward, right? When testing on certain websites like Yahoo.com ...

Utilizing AngularJS to create a vertical calendar

Looking to create a vertical navigation displaying the date and day for the current week using angularjs. When clicking on the navigation div, I want an alert with the selected date to appear. I attempted this in Plunker using various templates, but was u ...

Setting custom parameters ($npm_config_) for npm scripts on Windows allows for more flexibility and customization in

I'm struggling with passing custom parameters from the command line to npm scripts in my package.json file. Despite researching on various platforms, including Stack Overflow, I haven't found a solution that works for me. Here's what I' ...

What techniques can I use to streamline this jQuery script?

Presented below is the code for a straightforward newsletter signup widget. I believe there's potential to streamline it further, any suggestions? const emailForm = $('.widget_subscribe form'); const emailSubmit = $('.widget_subscrib ...

When working with arrays in a programming loop, is it better to assign the value to a variable or access it directly?

When facing a complex for loop with lots of operations, what is the most efficient way to iterate through it? for ($i = 0; count($array) > $i; $i++) { $variable = $array[$i]; $price = $variable->price; OR $price = $array[$i]->price; } T ...

Leveraging IntersectionObserver to identify the video in view on the screen

Our Objective I aim to implement a swipe functionality for videos where the URL changes dynamically based on the ID of the currently displayed video. Challenges Faced Although I managed to achieve this with code, there is an issue where the screen flashe ...

Enhancing Perspective Transformation in Three.js with Postprocessing

I am exploring the world of three.js and want to create a captivating scene where the camera is in motion. Each frame will showcase 4 points that together form a quadrilateral. My goal is to manipulate these 4 points in such a way that they align with the ...

Employing global variables in JavaScript files with Vue3

In my Vue3 project, I have defined global variables like this: app.config.globalproperties.$locale = locale A composable function has been created to dynamically retrieve these global variables: import { getCurrentInstance ) from 'vue' export f ...

A guide on organizing and categorizing data by name with angularjs

Presented here is a list of descriptions associated with specific names. I am seeking guidance on how to group or list the descriptions by name. html: <body ng-app="app" ng-controller="MainCtrl"> <div ng-repeat="nameGroup in loopData"> & ...

Hmm, I seem to be encountering an error where res.sendStatus is not recognized as a function. What could be causing this

For the last few months, I have been immersed in Node.js/Express to create a REST Api. However, I've hit a roadblock with an async function in my controller.js file. The callback function is successfully receiving the client's request, but when i ...