Threejs之粒子动画/点击交互

粒子动画

   function createParticle() {
        var geometry = new THREE.Geometry();
        var mouse = {
          x: 0,
          y: 100
        };
        var vertices = new THREE.Vector3(
          mouse.x,
          mouse.y,
          -100
        );
        var material = new THREE.PointCloudMaterial({
          color: 0X00ff00,
          size: 3,
          transparent: true,
          sizeAttenuation: true
        });
        geometry.vertices.push(vertices);
        particle = new THREE.PointCloud(geometry, material);
        particle.speed = Math.random() / 1000 + 0.001
        particle.name = 'particle'
        particle.direction = {
          x: (Math.random() - .5) * window.innerWidth * 2,
          y: (Math.random() - .5) * window.innerHeight * 2
        };
        scene.add(particle);

        for (var i = 0, j = scene.children.length; i < j; i++) {
          //Get the next particle
          var particle = scene.children[i];

          if (particle.geometry) {
            if (particle.geometry.vertices) {
              // console.log(particle.direction.y)
              //We move our particle closer to its destination
              particle.geometry.vertices[0].x += (0 - particle.geometry.vertices[0].x) * particle.speed;
              particle.geometry.vertices[0].y += (0 - particle.geometry.vertices[0].y) * particle.speed;
              //We reduce the opacity of the particle
              particle.material.opacity -= .002
              //Prevents ThreeJs the particle has moved
              particle.geometry.verticesNeedUpdate = true;
              if (particle.material.opacity < .03) {
                particle.name == "particle" ? scene.remove(particle) : null
                i--;
                j--;
              }
            }
          }
        }
      }
    //动画
      function animate() {
        render() //更新控制器
        stats.update() //更新性能插件
        controls.update()
        requestAnimationFrame(animate)
        Sphere.rotation.y += 0.04
        // Sphere.position.set(20, 10, 0);  
        // Sphere.rotation.x += 0.04;
        // mesh.rotation.x += 0.04;
        meshTriangle.rotation.y += 0.04;
        // createParticle()
      }

管道

let textureLig = new THREE.TextureLoader().load("./assets/2.png")
 textureLig.wrapS = textureLig.wrapT = THREE.RepeatWrapping; //每个都重复
        textureLig.repeat.set(1, 1)
        textureLig.needsUpdate = true
        
        let MeshBasicMaterial = new THREE.MeshBasicMaterial({
          map: textureLig,
          side: THREE.BackSide,
          transparent: true
        })
        // 创建顶点数组
        let points = [new THREE.Vector3(0, 0, 0),
          new THREE.Vector3(500, 0, 0),
          new THREE.Vector3(500, 0, 500),
          new THREE.Vector3(0, 0, 500),
          new THREE.Vector3(0, 10, 0)
        ]
        // CatmullRomCurve3创建一条平滑的三维样条曲线
        let curve = new THREE.CatmullRomCurve3(points) // 曲线路径
        // 创建管道
        let tubeGeometry = new THREE.TubeGeometry(curve, 200,5)
        let meshLig = new THREE.Mesh(tubeGeometry, MeshBasicMaterial);
        scene.add(meshLig)
        //动画
      function animate() {
        if (textureLig) textureLig.offset.x -= 0.01
        }

扫光柱

let textureLig3 = new THREE.TextureLoader().load("./assets/3.png")
      let mesh3 ;
      textureLig3.wrapS = textureLig3.wrapT = THREE.RepeatWrapping; //每个都重复
          textureLig3.repeat.set(1, 1)
          textureLig3.needsUpdate = true
          let geometry3 = new THREE.CylinderGeometry(100, 100, 200, 64);
          let materials3 = [
            new THREE.MeshBasicMaterial({
              map: textureLig3,
              side: THREE.DoubleSide,
              transparent: true
            }),
            new THREE.MeshBasicMaterial({
              transparent: true,
              opacity: 0,
              side: THREE.DoubleSide
            }),
            new THREE.MeshBasicMaterial({
              transparent: true,
              opacity: 0,
              side: THREE.DoubleSide
            })
          ]
          mesh3 = new THREE.Mesh(geometry3, materials3)
        mesh3.position.set(-100, 20, 20)
          scene.add(mesh3)
      let s = 0;
        let p = 1;
      //动画
      function animate() {
           s += 0.01;
            p -= 0.005;
            if (s > 2) {
              s = 0;
              p = 1;
            }
            mesh3.scale.set(1 + s, 1, 1 + s);
            mesh3.material[0].opacity = p;
      }

点击事件

   //声明raycaster和mouse变量
      var raycaster = new THREE.Raycaster(); //光线投射，用于确定鼠标点击位置
      var mouse = new THREE.Vector2(); //创建二维平面
window.addEventListener("click",onMouseClick);
      function onMouseClick(event) {
        //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
        //将html坐标系转化为webgl坐标系，并确定鼠标点击位置
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

        // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
        //以camera为z坐标，确定所点击物体的3D空间位置
        raycaster.setFromCamera(mouse, camera);

        //确定所点击位置上的物体数量 获取raycaster直线和所有模型相交的数组集合
        var intersects = raycaster.intersectObjects(scene.children);
        if (intersects.length > 0) {
        //移除物体名称为sphere
        scene.children.forEach(item =>{
          item.name == "sphere" ? scene.remove(item) : null
        })
        //将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
        // for ( var i = 0; i < intersects.length; i++ ) {
        // intersects[ 0 ].object.material.color.set( 0xff0000 );
        // }
        }
      }