three.js 给模型添加标注

JavaScript017

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,把需要的文字图片等都加入进来.

/* 地图上定位点 */

function anchorPoint(markerArr){

var point = new Array()//标注点经纬信息

var marker = new Array()//存放标注点对象

var info = new Array()//存放提示信息窗口对象的数组

var searchInfoWindow =new Array()//存放检索信息窗口对象的数组

for (var i = 0i <markerArr.lengthi++) {

var lng = markerArr[i].lng

var lat = markerArr[i].lat

point[i] = new BMap.Point(lng, lat)

marker[i] = new BMap.Marker(point[i])

if(markerArr[i].parkEmptyCount >= 20 &&markerArr[i].parkEmptyUpdateDate != null){

var icons = MAT_HOST + "/public/images/green.png"//图片路径

var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{

anchor: new BMap.Size(10, 25),

infoWindowAnchor: new BMap.Size(10, 0)

})//显示图标大小

marker[i].setIcon(icon)//设置标签的图标为自定义图标

marker[i].disableMassClear()

map.addOverlay(marker[i])//将标签添加到地图中去

}

if(markerArr[i].parkEmptyCount >0 &&markerArr[i].parkEmptyCount <20 &&markerArr[i].parkEmptyUpdateDate != null){

var icons = MAT_HOST + "/public/images/orange.png"

var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{

anchor: new BMap.Size(10, 25),

infoWindowAnchor: new BMap.Size(10, 0)

})

marker[i].setIcon(icon)

marker[i].disableMassClear()

map.addOverlay(marker[i])

}

if(markerArr[i].parkEmptyCount == 0 || markerArr[i].parkEmptyUpdateDate == null){

var icons = MAT_HOST + "/public/images/red.png"

var icon = new BMap.Icon(icons, new BMap.Size(24, 26),{

anchor: new BMap.Size(10, 25),

infoWindowAnchor: new BMap.Size(10, 0)

})

marker[i].setIcon(icon)

marker[i].disableMassClear()

map.addOverlay(marker[i])

}

var parkEmptyUpdateDate = markerArr[i].parkEmptyUpdateDate

parkEmptyUpdateDate = $.dateFormat({date:parkEmptyUpdateDate})

if(parkEmptyUpdateDate == ""){

markerArr[i].parkEmptyCount = "未知"

}

info[i] = '<div style="padding:5pxfont-size:12pxline-height:16px">'

info[i] += ' <p style="padding:4px 0">地址：'+markerArr[i].addr+'</p>'

info[i] += ' <p style="padding:4px 0">空车位个数：' + markerArr[i].parkEmptyCount + '</p>'

if(parkEmptyUpdateDate != ""){

info[i] += ' <p style="padding:4px 0">最后更新时间：' + parkEmptyUpdateDate

}

info[i] += '</div>'

searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {

title: '<strong>'+markerArr[i].unitName+'</strong>', //标题

width:300, //宽度

panel:"panel", //检索结果面板

enableAutoPan : true, //自动平移

searchTypes:[

BMAPLIB_TAB_SEARCH, //周边检索

BMAPLIB_TAB_TO_HERE, //到这里去

BMAPLIB_TAB_FROM_HERE //从这里出发

]

})

//鼠标移上事件

marker[i].addEventListener("mouseover", (function(k){

return function(){

searchInfoWindow[k].open(marker[k])//在marker上打开检索信息窗口

}

})(i))

map.addEventListener("click", (function(k){

return function(){

searchInfoWindow[k].close(marker[k])//在marker上打开检索信息窗口

}

})(i))

}

}

循环打印就行了