threejs可控边框线宽

效果

部分截图，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 }

另一种常规的【点这个链接】