three.js 绘制边框线
·
vue+three.js
边框线是在模型上添加一个边框,而不是发光呼吸灯,如果需要模型发光效果
可以看一下我的另一篇文章 模型发光
效果图:
var material = new THREE.MeshPhongMaterial({
color: 0xccebff,
specular: 0x00ff00,
transparent: true,
opacity: 0.5
})
var geometry = new THREE.BoxGeometry(10, 10, 10)
for (var i = 0; i < 50; i++) {
var mesh = new THREE.Mesh(geometry, material)
var posX = Math.random() * 2500 - 1000
var posZ = Math.random() * 2000 - 1000
var scaleY = Math.random() * 30 + 10
mesh.scale.set(10, scaleY, 10)
mesh.position.set(posX, scaleY * 5, posZ)
mesh.updateMatrix()
mesh.materixAutoUpdate = false
this.selectedObjects.push(mesh)
this.scene.add(mesh)
//绘制边框线
const lineGeom = new THREE.EdgesGeometry(geometry)
const lineMaterial = new THREE.LineBasicMaterial({
color: 0x018bf5,
linewidth: 10,
linecap: 'round',
linejoin: 'round'
})
const line = new THREE.LineSegments(lineGeom, lineMaterial)
line.scale.copy(mesh.scale)
line.rotation.copy(mesh.rotation)
line.position.copy(mesh.position)
this.scene.add(line)
}
更多推荐
已为社区贡献2条内容
所有评论(0)