以下内容翻译自Forge官方blog,原文链接:https://forge.autodesk.com/blog/adding-custom-lines-forge-viewer-scene

需要我们在Forge场景(即threejs中的scene)中画线的时候有很多,比如展示包围盒(bounding box)、画线框几何体或者满足客户提出的一些奇葩需求。

在Forge场景中画线,有三种方法。但是在这之前,我们先创建一个基本的线段(使用threejs方法)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const geometry = new THREE.Geometry()

geometry.vertices.push(new THREE.Vector3(0, 0, 0))
geometry.vertices.push(new THREE.Vector3(10, 10, 10))

var linesMaterial = new THREE.LineBasicMaterial({
color: new THREE.Color(0xFF0000),
transparent: true,
depthWrite: false,
depthTest: true,
linewidth: 10,
opacity: 1.0
})

var lines = new THREE.Line(geometry, linesMaterial, THREE.LinePieces)

第一种方法

1
2
viewer.impl.scene.add(lines)
viewer.impl.invalidate(true)

这种方法存在浏览器兼容问题,火狐上能用chrome上不能用(那绝对不能用啊!!),所以我们看下一种方法

第二种方法

1
2
viewer.impl.sceneAfter.add(lines)
viewer.impl.invalidate(true)

这种方法可以在任何浏览器上使用,但是当我们改变模型中构建可见性的时候,我们添加的线也会消失,我想这是因为使用了‎viewer的着色器和渲染设置的结果‎

第三种方法

1
2
3
viewer.impl.createOverlayScene('myOverlay', linesMaterial)
viewer.impl.addOverlay('myOverlay', lines)
viewer.impl.invalidate(true)

这种方法十分完美,可以在所有浏览器上运行,而且也不会受构件可见性的影响

亲自尝试后的MMP

亲自试了一下发现只有第三种方法能用,难受