使用 JS 进行 3D 渲染

Question

我有一个移动立方体的 3D 渲染图，它们有不同的颜色，就像彩虹一样。但我想知道是否有办法让方块产生脉冲颜色。 https://repl.it/@AlexanderLuna/R-A-I-N-B-O-W#index.html

Answer 1

colorMode(HSB, nums.x * nums.y, 1, 1)是你的答案。在更新函数中应用它并通过改变 'nums.x * nums.y' 值来调整颜色。

使用计时器或简单的tick（你可以简单地在update函数中做tick++）作为修饰符，直到达到某个迭代然后重置（或跳转该值）。您应该会得到想要的效果。

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 脚本文件，唯一修改过的。

使用 JS 进行 3D 渲染

3D Render With JS

javascript

3d

colors