3D渲染与JS

Question

我有一个移动方块的3D渲染图，它们是不同的颜色，就像彩虹一样。但我想知道是否有一种方法可以让这些方块闪烁着不同的颜色。

https://repl.it/@AlexanderLuna/R-A-I-N-B-O-W#index.html

- ALEXcodes

Answer 1

colorMode(HSB, nums.x * nums.y, 1, 1) 是你的答案。在update函数中应用它，通过改变"nums.x * nums.y"的值来尝试调整颜色。

使用定时器或简单的tick(在update函数中可以简单地做tick++)作为修饰符，直到达到某个迭代次数然后重置（或跳过该值）。你应该可以得到所需的效果。

- zergski

Answer 2

好的.. 显然我在拖延，花了最后一个小时玩弄你的Repl..

这可能不完全符合你的要求，但也许会有所帮助..

  class Cube {
    constructor(x_, y_, z_, size_, offset_) {
    this.x = x_;
    this.y = y_;
    this.z = z_;
    this.size = size_;
    this.offset = offset_;
    this.angle = 0;
    
    this.tick = 1;   // starting point
    this.hueSpeed = 2;   // tick modifier
  }

  
  update(f) {
    this.y = map(f(this.angle + this.offset), -1, 1, this.size / 2, height - this.size / 2);
    this.angle += 0.05;
    colorMode(HSB, this.tick, 1, 1);

    /** 
    * The request is there to simply regulate the frequency of the tick a bit.. 
    * Though we do need to cancel the previous request if hadn't yet fired
    * Which I'm apparently to lazy to do atm
    */
    window.requestAnimationFrame((e)=>{
      this.tick += this.hueSpeed;
      (this.tick > 150 || this.tick < 2) && (this.hueSpeed *= -1);
    });
  }

  render() {
    push();
    stroke(0);
    translate(this.x, this.y, this.z);
    box(this.size);
    pop();
  }
}

这是cube.js脚本文件，唯一被修改的文件。

- zergski