Threejs开发3D地图实践总结

function fromNdcToScreen(x, y, container) {

return {

x: (x + 1) / 2 * container.offsetWidth,

y: (1 - y) / 2 * container.offsetHeight

};

}

然后将ndc坐标转化成3D坐标：

ndc = P * MV * Vec4 
 
Vec4 = MV-1 * P -1 * ndc

这个过程在Three中的Vector3类中已经有实现：

unproject: function () { 
 
  
 
        var matrix = new Matrix4(); 
 
  
 
        return function unproject( camera ) { 
 
  
 
            matrix.multiplyMatrices( camera.matrixWorld, matrix.getInverse( camera.projectionMatrix ) ); 
 
            return this.applyMatrix4( matrix ); 
 
  
 
        }; 
 
  
 
    }(),

将获得的3d点与相机地位结合起来做一条射线，分别与场景中的物体进行碰撞检测。起首与物体的外包球进行订交性检测，与球不订交的清除，与球订交的保存进入下一步处理。将所有外包球与射线订交的物体按照距离相机远拒绝行排序，然后将射线与构成物体的三角形做订交性检测。求出订交物体。当然这个过程也由Three中的RayCaster做了封装，应用起来很简单：

mouse.x = ndcPos.x; 
 
mouse.y = ndcPos.y; 
 
this.raycaster.setFromCamera(mouse, camera); 
 
var intersects = this.raycaster.intersectObjects(this._getIntersectMeshes(floor, zoom), true);

5、机能优化

跟着场景中的物体越来越多，绘制过程越来越耗时，导致手机端几乎无法应用。

在图形学琅绫擎有个很重要的概念叫“one draw all”一次绘制，也就是说调用画图api的次数越少，机能越高。比如canvas中的fillRect、fillText等，webgl中的drawElements、drawArrays;所以这里的解决筹划是对雷同样式的物体，把它们的侧面和顶面同一放到一个BufferGeometry中。如许可以大年夜大年夜降低画图api的调用次数，极大年夜的晋升衬着机能。

如许解决了衬着机能问题，然而带来了另一个问题，如今是吧所有样式雷同的面放在一个BufferGeometry中(我们称为样式图形)，那么在面点击时刻就无法零丁断定出到底是哪个物体(我们称为物体图形)被选中，也就无法对这个物体进行高亮缩放处理。我的处理方法是，把所有的物体零丁生成物体图形保存在内存中，做面点击的时刻用这部分数据来做订交性检测。对于选中物体后的高亮缩放处理，起首榜样式面中响应部分裁减掉落，然后把选中的物体图形参加参预景中，对它进行缩放高亮处理。裁剪办法是，记录每个物体在样式图形中的其实索引地位，在须要裁切时刻将这部分索引制零。在须要恢复的处地点把这部分索引恢复成原状。

2/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