單擊以將相機放置在三個js中的對象附近

Question

我正在嘗試使用Three.js執行單擊以放大功能，我在畫布上放置了一個畫布和一個對象。單擊時我試圖放置相機靠近交點（實際上就像縮小那個點）。

這是我所做的，但沒有按照我想要的方式工作，點擊相機位置變化，但有些作品局部有時相機放置在交叉點附近，有些時候沒有。

onmousedown = function (event) { 

       var raycaster = new THREE.Raycaster(); 
       var mouse = new THREE.Vector2(); 

       event.preventDefault(); 
       mouse.x = (event.clientX/self.renderer.domElement.clientWidth) * 2 - 1; 
       mouse.y = -(event.clientY/self.renderer.domElement.clientHeight) * 2 + 1; 
       raycaster.setFromCamera(mouse, self.camera); 
       var objects = []; 
       for (var i = 0; i < self.scene.children.length; i++) { 
         if (self.scene.children[i] instanceof THREE.Group) { 
         objects.push(self.scene.children[i]); 
        } 
       } 
       console.log(objects); 
       var intersects = raycaster.intersectObjects(objects,true); 
       console.log(intersects.length); 
       if (intersects.length > 0) { 
          self.camera.up = new THREE.Vector3(0, 0, 1); 
        self.camera.lookAt(new THREE.Vector3(0, 0, 0)); 
        self.camera.position.z = intersects[0].point.z * .9; 
        self.camera.position.x = intersects[0].point.x * .9; 
        self.camera.position.y = intersects[0].point.y * .9; 



       } 

      }; 

這裏self是一個全球性的觀衆對象保持照相機，帆布，不同的對象等

0.9僅僅是用來放置相機在靠近交叉點的數。使用

相機PerspectiveCamera和控制是TrackballControls

new THREE.PerspectiveCamera(90, this.width/this.height, 1, 1000); 

加載的對象是從.OBJ或.dae文件，我希望這像click工作在對象上任何一點並把相機靠近會點。但相機正在移動，但有時不在我點擊的位置附近。

• 是否intersects[0]給出了最近的交叉點？或在相機的方向最近？
• 這裏我的錯誤是什麼？

我是三個js的新手，剛開始學習它。如果某件事或一些邏輯錯誤幫助我。

Answer 1

我已經有點接近我想要的三個js的例子。

Three JS webgl_decals

這是我做了什麼。

function zoomCam(event) { 

var point_mouse = new THREE.Vector2(), 
    var point_x = null; 
    var point_y = null; 
      if (event.changedTouches) { 

       point_x = event.changedTouches[ 0 ].pageX; 
       point_y = event.changedTouches[ 0 ].pageY; 
      } else { 

       point_x = event.clientX; 
       point_y = event.clientY; 
      } 

      point_mouse.x = (point_x/window.innerWidth) * 2 - 1; 
      point_mouse.y = -(point_y/window.innerHeight) * 2 + 1; 

      if (sceneObjects.length > 0) { 

       var raycaster = new THREE.Raycaster(); 
       raycaster.setFromCamera(point_mouse, camera); 
       var intersects = raycaster.intersectObjects(sceneObjects, true); 
       if (intersects.length > 0) { 
        var p = intersects[ 0 ].point; 
       var n = intersects[ 0 ].face.normal.clone(); 
       n.multiplyScalar(10); 
       n.add(intersects[ 0 ].point); 
       camera.position.copy(n); 
       camera.lookAt(p); 
       } 
      } 

我格式化/改變了代碼回答這裏可能有一些小問題。實施前檢查代碼。

Answer 2

該位置有點複雜的計算;您必須找到攝像機和交叉點之間的線段，並將攝像機放置在與交點相交的路段的特定距離處。

試試這個：

var length=[the desiderated distance camera-intersection] 
var dir = camera.position.clone().sub(intersects[0].point).normalize().multiplyScalar(length); 
camera.position = intersects[0].point.clone().add(dir); 
camera.lookAt(intersects[0].point); 

Answer 3

我創建了一個小提琴：http://jsfiddle.net/h5my29aL/

這不是那麼難。把你的物體想象成一顆行星，把你的相機想象成一顆衛星。您需要將相機放置在物體附近的某個軌道某處。三個包含一個使其簡單的distanceTo函數。該示例使用球體，但它可以使用任意網格。它測量從中心點到期望矢量3的距離。在你的情況下，vector3可能是拾取器光線返回的臉部位置。但無論如何，lookAt被設置爲網格，然後計算與頂點的距離，以使相機始終處於相同的高度，而不管頂點或面與目標中心的距離如何。

var point = THREE.GeometryUtils.randomPointsInGeometry(geometry, 1); 

    var altitude = 100; 

    var rad = mesh.position.distanceTo(point[0]); 
    var coeff = 1+ altitude/rad; 

    camera.position.x = point[0].x * coeff; 
    camera.position.y = point[0].y * coeff; 
    camera.position.z = point[0].z * coeff; 
    camera.lookAt(mesh.position);