three.js 给模型添加标注

JavaScript020

three.js 给模型添加标注,第1张

1. 需要有一个被选择的mesh,通过raycaster获取 2. 创建先和一个平面 3. 将线和标注的面放在获取的mesh上 var mouse =new THREE.Vector2() var raycaster =new THREE.Raycaster() mouse.x = (event.clientX / domElement.width) *2 -1 mouse.y = -(event.clientY / domElement.height) *2 +1 raycaster.setFromCamera(mouse, camera) var intersects = raycaster.intersectObjects(scene.children, false)//  selectedObject = intersects[0].object// 被选中的标注对象 //  var startP,endP// 这里也是通过raycaster获取到的 var color = parameters.hasOwnProperty("color") ? parameters.color :0x0000ff  var lineMat =new THREE.LineBasicMaterial({         "color": 0xff0000 }) var lineGeo =new THREE.Geometry() lineGeo.vertices.push(startPos) lineGeo.vertices.push(endPos) var line =new THREE.Line(lineGeo, lineMat) // 初始化一个sprite,这是一个始终面向相机的平面, var sprite = new textSprite(这并不是一个构造函数,不想写那么多,自行去官网查看) ....... sprite.scale.set(_spriteScale, _spriteScale, _spriteScale)// 设置的是sprite的大小 selectedObject.add(line)// 添加 line.worldToLocal(_endPos)// 设置点 sprite.position.copy(_endPos)// 设置sprite的位置 line.add(sprite)添加并进行关联 注: sprite可以用于进行标注热点等操作,具体实现较为简单,同时因为也算是mesh,所以sprite可以设置texture,使用图片作为背景等,也可以把一个canvas,把需要的文字图片等都加入进来.

标注的意思是:8——基本尺寸为8mm。Js——是孔的基本偏差系列代号,它的极限偏差是沿零线对称公布的。17——公差等级。IT17用于非配合尺寸,相当于旧国标的11级或12级精度的公差。(+0,79)——在基本尺寸两侧分布的公差带上偏差和下偏差。

})

我们在map对象上添加了一个click事件的监听函数,当点击地图上某个位置时,监听函数通过控制台把当前点击的位置输出出来(注意需要有控制台的支持,比如firebug,如果没有控制台则可使用alert把point的lng和lat属性输出出来)。此外,你也可以使用API提供的坐标拾取工具来完成(http://dev.baidu.com/wiki/static/map/API/tool/getPoint/),它支持检索并且点击地图上任意位置时会出现该位置的坐标。

标注元素组成

从DOM元素构成角度看,一个完整的标注是由以下几个部分组成的:

标注点击区域

标注图标

标注阴影

下面是示意图: