Exploring the Issue of Flickering in 3D Models with Three.js and Potree

Currently, I am working with a gltf model from this link: using Three.js and Potree. However, I am facing an issue with the model flickering. I have gone through similar posts on this topic like Flickering planes and Texture/model flickering in distance (3D).

My understanding is that adjusting the PerspectiveCamera's near and far plane arguments to be well separated could potentially resolve this problem. Despite my attempts at making this adjustment, the issue still persists.

I would greatly appreciate any assistance or advice on how to solve this problem. Just to note, I am fairly new to three.js and potree.

javascriptthree.js

Answer №1

Using my personal viewer () I implemented the code below to adjust the camera's near and far planes:

const model; // referring to the 3D model
const boundingBox = new THREE.Box3().setFromObject(model);
const dimensions = boundingBox.getSize(new THREE.Vector3()).length();
const centerPoint = boundingBox.getCenter(new THREE.Vector3());

this.controls.reset();

model.position.x += (model.position.x - centerPoint.x);
model.position.y += (model.position.y - centerPoint.y);
model.position.z += (model.position.z - centerPoint.z);
controls.maxDistance = dimensions * 10;
camera.near = dimensions / 100;
camera.far = dimensions * 100;
camera.updateProjectionMatrix();

The results obtained by altering the scene scale and hardware precision in the given code are dependent on each other—consider adjusting the camera distance when scaling the model significantly. Since I lack knowledge of Potree, it is uncertain how its functionality differs from standalone usage of three.js.

Answer №2

As @Brakebein pointed out, the issue here is known as z-fighting. For those utilizing WebGLRenderer, a possible solution could be to implement:

let renderer = new THREE.WebGLRenderer({
    logarithmicDepthBuffer: true
});

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

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

Looking to incorporate two unique CSS animations into my project. Utilizing two buttons and one object, I want the first animation to trigger upon clicking the first button. I understand how to handle one button and one animation, but am unsure how to man ...

javascriptjquerycssanimationsvg

Issue with Bootstrap carousel - the carousel.on method is not recognized

I have implemented a standard Bootstrap carousel in my project: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Resizing and uploading multiple images with accompanying descriptions

I am in need of a solution for uploading multiple images along with descriptions. Users will be uploading 1-10 large-sized images from cameras, so it would be ideal if the images could be resized before the upload. My requirements are: Compatibility wit ...

javascriptjqueryhtmlfile-uploadimage-resizing

Store the selected checkbox values in an array when submitting in Ionic

One issue I am facing is that the checked checkboxes are returning true instead of the value of input (type="checkbox"). Array displaying responded checked or unchecked items I am unable to store this data in an array as needed. Additionally, I cannot sp ...

javascriptangulartypescriptionic-framework

Tips for streamlining the filter function using replace and split:

Currently, I am utilizing a filter function alongside replace() and split(). Here is the code snippet: jQuery('table .abc').filter((i, el) => jQuery(el).text(jQuery(el).text().replace('a', 'b').split(' ')[0] + &ap ...

javascriptjqueryfilterreplacesplit

Executing multiple HTTP requests in parallel with AXIOS and retrieving the responses even if one of the requests fails

I am currently working on optimizing server get requests to run concurrently. To achieve this, I have developed the following function. Issue The problem arises when one request fails, causing me to lose track of the responses from the other requests. e ...

javascriptreactjspromiseaxios

Transferring information between AngularJS and Express/Node without using AJAX

My application is built using AngularJS on a node/express backend, with user authentication handled by passport. After a user signs in or signs up, the communication between my Angular controllers and express is done through $http ajax/xhr calls. The form ...

javascriptnode.jsangularjsexpress

Execute JavaScript code and showcase the result in the frame on the right side

On the left side of a frame, I have a menu. My goal is to invoke a javascript function that will load a new HTML page on the right side of the frame using XML data and an XSL template. When trying to achieve this with fixed parameters, the code works perf ...

javascripthtml

employing ajax for handling a form

Currently, I am facing an issue with updating a user's email on a page. The div refreshes upon submission as intended, but the database is not being updated, and I can't figure out why. My layout consists of a single page where clicking a menu l ...

phpjavascriptmysqlajax

Building React Typescript Components with Froala Editor Plugins

Attempting to integrate a custom plugin into a Froala Editor within my React application using the package react-froala-wysiwyg. Following a tutorial on incorporating a custom popup/plugin found here. Encountering an issue due to TypeScript incompatibility ...

javascriptreactjstypescripttypesfroala

Change the name of a file to a name chosen by the user while uploading it to an

I'm a beginner when it comes to node.js and I'm facing an issue that I couldn't find a solution for despite looking into various related topics. My problem involves using Node.js on the server side to upload a file and rename it based on a ...

javascriptnode.jsexpressasynchronous

The AngularJS component materializes almost instantaneously

Using AngularJS, I have developed an application where a certain section of code is displayed after the page loads for a split second: <div class="col-sm-4" data-ng-repeat="user in users"> <div class="card"> ...

javascripthtmlangularjs

Retrieve information from a URL and transform it into a JSON array

One of my functions looks like this: function retrieveJsonDataFromWebsite(url, callback) { let chunks = []; return require('https').get(url, res => { res.setEncoding('utf8') .on('data', (chunk) => { ...

javascriptjsonnode.js

How to Utilize Muuri Javascript Library with Bootstrap Tabs: Resizing Required for Expansion?

Struggling for days and feeling frustrated, I'm hoping someone can help me crack this mystery. My idea is straightforward - three Bootstrap 4 tabs with drag and drop functionality inside each, all displayed in a responsive stacked masonry layout. To a ...

javascriptjquerybootstrap-4muuri

Transmitting information to the service array through relentless perseverance

I need assistance finding a solution to my question. Can my friends help me out? What types of requests do I receive: facebook, linkedin, reddit I want to simplify my code and avoid writing lengthy blocks. How can I create a check loop to send the same ...

javascriptnode.jsexpressif-statementejs

Watch the video and follow along with your mouse using jQuery

Wouldn't it be cool to have a video play and follow your mouse pointer when you hover over the red box? And then once you move away, the video stops and disappears. Check out my progress so far: jsfiddle Here's the jQuery code I've used: $ ...

javascriptjqueryhtmlcss

Enhancing User Experience with React-Redux: Implementing Subcategory Visibility based on Main Category Selection

How can I implement action logic to show and hide elements based on user interaction with main categories? Currently, all subcategories are being displayed at once, but I want them to be shown only when a user clicks on the corresponding main category. For ...

javascriptreactjsreduxnext.jsreact-redux

Preventing the $_POST action value from being altered to match the ajax page path

My current setup involves using php, jquery, and ajax to update a particular section. The ajax call is executed successfully, but I encounter an issue where the global $_SERVER[SCRIPT_NAME] changes to match the ajax path when the requested data is returned ...

javascriptphpjqueryajaxbootstrap-modal

Hide the div once it goes off screen, ensuring that the user stays in the same position on the page

On my website, I implemented an effect similar to the Airbnb homepage where there is a "How it Works" button that toggles a Div element pushing down the entire page. However, when the user scrolls to the bottom of the toggled div (#slideDown) and it disapp ...

javascriptjqueryhtmlcss

The Power of Asynchronous Programming with Node.js and Typescript's Async

I need to obtain an authentication token from an API and then save that token for use in future API calls. This code snippet is used to fetch the token: const getToken = async (): Promise<string | void> => { const response = await fetch(&apos ...

javascriptnode.jstypescriptasynchronousasync-await