three.js实现炫酷的3d影院

正文

请到「今天看啥」查看全文

this.points = new Group()
    const vertices = []
    let point
    const texture = new TextureLoader().load('assets/image/dot.png')
    geometry.vertices.forEach((o, i) => {
      // 记录每个点的位置
      vertices.push(o.clone())
      const _geometry = new Geometry()
     // 拿到当前点的位置
      const pos = vertices[i]
      _geometry.vertices.push(new Vector3())
      const color = new Color()
      color.r = Math.abs(Math.random() * 10)
      color.g = Math.abs(Math.random() * 10)
      color.b = Math.abs(Math.random() * 10)
      const material = new PointsMaterial({
        color,
        size: Math.random() * 4 + 2,
        map: texture,
        blending: AddEquation,
        depthTest: false,
        transparent: true
      })
      point = new Points(_geometry, material)
      point.position.copy(pos)
      this.points.add(point)
    })
    return this.points

• new Group创建一个群，可以说是粒子的集合
• 通过point.position.copy(pos)设置粒子和位置，坐标和模型中对应点的位置相同

3.点击事件的处理

three.js的点击事件需要借助光线投射器(Raycaster)，为了方便理解，请先看一张图：

请到「今天看啥」查看全文