// 创建管道 如果想让管道横平竖直 则在管道转折处附近多设几个点
curve = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 200, 0),
new THREE.Vector3(0, 200, -500),
new THREE.Vector3(10, 200, -500),
new THREE.Vector3(20, 200, -500),
new THREE.Vector3(800, 200, -500)
])
tubeGeometry = new THREE.TubeGeometry(curve, 80, 10)
// 贴图
this.flowingLineTexture1 = new THREE.TextureLoader().load(
'img/flowLight.png'
)
this.flowingLineTexture1.wrapS = this.flowingLineTexture1.wrapT =
THREE.RepeatWrapping
this.flowingLineTexture1.repeat.set(1, 1)
this.flowingLineTexture1.needsUpdate = true
material = new THREE.MeshBasicMaterial({
map: this.flowingLineTexture1,
side: THREE.DoubleSide,
transparent: true
// depthWrite:false // 透明管道材质需要设置depthWrite=false;否则内部流动的液体会被遮挡无法显示。
})
let tube = new THREE.Mesh(tubeGeometry, material)
this.scene.add(tube)
three.js实现管道流光
于 2022-02-08 17:29:57 首次发布