效果
部分截图,low
代码
直接上代码
import * as THREE from 'three'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
import { LineSegments2 } from 'three/examples/jsm/lines/LineSegments2'
import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry'
// object是要添加边框线的模型
function frameline(object, color) {
const edges = new THREE.EdgesGeometry(object.geometry)
const geometry = new LineSegmentsGeometry()
const wideEdges = geometry.fromEdgesGeometry(edges)
const edgesmaterial = new LineMaterial({
color: color,
linewidth: 4,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.8
})
// 这里的offset宽高是存放canvas容器的宽高
// 如果使用的是window,直接用window.innerWidth, windowHeight
edgesmaterial.resolution.set(
document.getElementById('threecanvas').offsetWidth,
document.getElementById('threecanvas').offsetHeight
)
const line = new LineSegments2(wideEdges, edgesmaterial)
// 获取物体的世界坐标 旋转等
let worldPosition = new THREE.Vector3()
object.getWorldPosition(worldPosition)
line.scale.copy(object.scale)
line.rotation.copy(object.rotation)
line.position.copy(worldPosition)
// 不用return的话,直接scene.add(line)
// 或者要后续处理线的话添加组管理方便一点
// const group = new THREE.Group();
// group.add(group)
return line
}
export { frameline }
另一种常规的【点这个链接】