如何將邊界框附加到相機？

我使用Three.js和PointerLockControls.js。我想給我的相機添加一個容易理解的邊界框。我想開發一種場景，當我離開或碰撞某個物體時（當相機與它碰撞時），我希望能夠檢測到它，並以某種方式處理碰撞。我的第一個想法是創建一個新的網格物體，給它一個透明的材質，並將其移動到與我使用相機相同的方式，但這不起作用，因爲一段時間後，我的網格物體將開始向不同於我的方向移動相機出於某種原因（在下面的代碼中，這個相機盒是紅色的）。這是我創造的攝像頭和網格的方式：如何將邊界框附加到相機？

var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 
    controls = new THREE.PointerLockControls(camera); 

    scene.add(controls.getObject()); 

    controls.getObject().position.set(20, 30, 20); 

    var cameraBox = new THREE.Mesh(
      new THREE.BoxGeometry(20, 30, 20), 
      new THREE.MeshBasicMaterial({color: 0xff0000}) 
    ); 

    cameraBox.position.set(20, 30, 20); 
    scene.add(cameraBox);

這是我的渲染功能：

 function render() { 
      var delta = clock.getDelta(); 
      if (controlsEnabled) { 
       velocity.x -= velocity.x * 10.0 * delta; 
       velocity.z -= velocity.z * 10.0 * delta; 
       velocity.y -= 9.8 * 100.0 * delta; // 100.0 = mass 

       if (moveForward) velocity.z -= 200.0 * delta; 
       if (moveBackward) velocity.z += 200.0 * delta; 
       if (moveLeft) velocity.x -= 200.0 * delta; 
       if (moveRight) velocity.x += 200.0 * delta; 

       controls.getObject().translateX(velocity.x * delta); 
       controls.getObject().translateY(velocity.y * delta); 
       controls.getObject().translateZ(velocity.z * delta); 

       cameraBox.translateX(velocity.x * delta); 
       cameraBox.translateY(velocity.y * delta); 
       cameraBox.translateZ(velocity.z * delta); 

       if (controls.getObject().position.y < 30) { 
        velocity.y = 0; 
        controls.getObject().position.y = 30; 
        canJump = true; 
       } 

       if (cameraBox.position.y < 30) { 
        velocity.y = 0; 
        cameraBox.position.y = 30; 
        canJump = true; 
       } 
      } 

      requestAnimationFrame(render); 
      webGLRenderer.render(scene, camera); 
     }

我寫我自己的方法來獲取對象的（而網格的）邊界框，因爲我發現computeBoundingBox（）方法相當混亂。看來它不會考慮Mesh目前的位置。我使用Mesh的geometry屬性傳遞尺寸對象。

function getBoundingBox(position, dimensions) { 
    return { 
     minX: position.x, 
     maxX: position.x + dimensions.width, 
     minY: position.y, 
     maxY: position.y + dimensions.height, 
     minZ: position.z, 
     maxZ: position.z + dimensions.depth 
    }; 
}

其他想法，我必須是使用controls.getObject（）的位置座標，這將使我的相機的位置（？），但這些座標是，再次，怪異，似乎不相同就好像我得到了Mesh的位置。提前致謝！

來源

2016-05-06 masm64

您可以創建從object邊框和檢測用相機像這樣的碰撞：

var boundingBox = new THREE.Box3().fromObject(object); 
var collision = boundingBox.containsPoint(camera.position);

碰撞true如果相機與相交。

來源

2016-05-06 11:04:03 Wilt

如何將邊界框附加到相機？

回答

相關問題