CODEWITHSUNDEEP
javascript3dthree.js
YannisP
YannisP

Reputation: 69

THREE.js - Graphical Glitch with an imported model

I'm experiencing a graphical glitch with an imported model while using JSONLoader. I can't really explain it, you'll have to see it.
It may have something to do with the different materials and the camera POV.

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

JSONLoader part of the code:

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);
} );

a screenshot of the glitch

Upvotes: 1

Views: 825

Answers (1)

WestLangley
WestLangley

Reputation: 104763

The "glitch" you are referring to is due to z-fighting.

Your camera near plane is 0.01 and far plane is 20000. Small values of the near plane can lead to depth-sorting precision problems.

In your case, set your near plane to, 1 or 10.

ref: http://www.opengl.org/wiki/Depth_Buffer_Precision.

three.js r.81

Upvotes: 1

Related Questions