javascript - 如何使用颜色选择器更改 3D Sierpinski 垫片每一侧的颜色？

Question

我用 WebGL 创建了一个 3D Sierpinski 垫片。我对此还是很陌生。我知道如何更改每个三角形的颜色，但我不知道如何使用颜色选择器（HTML5 颜色选择器）更改颜色。

这是三角形的颜色：

function triangle( a, b, c, color )
{
    // add colors and vertices for one triangle

     var baseColors = [
        vec3(1.0, 0.0, 0.0),
        vec3(0.0, 1.0, 0.0),
        vec3(0.0, 0.0, 1.0),
        vec3(0.0, 0.0, 0.0)
    ]; //Colors triangle RGB

    colors.push( baseColors[color] );
    points.push( a );
    colors.push( baseColors[color] );
    points.push( b );
    colors.push( baseColors[color] );
    points.push( c );
}

这是三角形看起来像
3D 谢尔宾斯基垫片的样子：

如何使用颜色选择器更改每个三角形的颜色？
请帮我。谢谢。

标签： javascriptwebgl

Answer 1

您需要某种方式来选择要设置的三角形，但为了便于编码，您可以使用起始和结束三角形索引

例子：

const numColors = 10;
const colors = new Array(numColors * 3).fill(0.5);

function setColors() {
  let start = document.querySelector('#start').value;
  let end = document.querySelector('#end').value;
  if (start > end) {
    const t = start; start = end; end = t;
  }
  // bound start and end
  start = Math.min(numColors - 1, Math.max(0, start));
  end = Math.min(numColors - 1, Math.max(0, end));
  const colorStr = document.querySelector('#color').value;
  const parts = /#(..)(..)(..)/.exec(colorStr).slice(1, 4);
  const color = parts.map(s => parseInt(s, 16) / 255);
  
  for (let i = start; i <= end; ++i) {
    const offset = i * 3;
    for (let j = 0; j < 3; ++j) {
      colors[offset + j] = color[j];
    }
  }

  // here you'd re-upload the colors using
  // gl.bufferData or gl.bufferSubData
  // and then re-render
  showColors();
}

document.querySelector('button').addEventListener('click', setColors);


// -- not important, just some way to display the colors --
const rgb = (r, g, b) => `rgb(${r * 255}, ${g * 255}, ${b * 255})`;
function showColors() {
  const out = document.querySelector('#out')
  for (let i = 0; i < colors.length; i += 3) {
    const id = `c${i}`
    let elem = out.querySelector(`#${id}`);
    if (!elem) {
       elem = document.createElement('div');
       elem.id = id;
       out.appendChild(elem);
    }
    elem.style.backgroundColor = rgb(...colors.slice(i, i + 3));
  }
}

showColors();

#out>div {
  display: inline-block;
  border: 1px solid black;
  width: 20px;
  height: 20px;
}

<div><input type="number" id="start" value="0"><span>: start</span></div>
<div><input type="number" id="end" value="0"><span>: end</span></div>
<div><input type="color" id="color" value="#FF0000"><span>: color</span></div>
<div><button type="button">apply</button></div>
<p></p>
<div id="out"></div>

如果您真的希望能够单击此处已回答的三角形。还有这篇文章