「WebGLで表示できるメッシュは三角面」ということを知らずにBlenderからglTF形式でエクスポートしていました。２つの球体を結合したオブジェクトの継ぎ目が、Blenderではきれいに見えていますが…
オブジェクトをThree.jsで表示すると、思いがけずガタガタになっている部分が発生し滑らかさが崩れています。
BlenderとglTFの面を比べてみる
まずBlenderでオブジェクトを作ります。Tesselatorというアドオンを使って四角面、解像度16、細分化０でリメッシュしたオブジェクト。
glTFにエクスポートしたもの。面が三角になっています。
色をつけて光を当てると継ぎ目がガタガタになっているのがわかります。粗い三角面でリメッシュがかかったみたいな感じです。
継ぎ目の滑らかさを保つにはあと少し手間をかける必要がありそうです。
