4
votes

If you look at http://stemkoski.github.io/Three.js/Wireframe.html without enable webgl, you see a white diagnal line crossing the texture. This happens only in CanvasRenderer. Does anyone knows how can this be fixed.

Diagnal line crossing the texture

When WebGL is enabled, the output is correct, like below:enter image description here

1

1 Answers

5
votes

The diagonal lines are an artifact of CanvasRenderer. You can compensate for them by setting material.overdraw = 0.5, or some number between 0 and 1.

The distortion in the checkerboard pattern when using CanvasRenderer is explained in the answer to ThreeJS Cube texture strange visual.

UPDATED: Material.overdraw used to be a boolean. It is now a number.

three.js r.61