ThreeJSオブジェクトにDIVを合わせると、3Dワールドとの位置同期が維持されます
Ryum Aayur
ThreeJsの3Dオブジェクト上の2D空間にDIVを配置して、ワールドが回転するとDIVも一緒に移動するようにする方法。
注：3Dオブジェクトはモデルから読み込まれるため、グループ内にグループがあり、次にメッシュがあります。
無線
スプライトだけでなく、何らかの理由でdivを使用したい場合は、画面変換を行うこともできます。
objがobject3dであり、レンダラー、カメラが定義されて使用可能である場合、関数からのx値とy値をCSSに渡すことができます。
function getScreenTranslation (obj) {
var vector = new THREE.Vector3();
var widthHalf = 0.5 * renderer.context.canvas.width;
var heightHalf = 0.5 * renderer.context.canvas.height;
var bbox = new THREE.BoundingBoxHelper(obj, 0xFFFFFF);
bbox.update();
bbox.updateMatrixWorld();
bbox.updateMatrix();
vector.setFromMatrixPosition(bbox.matrixWorld);
vector.project(camera);
vector.x = vector.x * widthHalf + widthHalf;
vector.y = -(vector.y * heightHalf) + heightHalf;
return {
x: vector.x,
y: vector.y
};
};
設定によっては、シーンが変化してオブジェクトが移動したときに、divの位置を更新する必要があります。これは、カメラまたはコントロールを使用して行うことができます。ボイラープレートはコントロール入力でのみ世界を変更するため、変更イベント関数を使用します。
this.controls.addEventListener('change', my_change_event_function);
管理しているdivを知るのは難しいため、ここで例を示すのは困難です。しかし、例えば私はjquerydivで3Dオブジェクトと対応するラベルの多次元配列を管理しています。
配列の構造は次のとおりです。[[div、object3d]、[div、object3d]、[div、object3d]、[div、object3d]]
コントロールの変更イベントは次のように実行されます。
if (labels !== undefined) {
for (var i = 0; i < labels.length; i++) {
var position = getScreenTranslation(labels[i][1]);
labels[i][0].css({
left: position.x,
top: position.y
});
}
}
作業中のフィドルを編集する：https：//jsfiddle.net/dpe5r41g/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
配列のオブジェクトを配列に追加すると、オブジェクトのソート順が毎回維持されますか?
- 2
CSSで別のオブジェクトにカーソルを合わせると、@ keyframesアニメーションがトリガーされます
- 3
Threejs-ロードされた3Dオブジェクトの不透明度を変更する
- 4
VisualStudioでVisualC ++ファイルをコンパイルすると、オブジェクトファイルの代わりに3Dオブジェクトファイルが作成されます
- 5
別のゲームオブジェクトとの相対位置を維持しながらゲームオブジェクトを回転させる方法が修正されました
- 6
再生ボタンがクリックされたときにオブジェクトをその位置に維持する方法
- 7
反応入力フィールドを操作すると、保存しようとしても合成と表示され、defaultValueの代わりに値を設定すると[オブジェクト、オブジェクト]がレンダリングされます。
- 8
3D空間でのプレーヤーオブジェクトの位置と回転をカメラに追跡させる（Unity3d）
- 9
Unity 3Dは、両方に影響を与えることなく、別のオブジェクト内でオブジェクトを回転させます
- 10
Threejsは、3Dマトリックス軸で別のオブジェクトを中心にオブジェクトを回転させます
- 11
カラーバーを作成すると、以前に位置合わせされていた2つの軸オブジェクトが相互にシフトします-Matplotlib
- 12
オブジェクトを比較するために選択されたフィールドが等しい場合、Javaは複数のフィールドを持つオブジェクトのリストをどのようにソートすることを決定しますか？
- 13
オブジェクトがロックされ、このオブジェクトが置き換えられると、ロックは維持されますか？
- 14
マトリックス内のある位置でオブジェクトフィールドを変更すると、Pythonの他の場所にある他のオブジェクトフィールドが変更されます
- 15
地理位置情報 (機能に近い) を使用して mongodb でレコードを検索すると、場所フィールドがオブジェクトにネストされている場合は機能しませんでした
- 16
デフォルトのコンストラクターからオーバーロードされたコンストラクターを呼び出すときに、オブジェクトの状態情報を維持する
- 17
d3.jsのリンクとノードのイベントにマウスを合わせると、テキストが表示されます。
- 18
react-三繊維3Dオブジェクト（.obj）モデルが影を落とさない
- 19
Kafka AvroSchemaは生成されません。オブジェクトタイプとしてデータ型のフィールドを持つクラスの場合
- 20
ローカルプロジェクトをVPSと同期するときの移行の更新または維持
- 21
オブジェクトをモジュールパターンと組み合わせるときに何が間違っているのですか
- 22
ドキュメントをスクロールすると、ウィンドウ上のオブジェクトの高さと位置が変化します
- 23
（THREE.mesh）3Dオブジェクトを、すでに軸を中心に回転している別のオブジェクトの周りで回転させようとしています。ポインターはありますか？
- 24
非同期パイプを使用すると、オブジェクトタイプへの参照が失われます
- 25
TreeSetに暗黙のフィールド値を持つ複雑なオブジェクトが含まれていることを確認する方法
- 26
プレーヤーが特定のタグを持つオブジェクトと衝突したときにUnity3Dがサウンドを再生する
- 27
オブジェクトの配列を組み合わせ、同じ値のキーを組み合わせ、一意の値を維持します
- 28
初期ロード時にThree.JSCanvas内に3Dオブジェクト（Colladaファイル）を合わせる
- 29
並べ替えと他のすべてのフィールドを維持しながら、NSMutableArrayから重複オブジェクトを削除します
コメントを追加