如何使用颜色选择器更改 3D 谢尔宾斯基垫片每一侧的 colors？

Question

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

这是三角形的colors所在的地方：

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 谢尔宾斯基垫片：

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

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>

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