0

I'm using Three.js and I encountered a problem in some circumstances.
This is the problem: http://i60.tinypic.com/1zz6jac.png

I've done my researches and I know this is a CanvasRenderer problem, there is no way to solve this without using WebGLRenderer?

I tried to use WebGLRenderer but now I have more problems because I create my script around CanvasRenderer:
http://i59.tinypic.com/9joktu.png
Furthermore using WebGLRenderer the opacity doesn't work anymore on my cubes and lines, it can be seen it in the grid under the cubes in screenshots.

Julo
  • 75
  • 1
  • 6
  • 1
    1. What, exactly, is your question? 2. Show your code so we know what you are doing. – WestLangley May 16 '14 at 15:27
  • This is a jfiddle http://jsfiddle.net/Z87uX/1/ clicking on the button change only the y position but create a glitch. My first question is: how can I write a script without this graphic glitch using CanvasRenderer? – Julo May 16 '14 at 15:49
  • Is this better? http://jsfiddle.net/Z87uX/3/ – WestLangley May 16 '14 at 16:02
  • This is not better, this is PERFECT. Thanks. I'm new on stackoverflow, how can I reward your answer? – Julo May 16 '14 at 16:08

1 Answers1

1

What you are seeing is an artifact of CanvasRenderer. The best you can do is tessellate your geometry. For example,

THREE.BoxGeometry( 10, 10, 10, 4, 4, 4 );

Fiddle: http://jsfiddle.net/Z87uX/3

three.js r.67

WestLangley
  • 102,557
  • 10
  • 276
  • 276