points three vue3 typescript 点云 粒子系统颜色控制

three 粒子系统自定义每个粒子的颜色 记得缩小了看

<template>
  <div>
    <div class="main" ref="box" style="
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        align-content: center;
      ">
      <h1 v-if="loading">loading...</h1>
      <i v-if="loading" style="
          font-size: 36px;
          margin: 12px 0 8px;
          transition: transform 0.3s ease-in-out;
          will-change: transform;
        "><svg viewBox="0 0 1024 1024" width="1em" height="1em" aria-hidden="true" focusable="false"
          class="anticon-loading">
          <path
            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z">
          </path>
        </svg></i>
    </div>
  </div>
</template>

<script lang="ts">
import {
  WebGLRenderer, //渲染器
  Scene, //场景
  PerspectiveCamera, //相机
  Color, //颜色
  AxesHelper, //辅助线
  Points, //粒子/点
  PointsMaterial, //粒子/点材质
  BufferGeometry, //容器
  BufferAttribute,//二进制存储
  MathUtils,//math方法
} from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; //镜头控制
import { defineComponent, ref, onMounted, watch } from "vue";
import Stats from "three/examples/jsm/libs/stats.module.js"; //性能监控插件
export default defineComponent({
  setup() {
    const loading = ref(true);
    //提前创建好调试插件
    const box = ref<HTMLElement | null>(null); //ref获取dom
    const scence: Scene = new Scene(); //场景
    const camera = new PerspectiveCamera( //新建相机
      120, //摄像机视锥体垂直视野角度
      window.innerWidth / window.innerHeight, //摄像机视锥体长宽比
      0.1, //摄像机视锥体近端面
      10000 //摄像机视锥体远端面
    );
    const stats = Stats(); //性能监控
    
    var orbitControls: OrbitControls; //摄像机控制
    var rander: WebGLRenderer; //渲染器
    var xAxis: AxesHelper; //坐标轴
    var points: Points; //点
    var pointsMaterial: PointsMaterial; //点样式
    var geometry: BufferGeometry; //点定义的矩形
    // 渲染器方法
    function randerFun() {
      rander = new WebGLRenderer({ antialias: true, alpha: true }); //新建渲染器 antialias 否执行抗锯齿
      rander.setClearColor(0x000000, 1); //更改渲染器颜色为默认
    }
    randerFun();

    //新建场景
    function scenceFun() {
      scence.name = "场景"; //场景名字
      camera.name = "相机"; //相机名字
      camera.position.set(0, 0, 1); //相机位置
      orbitControls = new OrbitControls(camera, rander.domElement); //相机控制插件 实现拖拽渲染
      orbitControls.autoRotate = true;
    }
    scenceFun();

    //坐标轴     红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
    function xAxisFun() {
      xAxis = new AxesHelper(29); //长度29的坐标轴
      xAxis.name = "坐标轴"; //坐标轴名字
      scence.add(xAxis); //添加实例
    }
    xAxisFun();

    function pointsFun() {
      console.log(MathUtils.randFloatSpread(100));
      geometry = new BufferGeometry(); //通过顶点定义集合体
      geometry.setAttribute(
        "position",
        new BufferAttribute(new Float32Array(listMap()), 3)
      );
      geometry.setAttribute(
        "color",
        new BufferAttribute(new Float32Array(geometry.attributes.position.array), 3)
      );
      
      pointsMaterial = new PointsMaterial({
        //点材质
        size: 2, //点大小
        vertexColors: true,//使用数组中定义的颜色值
      });
      pointsMaterial.sizeAttenuation = false; //指定点的大小是否因相机深度而衰减
      points = new Points(geometry, pointsMaterial);
      scence.add(points);
    }
    pointsFun();
    //遍历出一个位置数组/矩阵
    function listMap(length: number = 3000) {
      let list = [];
      for (let i = 0; i < length; i++) {
        //创建一千个顶点
        list.push(MathUtils.randFloatSpread(100)); //x randFloatSpread正负100随机数
        list.push(MathUtils.randFloatSpread(100)); //y
        list.push(MathUtils.randFloatSpread(100)); //z
      }
      return list;
    }

    //aim定时执行 动画
    var aim = () => {
      stats.update(); //刷新性能监控
      orbitControls.update();
      rander.render(scence, camera); //更新试图
      requestAnimationFrame(aim); //定时器 到时间调用自己
    };
    // 定时器
    watch(loading, (e) => {
      if (!e) {
        box.value?.append(rander.domElement);
        document.body.appendChild(stats.dom);
        aim();
      }
    });
    //生命周期 页面加载完
    onMounted(() => {
      rander.setSize(window.innerWidth, window.innerHeight); //更改渲染大小
      loading.value = false;
    });
    //使画布动态大小
    window.onresize = () => {
      camera.aspect = window.innerWidth / window.innerHeight; //更改比例
      camera.updateProjectionMatrix(); //更新摄像机投影矩阵
      rander.setSize(window.innerWidth, window.innerHeight); //更改场景大小
    };
    return {
      box,
      loading,
    };
  },
});
</script>

<style>
.anticon-loading {
  display: inline-block;
  animation: loadingCircle 1s linear infinite;
}

@keyframes loadingCircle {

  /* 0% {
    transform: rotate(0turn);
  } */
  100% {
    transform: rotate(1turn);
  }
}

* {
  padding: 0;
  margin: 0;
}
</style>
<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;
}
</style>