これには本当に苦労しました。Three.js の CSS3D レンダラーを使用するプログラムがあり、div (単一の画像を含む) のピクセル単位で投影された「実際の」画面幅を取得しようとしています。
画像で getBoundingClientRect() を使用しようとしましたが、その関数から返される幅と高さが間違っています。パースペクティブの問題が原因だと思います。
私はまた、正確な中心座標を提供するこの方法を試しました.mrdoobによるこの投稿からです: https://stackoverflow.com/a/11605007
var width = window.innerWidth, height = window.innerHeight;
var widthHalf = width / 2, heightHalf = height / 2;
var projector = new THREE.Projector();
var vector = projector.projectVector( object.matrixWorld.getPosition().clone(), this.camera );
vector.x = ( vector.x * widthHalf ) + widthHalf;
vector.y = -( vector.y * heightHalf ) + heightHalf;
残念ながら、オブジェクトの上隅、左隅、または任意の隅を取得するために見つけたすべてのメソッドは、CSS3DObject が使用しない Geometry オブジェクトを使用します (つまり、隅の頂点のベクトルを取得し、それらのベクトルを投影します ref: https://stackoverflow. com/a/14044103/2009076 )。
誰でもこれを達成する方法を知っていますか? 簡潔に言うと、Three.js CSS3D シーンで div の実際の画面上のサイズ (img の周囲にぴったりと収まる) を取得したいと思います。最後に、カメラのズームによって画像が元のサイズよりも大きくなったかどうかを検出したいと思います。
ありがとう！