three.js 给模型添加标注

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

1、npm 引入（需安装npm, 安装three, 不需要单独引入loader等）。

2、通过外部cdn链接直接引入（直接html起步，简单一把梭，需单独引入loader, model, controls等）。

1、创建场景

2、可以设置background和environment.

3、接下来所有的object都需要添加在scene中。

1、相机类型有

2、创建相机

1、创建渲染器

2、放入场景和相机，并挂载到HTML上。

1、three.js中有很多元素可以添加，比如Line,Geometry, Helper, light ,还可以引入图片或者模型model(需要loader).

1、

2、

1、主体script需添加type="module", 不然不起作用。

2、要在html里直接使用three.js，需要添加importmap

3、安装live preview扩展，创建本地服务器，解决跨域问题。

html中的div如下，id为div1

<div id="div1">Hello World !</div>

js代码：

1、使用innerHTML:

var div1 = document.getElementById("div1")

div1.innerHTML+="加入内容"

2、使用appendChild:

var div1 = document.getElementById("div1")

var tag = document.createElement("p")

tag.innerHTML = "P内容"

div1.appendChild(tag)

---