其他分享
首页 > 其他分享> > WebGL进阶(3)环境遮挡图与强度

WebGL进阶(3)环境遮挡图与强度

作者:互联网

      const texture = new THREE.TextureLoader().load(require('../assets/images/wenli2.jpg'))
      const texture_s = new THREE.TextureLoader().load(require('../assets/images/happyface.png'))
      const texture_ao = new THREE.TextureLoader().load(require('../assets/images/happyface.png'))

      const geometry = new THREE.BoxBufferGeometry(1, 1, 1)
      const material = new THREE.MeshBasicMaterial({ 
        color: '#ffff00', 
        map: texture,
        alphaMap: texture_s,
        transparent: true,
        aoMap: texture_ao,
        aoMapIntensity: 1
        // opacity: 0.7,
        // side: THREE.DoubleSide
      })
      this.cube = new THREE.Mesh(geometry, material)
      this.scene.add(this.cube)
      // 给geometry设置第二组uv
      geometry.setAttribute('uv2', new THREE.BufferAttribute(geometry.attributes.uv.array, 2))

      const plane_geometry = new THREE.PlaneBufferGeometry(1, 1)
      const plane = new THREE.Mesh( plane_geometry, material )

      plane.position.set(2, 0, 0)
      this.scene.add(plane)
      // 给plane_geometry设置第二组uv
      plane_geometry.setAttribute('uv2', new THREE.BufferAttribute(plane_geometry.attributes.uv.array, 2))

  

标签:const,进阶,geometry,遮挡,WebGL,THREE,texture,plane,new
来源: https://www.cnblogs.com/yulingjia/p/16546950.html