Three.jsで複雑な3Dエンブレムに平面UV投影を行う際の問題について

実現したいこと

Three.jsで複雑な3Dエンブレムにユーザー指定のロゴテクスチャを動的に投影したい

既存のモデリング済み3Dテキストと干渉せず、綺麗に表示させたい

メッシュ名に依存しない安定した処理にしたい

モデルの向きに依存しない正しいUV投影を行いたい

前提

Three.js を使って3Dカスタマイザーを開発しています。

製品のエンブレム部分に、ユーザーがアップロードしたロゴ画像を動的に投影する機能を実装しています。

エンブレムは以下のような構成です：

背景プレート（平面メッシュ）

その上に配置されたモデリング済みの3Dテキスト（複数メッシュ）

現在は、バウンディングボックスを基準にした planar projection を用いて、ランタイムでUVを生成しています。

発生している問題・エラーメッセージ

明確なエラーは出ていませんが、以下の問題が発生しています。

ジオメトリ干渉
元の3Dテキストと投影テクスチャが干渉し、Z-fightingのような「ひび割れ」アーティファクトが発生します。

メッシュ非表示ロジックの不安定さ
投影時に既存テキストメッシュを非表示にしていますが、モデルによって命名規則が統一されておらず、背景プレートまで非表示になることがあります。

投影軸の誤判定
モデルの向きによってX/Y/Z軸の判定がずれ、正面から見えないことがあります。

該当のソースコード

JavaScript
1function applyPlanarUV(mesh) {
2  const box = new THREE.Box3().setFromObject(mesh);
3  const size = new THREE.Vector3();
4  box.getSize(size);
5
6  const geometry = mesh.geometry;
7  geometry.computeBoundingBox();
8
9  const position = geometry.attributes.position;
10  const uv = [];
11
12  for (let i = 0; i < position.count; i++) {
13    const x = position.getX(i);
14    const y = position.getY(i);
15    const z = position.getZ(i);
16
17    // Z軸方向から投影している想定
18    uv.push(
19      (x - box.min.x) / size.x,
20      (y - box.min.y) / size.y
21    );
22  }
23
24  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uv, 2));
25  geometry.attributes.uv.needsUpdate = true;
26}