CODEWITHSUNDEEP
javascriptthree.js
softwaredeveloper
softwaredeveloper

Reputation: 33

Three.js & Potree: 3D Model Flickering

I'm working with this gltf model: http://virtualvizcaya.org/pages/1916barge1.html using Three.js and Potree. But the model is flickering. I've read these related posts Flickering planes and Texture/model flickering in distance (3D).

If I understood it correctly, it requires the PerspectiveCamera's near and far plane arguments to be distant from each other, but my attempt on this hasn't fix this problem.

Please help! (I'm pretty new on three.js and potree btw)

Upvotes: 0

Views: 2135

Answers (2)

Don McCurdy
Don McCurdy

Reputation: 12000

In my viewer (http://gltf-viewer.donmccurdy.com/) I've used the following code to configure the camera's near/far planes:

const object; // my model
const box = new THREE.Box3().setFromObject(object);
const size = box.getSize(new THREE.Vector3()).length();
const center = box.getCenter(new THREE.Vector3());

this.controls.reset();

object.position.x += (object.position.x - center.x);
object.position.y += (object.position.y - center.y);
object.position.z += (object.position.z - center.z);
controls.maxDistance = size * 10;
camera.near = size / 100;
camera.far = size * 100;
camera.updateProjectionMatrix();

There is some dependency here on scene scale and hardware precision — in your code you're scaling the model up significantly, and may want to try bringing the camera closer instead. But I'm not familiar with Potree, so I'm not sure what it might be doing that would give different results than using three.js alone.

Upvotes: 2

Yingcai
Yingcai

Reputation: 71

Like @Brakebein mentioned, this is called z-fighting. If you use WebGLRenderer, you could try:

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

Upvotes: 2

Related Questions