Three.js：如何计算相机图像中对象的最小边界矩形？

时间：2019-05-19 17:08:00

标签： javascript three.js

我想计算并绘制相机图像（2D投影）中对象的最小边界矩形（MBR）。 下图显示了下面提供的示例的cube对象的MBR。 我拍摄了相机图像的屏幕截图，并用肉眼手动绘制了MBR（红色矩形）。 如何以编程方式计算MBR（摄像机图像中的大小和位置）并将其绘制在摄像机图像的画布中（实时）？

bounding rectangular

编辑：我根据相关的solution在示例中添加了MBR，但是我将MBR绘制在2D覆盖画布上。直到您移动相机（使用鼠标）之前，它都可以正常工作。然后MBR不正确（移位和错误的大小）。计算是否不适合我的示例，或者实现中存在错误？

注意：我不仅要绘制MBR，还要找出相机图像上的2D坐标和尺寸。

function computeScreenSpaceBoundingBox(mesh, camera) {
  var vertices = mesh.geometry.vertices;
  var vertex = new THREE.Vector3();
  var min = new THREE.Vector3(1, 1, 1);
  var max = new THREE.Vector3(-1, -1, -1);

  for (var i = 0; i < vertices.length; i++) {
    var vertexWorldCoord = vertex.copy(vertices[i]).applyMatrix4(mesh.matrixWorld);
    var vertexScreenSpace = vertexWorldCoord.project(camera);
    min.min(vertexScreenSpace);
    max.max(vertexScreenSpace);
  }

  return new THREE.Box2(min, max);
}

function normalizedToPixels(coord, renderWidthPixels, renderHeightPixels) {
  var halfScreen = new THREE.Vector2(renderWidthPixels/2, renderHeightPixels/2)
  return coord.clone().multiply(halfScreen);
}

const scene = new THREE.Scene();
const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 1, 1, 0.5 ).normalize();
scene.add( light );
scene.add(new THREE.AmbientLight(0x505050));

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

const renderWidth = window.innerWidth;
const renderHeight = window.innerHeight;
const camera = new THREE.PerspectiveCamera( 75, renderWidth / renderHeight, 0.1, 1000 );
camera.position.z = 10;

const controls = new THREE.OrbitControls( camera );
controls.update();

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const clock = new THREE.Clock();

const overlayCanvas = document.getElementById('overlay');
overlayCanvas.width = renderWidth;
overlayCanvas.height = renderHeight;
const overlayCtx = overlayCanvas.getContext('2d');
overlayCtx.lineWidth = 4;
overlayCtx.strokeStyle = 'red';


const animate = function () {
  const time = clock.getElapsedTime() * 0.5;
  
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  cube.position.x = Math.sin(time) * 5

  controls.update();
  renderer.render( scene, camera );
  
  const boundingBox2D = computeScreenSpaceBoundingBox(cube, camera);
  // Convert normalized screen coordinates [-1, 1] to pixel coordinates:
  const {x: w, y: h} = normalizedToPixels(boundingBox2D.getSize(), renderWidth, renderHeight); 
  const {x, y} =
    normalizedToPixels(boundingBox2D.min, renderWidth, renderHeight)
      .add(new THREE.Vector2(renderWidth / 2, renderHeight / 2)); 
  
  overlayCtx.clearRect(0, 0, renderWidth, renderHeight);
  overlayCtx.strokeRect(x, y, w, h);
};

animate();
body {
  margin: 0px;
  background-color: #000000;
  overflow: hidden;
}

#overlay {
  position: absolute;
}
<body>
    <script src="https://unpkg.com/three@0.104.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.104.0/examples/js/Detector.js"></script>
    <script src="https://unpkg.com/three@0.104.0/examples/js/controls/OrbitControls.js"></script>
    <canvas id="overlay"></canvas>
</body>

注意：：如果我的问题不清楚，请写评论，以便我知道要详细描述的内容。

1 个答案:

答案 0 :(得分：1)

感谢WestLangley将我指向solution的相关Holger L，并感谢manthrax修复了该解决方案中的错误，使我错过了我的错误拥有。在我的示例中，我只是将y坐标从WebGL 2D屏幕坐标（原点位于画布的中心，y轴指向上方）错误地转换为常规2D画布坐标（原点在画布的左上角）和y轴指向下方）。我不认为y轴是反向的。下面是该示例的固定版本：

function computeScreenSpaceBoundingBox(mesh, camera) {
  var vertices = mesh.geometry.vertices;
  var vertex = new THREE.Vector3();
  var min = new THREE.Vector3(1, 1, 1);
  var max = new THREE.Vector3(-1, -1, -1);

  for (var i = 0; i < vertices.length; i++) {
    var vertexWorldCoord = vertex.copy(vertices[i]).applyMatrix4(mesh.matrixWorld);
    var vertexScreenSpace = vertexWorldCoord.project(camera);
    min.min(vertexScreenSpace);
    max.max(vertexScreenSpace);
  }

  return new THREE.Box2(min, max);
}

function normalizedToPixels(coord, renderWidthPixels, renderHeightPixels) {
  var halfScreen = new THREE.Vector2(renderWidthPixels/2, renderHeightPixels/2)
  return coord.clone().multiply(halfScreen);
}

const scene = new THREE.Scene();
const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 1, 1, 0.5 ).normalize();
scene.add( light );
scene.add(new THREE.AmbientLight(0x505050));

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

const renderWidth = window.innerWidth;
const renderHeight = window.innerHeight;
const camera = new THREE.PerspectiveCamera( 75, renderWidth / renderHeight, 0.1, 1000 );
camera.position.z = 10;

const controls = new THREE.OrbitControls( camera );
controls.update();

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const clock = new THREE.Clock();

const overlayCanvas = document.getElementById('overlay');
overlayCanvas.width = renderWidth;
overlayCanvas.height = renderHeight;
const overlayCtx = overlayCanvas.getContext('2d');
overlayCtx.lineWidth = 4;
overlayCtx.strokeStyle = 'red';


const animate = function () {
  const time = clock.getElapsedTime() * 0.5;
  
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  cube.position.x = Math.sin(time) * 5

  controls.update();
  renderer.render( scene, camera );
  
  const boundingBox2D = computeScreenSpaceBoundingBox(cube, camera);
  // Convert normalized screen coordinates [-1, 1] to pixel coordinates:
  const {x: w, y: h} = normalizedToPixels(boundingBox2D.getSize(), renderWidth, renderHeight); 
  const {x, y} =
    normalizedToPixels(boundingBox2D.getCenter(), renderWidth, renderHeight)
      .multiply(new THREE.Vector2(1, -1))
      .add(new THREE.Vector2((renderWidth - w) / 2, (renderHeight - h) / 2));
  
  overlayCtx.clearRect(0, 0, renderWidth, renderHeight);
  overlayCtx.strokeRect(x, y, w, h);
};

animate();
body {
  margin: 0px;
  background-color: #000000;
  overflow: hidden;
}

#overlay {
  position: absolute;
}
<body>
    <script src="https://unpkg.com/three@0.104.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.104.0/examples/js/Detector.js"></script>
    <script src="https://unpkg.com/three@0.104.0/examples/js/controls/OrbitControls.js"></script>
    <canvas id="overlay"></canvas>
</body>

相关问题
最新问题