threejs中随机生成颜色

原创已于 2024-01-04 16:53:20 修改 · 595 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2023-09-11 10:41:07 首次发布

文章介绍了如何在Vue项目中使用three.js生成随机颜色，并将其应用到Mesh对象的材质上。作者提供了两种方法，一种是直接生成RGB值，另一种是存储颜色数组并从中随机选取。

这里封装了两个方法：getRandomColor，random, 直接调用getRandomColor方法即可；

getRandomColor() {
      let c1 = this.random(0, 255);
      let c2 = this.random(0, 255);
      let c3 = this.random(0, 255);
      return new this.$three.Color("rgb(" + c1 + ", " + c2 + ", " + c3 + ")");
    },
  /**
   * 产生随机整数，包含下限值，但不包括上限值
   * @param {Number} lower 下限
   * @param {Number} upper 上限
   * @return {Number} 返回在下限到上限之间的一个随机整数
   */
  random(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
  },

在页面中通过getObjectByName 获取Mesh后，通过一下方式可以设置材质的颜色：

let obj2 = obj.getObjectByName(this.radio1);
obj2.material.color = this.getRandomColor();

备注：this.$three 是将three.js直接挂载到了vue上，所以这里直接这样写了；

以上代码生成的随机颜色没有带字母，优化一下：

mounted() {    
  const numbers = Array.from({length: 255}, (_, i) => i);

  this.color = [...numbers];
}
 methods: {
    // 随机颜色
    randomColor() {
      // 要生成min-max之间的随机数，公式为：Math.random()*(max-min+1)+min
      let i = Math.floor(Math.random()*(this.color.length-0+1)+0);
      let j = Math.floor(Math.random()*(this.color.length-0+1)+0);
      let k = Math.floor(Math.random()*(this.color.length-0+1)+0);
      return new this.$three.Color("rgb(" + this.color[i] + ", " + this.color[j] + ", " +                 this.color[k] + ")");
    },
}

this.randomColor() 调用

标签

#前端