6、面点击移动到屏幕中心

这部分也是碰到了不少坑，起首的设法主意是：

面中间点今朝是活着界坐标系内的坐标，先用center.project(camera)获得归一化设备坐标，在根据ndc获得屏幕坐标，而后根据面中间点屏幕坐标与屏幕中间点坐标做插值，获得偏移量，在根据OribitControls中的pan办法来更新相机地位。这种方法最终以掉败了却，因为相机可能做各类变换，所以屏幕坐标的偏移与3d世界坐标系中的地位关系并不是线性对应的。

最终的设法主意是：

所以要在3D应用做点击拾取，起重要将屏幕坐标系转化成ndc坐标系，这时刻获得ndc的xy坐标，因为2d屏幕并没有z值所以，屏幕点缀化成3d坐标的z可以随便取值，一般取0.5(z在-1到1之间)。

因为用户会在2D、3D场景下做很多操作，比如平移、缩放、扭转，要想无缝切换，这个关键在于将平行投影与视锥体相机的地位、lookAt方法保持一致;以及将他们放大年夜缩小的关键点：distance的比例与zoom来保持一致。

我们如今想将点击面的中间点移到屏幕中间，屏幕中间的ndc坐标永远都是(0,0)我们的不雅察视线与近景面的核心的ndc坐标也是0,0;也就是说我们要将面中间点作为我们的不雅察点(屏幕的中间永远都是相机的不雅察视线)，这里我们可以直接将面中间所谓视线的不雅察点，应用lookAt办法求取相机矩阵，但如不雅如许简单处理后的效不雅就会给人感到相机的姿势变更了，也就是会感到并不是平移以前的，所以我们要做的是保持相机当缁に态将面中间作为相机不雅察点。

回想平移时我们将屏幕移动转化为相机变更的过程是知道屏幕偏移求target，这里我们要做的就是知道target反推屏幕偏移的过程。起首根据当前target与面中间求出相机的偏移向量，根据相机偏移向量求出在相机x轴和up轴的投影长度，根据投影长度就能返推出应当在屏幕上的平移量。

this.unprojectPan = function(deltaVector, moveDown) { 
 
    // var getProjectLength() 
 
    var element = scope.domElement === document ? scope.domElement.body : scope.domElement; 
 
  
 
    var cxv = new Vector3(0, 0, 0).setFromMatrixColumn(scope.object.matrix, 0);// 相机x轴 
 
    var cyv = new Vector3(0, 0, 0).setFromMatrixColumn(scope.object.matrix, 1);// 相机y轴 
 
    // 相机轴都是单位向量 
 
    var pxl = deltaVector.dot(cxv)/* / cxv.length()*/; // 向量在相机x轴的投影 
 
    var pyl = deltaVector.dot(cyv)/* / cyv.length()*/; // 向量在相机y轴的投影 
 
  
 
    // offset=dx * vector(cx) + dy * vector(cy.project(xoz).normalize) 
 
    // offset由相机x轴偏向向量+相机y轴向量在xoz平面的投影构成 
 
    var dv = deltaVector.clone(); 
 
    dv.sub(cxv.multiplyScalar(pxl)); 
 
    pyl = dv.length(); 
 
  
 
    if ( scope.object instanceof PerspectiveCamera ) { 
 
      // perspective 
 
  
 
      var position = scope.object.position; 
 
      var offset = new Vector3(0, 0, 0); 
 
      offset.copy(position).sub(scope.target); 
 
      var distance = offset.length(); 
	
			
 3/5   首页 上一页 1 2 3 4 5 下一页 尾页
	
			

　　推荐阅读
　　出了Linux故障找不到方法？看大牛简单、朴实的解决思路
            【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！与windows系同一样，linux操作体系也会存在很多问题和故障，很多linux新手都害怕故障，面对出现的问题显得无可奈何，更有>>>详细阅读


本文标题：Threejs开发3D地图实践总结
地址：http://www.17bianji.com/lsqh/36340.html
 1/2    1