three.js实现管道流光

前端小白小白白

已于 2022-02-08 17:32:01 修改

阅读量1.9k

点赞数

文章标签： three.js

于 2022-02-08 17:29:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41026858/article/details/122828098

版权

本文介绍了如何使用Three.js创建一条横平竖直的管道，通过CatmullRomCurve3设置曲线路径，并应用流光贴图实现动态效果。教程详细讲解了如何设置TubeGeometry、纹理加载和Mesh材料，以及透明度处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 // 创建管道 如果想让管道横平竖直 则在管道转折处附近多设几个点
 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)