63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
export function useFence({height = 20, isCloseTop = false, color = '#ff7f50'}) {
|
|
const { THREE } = window.VgoMap
|
|
|
|
const tex = generateTexture(64)
|
|
if(tex) {
|
|
tex.wrapT = tex.wrapS = THREE.RepeatWrapping
|
|
}
|
|
|
|
function generateFence(points) {
|
|
const shape = new THREE.Shape()
|
|
shape.setFromPoints(points)
|
|
const geo = new THREE.ExtrudeGeometry(shape, {
|
|
steps: 2,
|
|
depth: height,
|
|
bevelEnabled: false,
|
|
})
|
|
const mater = [
|
|
new THREE.MeshBasicMaterial({
|
|
color,
|
|
transparent: true,
|
|
opacity: 0.1,
|
|
visible: isCloseTop,
|
|
}),
|
|
new THREE.MeshBasicMaterial({
|
|
map: tex,
|
|
transparent: true,
|
|
color,
|
|
opacity: 0.1,
|
|
side: 2,
|
|
})
|
|
]
|
|
const mesh = new THREE.Mesh(geo, mater)
|
|
mesh.material.forEach(m => m.opacity = 0.7)
|
|
return mesh
|
|
}
|
|
|
|
function generateTexture (size = 64) {
|
|
let canvas = document.createElement('canvas')
|
|
canvas.width = size
|
|
canvas.height = size
|
|
let ctx = canvas.getContext('2d')
|
|
if(!ctx) return
|
|
let linearGradient = ctx.createLinearGradient(0, 0, 0, size)
|
|
linearGradient.addColorStop(0.2, hexToRgba(color, 0.0))
|
|
linearGradient.addColorStop(0.8, hexToRgba(color, 0.5))
|
|
linearGradient.addColorStop(1.0, hexToRgba(color, 1.0))
|
|
ctx.fillStyle = linearGradient
|
|
ctx.fillRect(0, 0, size, size)
|
|
|
|
let texture = new THREE.Texture(canvas)
|
|
texture.needsUpdate = true // 必须
|
|
return texture
|
|
}
|
|
|
|
function hexToRgba (hex, opacity = 1) {
|
|
return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' +
|
|
parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
|
|
}
|
|
|
|
return {
|
|
generateFence,
|
|
}
|
|
} |