CODEWITHSUNDEEP
javascriptthree.jstransparencyartifacts
Ricardo Marques
Ricardo Marques

Reputation: 75

Three.js touching faces artifacts

I've created two transparent boxes whose faces touch. This works great unless the boxes' faces touch.

// inner object
var mesh2 = new THREE.Mesh(geometry, material); 

mesh2.position.x = 0;
mesh2.position.y = 0;
mesh2.position.z = 0;

mesh2.scale.x = 100;
mesh2.scale.y = 50;
mesh2.scale.z = 100;

scene.add( mesh2 ); 

// outer object
var mesh1 = new THREE.Mesh(geometry, material); 

mesh1.position.x = 0;
mesh1.position.y = 0;
mesh1.position.z = 0;

mesh1.scale.x = 100;
mesh1.scale.y = 100;
mesh1.scale.z = 100; 

scene.add( mesh1 );

Here's the code: http://jsfiddle.net/unkya/14/

How do I get rid of these artifacts and still have the faces touch?

Also, is there a way to add the boxes to the scene without having to insert the inner most ones first?

Many thanks!

Upvotes: 1

Views: 984

Answers (1)

Flux
Flux

Reputation: 666

This is called z-fighting.

There are two ways around this.

The first is simply to offset the values by a small amount. Even 0.01 might do it. The important part here is to ensure your camera's near plane and far plane are within ranges that are reasonable.

The second way is to use the polygonOffset property of THREE.js materials. This will allow you to force an object to render above or below other objects, similar to a z-index ordering. I believe transparency also needs to be enabled, so you should put this on your semi-transparent cube if possible.

Upvotes: 2

Related Questions