three.js 光墙效果实现

需求:

要实现一个围栏效果的光墙

方案:

当前只介绍贴图实现方案,其他的材质,uv什么的 咱确实玩不来.

 

实现:

1.就是创建一个缓冲几何,然后通过计算哪个面贴图哪个面不贴图,(这个是我直接拷贝的别人的,只是实现了一个矩形效果,更多效果直接传入相应的二维坐标(x,z)就行)

LightWallModel(data) {
      // 光墙效果
      let texture=new THREE.TextureLoader().load(this.Model.service + "/models/up-time.png")
      texture.wrapS=THREE.RepeatWrapping
      texture.wrapT=THREE.RepeatWrapping
      let data = [
              0, 0,
              25, 0,
              25, 25,
              0, 25,
              0, 0
            ]
      var geometry = new THREE.BufferGeometry()
      var posArr = []
      var h = 5
      var uvrr = []
      for (let i = 0; i < data.length - 2; i += 2) {
        posArr.push(data[i], data[i + 1], 0, data[i + 2], data[i + 3], 0, data[i + 2], data[i + 3], h)
        posArr.push(data[i], data[i + 1], 0, data[i + 2], data[i + 3], h, data[i], data[i + 1], h)

        uvrr.push(0, 0, 1, 0, 1, 1)
        uvrr.push(0, 0, 1, 1, 0, 1)
      }


      geometry.attributes.position = new THREE.BufferAttribute(new Float32Array(posArr), 3)
      geometry.attributes.uv = new THREE.BufferAttribute(new Float32Array(uvrr), 2)




      // new THREE.TextureLoader().load("http://localhost:3000/file/getFile/map/wall.png")
      geometry.computeVertexNormals()
      var material = new THREE.MeshLambertMaterial({
        map:texture,
        color: 0x00ffff,
        side: THREE.DoubleSide,
        transparent: true,
        // opacity:0.5,
        depthTest: false
      })

      let mesh = new THREE.Mesh(geometry, material)
      mesh.rotateX(-Math.PI / 2)
      // editor.scene.scene.add(mesh)
      this.scene.add(mesh);
      texture.offset.y-=0.01
    },