4

JSONとしてロードされたデータから構築されたシーンにチューブジオメトリがあります。各セグメントにマーカーとして線を引く必要があります。そのために、顔の図心を始点とし、図心の各座標に線の終点として10を追加します。

ライン付きチューブのjsfiddleを見つけてください

顔の中心から線を追加するコードの下にあります。

var lineGeo, lineMat, line;
var fx=tube.faces[3].centroid.x;
var fy=tube.faces[3].centroid.y;
var fz=tube.faces[3].centroid.z;
lineGeo = new THREE.Geometry();
lineGeo.vertices.push(new THREE.Vector3(fx, fy, fz), new THREE.Vector3(fx+50, fy+50, fz+50));

lineMat = new THREE.LineBasicMaterial({color: 0x000000, lineWidth: 2});                 
line = new THREE.Line(lineGeo, lineMat);
line.type = THREE.Lines;
tubeMesh.add(line);

行末にテキストを配置するにはどうすればよいですか？実稼働環境では、チューブは2000の座標で作成され、マーカーとして200の線があります。各マーカー（行）の最後にテキストを配置する必要があります。

4

2 に答える 2

1

線の座標を取得し、それにオフセットを適用して、そのすぐ上に平面を作成してみませんか。そうすれば、その平面にテキストを含むテクスチャを表示できます。後で、「不透明度」パラメーターをデフォルトで「0」に設定し、顔を選択するときに「1」に戻します。これらのテクスチャを作成する方法はいくつかあります。

1）すべてのテキストを画像としてインポートできます（200以上あるので、これはあなたの場合ではありません）。

2) キャンバス要素を作成し、CSS でテキストを描画し、後でこのキャンバスを特定の平面のテクスチャとして使用できます。リアルタイムの 3D ダイナミック テキストを生成すると fps が低下するだけなので、個人的にはこれが最適なソリューションだと思います。

最初に、新しい canvas 要素を作成します。

texture_placeholder = document.createElement( 'canvas' );
texture_placeholder.width = 100;
texture_placeholder.height = 20;

次に、キャンバス内にテキストを設定します。

var context = texture_placeholder.getContext( '2d' );
context.fillStyle = '#f00'; 
context.textAlign = "center";
context.textBaseline = "middle";           
context.font = ' bold 150px';             
context.fillText('This is the 3rd face!', texture_placeholder.width / 2, texture_placeholder.height / 2);

次に、キャンバスに基づいてテクスチャを作成します。

var texture = new THREE.Texture( texture_placeholder );
texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true, side:THREE.DoubleSide } );

最後に、新しいプレーン メッシュを設定します。

var plane = new THREE.PlaneGeometry( 100, 20 );
var text = new THREE.Mesh( plane, material )

それが役立つことを願っています! これがあなたの例です：http://jsfiddle.net/WT6jL/1/

于 2012-12-05T13:14:03.530 に答える
1

テキストから canvas 要素に画像を作成し、three.js でその画像をテクスチャとして適用する別の完全に詳細な例を次に示します。

http://stemkoski.github.com/Three.js/Texture-From-Canvas.html

それが役に立てば幸い！

于 2013-03-12T22:06:19.970 に答える