ThreeJS-3D酷炫地球（三十二）

素材：

链接: https://pan.baidu.com/s/1ZmwgNWV-fMO4JrPnCBDLBA

提取码: m1y9

关键代码：

    for (let i = 0; i < 30; i++) {

      // 实现光柱

      let lightPillarTexture = new THREE.TextureLoader().load(

        "three/light_column.webp"

      );

      let lightPillarGeometry = new THREE.PlaneGeometry(1, 5);

      let lightPillarMaterial = new THREE.MeshBasicMaterial({

        color: 0xffffff,

        map: lightPillarTexture,

        alphaMap: lightPillarTexture,

        transparent: true,

        blending: THREE.AdditiveBlending,

        side: THREE.DoubleSide,

        depthWrite: false,

      });

      let lightPillar = new THREE.Mesh(

        lightPillarGeometry,

        lightPillarMaterial

      );

      // lightPillar.add(lightPillar.clone().rotateY(Math.PI / 2));

      // 创建波纹扩散效果

      let circlePlane = new THREE.PlaneGeometry(1, 1);

      let circleTexture = new THREE.TextureLoader().load("three/label.webp");

      let circleMaterial = new THREE.MeshBasicMaterial({

        color: 0xffffff,

        map: circleTexture,

        transparent: true,

        blending: THREE.AdditiveBlending,

        depthWrite: false,

        side: THREE.DoubleSide,

      });

      let circleMesh = new THREE.Mesh(circlePlane, circleMaterial);

      circleMesh.rotation.x = -Math.PI / 2;

      circleMesh.position.set(0, -7, 0);

      lightPillar.add(circleMesh);

      gsap.to(circleMesh.scale, {

        duration: 1 + Math.random() * 0.5,

        x: 2,

        y: 2,

        z: 2,

        repeat: -1,

        delay: Math.random() * 0.5,

        yoyo: true, //往返

        ease: "power2.inOut",

      });

      // 设置光柱的位置

      // lightPillar.position.set(0, 50, 0);

      let lat = Math.random() * 180 - 90;

      let lon = Math.random() * 360 - 180;

      let position = lon2xyz(5, lon, lat);

      lightPillar.position.set(position.x, position.y, position.z);

      //将物体旋转转到球心O到position的向量方向上

      lightPillar.quaternion.setFromUnitVectors(

        new THREE.Vector3(0, 1, 0),

        position.clone().normalize()

      );

      scene.add(lightPillar);

    }

完整代码：

效果图：