Неправильный z-индекс треугольника в Three JS создает артефакт

Я использую Three.js и при некоторых обстоятельствах столкнулся с проблемой.
Проблема заключается в следующем: http://i60.tinypic.com/1zz6jac.png

Я провел исследование и знаю, что это проблема CanvasRenderer, и нет способа решить ее без использования WebGLRenderer?

Я пытался использовать WebGLRenderer, но теперь у меня больше проблем, потому что я создаю свой скрипт вокруг CanvasRenderer:
http://i59.tinypic.com/9joktu.png
Кроме того, при использовании WebGLRenderer непрозрачность больше не работает на моих кубах и линиях, это видно в сетке под кубами на скриншотах.


javascript three.js visual-artifacts
person Julo    schedule 16.05.2014    source источник
comment
1. В чем именно заключается ваш вопрос? 2. Покажите свой код, чтобы мы знали, что вы делаете.   -  person WestLangley    schedule 16.05.2014
comment
Это jfiddle jsfiddle.net/Z87uX/1, нажатие на кнопку изменяет только положение y, но создать глюк. Мой первый вопрос: как я могу написать скрипт без этого графического глюка, используя CanvasRenderer?   -  person Julo    schedule 16.05.2014
comment
Это лучше? jsfiddle.net/Z87uX/3   -  person WestLangley    schedule 16.05.2014
comment
Это не лучше, это ИДЕАЛЬНО. Спасибо. Я новичок в stackoverflow, как я могу вознаградить вас за ответ?   -  person Julo    schedule 16.05.2014

Ответы (1)


arrow_upward
1
arrow_downward

То, что вы видите, является артефактом CanvasRenderer. Лучшее, что вы можете сделать, это тесселяции вашей геометрии. Например,

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

Скрипт: http://jsfiddle.net/Z87uX/3

три.js р.67

person WestLangley    schedule 16.05.2014