如何將相機座標設置爲three.js中的對象？使用示例「webgl obj + mtl loader」

Question

我有一個3D model的.obj格式。但是，此3D模型的座標不是（0,0,0）。這是無人機圖像的3D渲染，因此座標是實際的地理座標。

我在Three.js中關於如何在webgl上加載一個帶有mtl的obj的例子。我使用原始的HTML，只是我簡單地用CerroPelaoLow替換了列爲male02的obj，並將這些文件放置在obj目錄中。 Firefox正確顯示模型，但位置是問題所在。

請注意，此渲染是由程序以這種方式生成的，即使我可以使用Meshlab等程序操縱模型，我仍然傾向於儘可能少的操作。

那麼，我怎樣才能使用我的對象的本地座標或對焦相機，然後使用不同的控件集？

Answer 1

您可以使用對象幾何圖形的boundingSphere或boundingBox來確定相機的位置和位置。我已經實現了一個功能來聚焦一個對象或一組對象。所以，這裏我分享一些代碼：

// assuming following variables: 
// object -> your obj model (THREE.Mesh) 
// camera -> PerspectiveCamera 
// controls -> I'm also using OrbitControls 


// if boundingSphere isn't set yet 
object.computeBoundingSphere(); 

var sphere = object.geometry.boundingSphere.clone(); 
sphere.applyMatrix4(object.matrixWorld); 

// vector from current center to camera position (shouldn't be zero in length) 
var s = new THREE.Vector3().subVectors(camera.position, controls.center); 

var h = sphere.radius/Math.tan(camera.fov/2 * Math.PI/180); 

var newPos = new THREE.Vector3().addVectors(sphere.center, s.setLength(h)); 

camera.position.copy(newPos); 
controls.center.copy(sphere.center);