如何在three.js中创建颜色选择器，这将允许用户更改Maya 3D模型的特定多边形的颜色？

Question

我是three.js和webGL的新手。 我想要一个关于如何在three.js中添加颜色选择器的示例代码。它必须选择/添加银色，金色，红色，蓝色，紫色或任何颜色的颜色。 从那里，可以通过从颜色选择器中选择颜色来更改Maya 3D模型的特定材质（模型的一部分）的颜色。

我在Maya 2014中对3D复合体进行了建模，然后将其导出到webGL中。

就像在这个例子中一样：http://threejs.org/docs/scenes/material-browser.html#MeshPhongMaterial

Answer 1

您可以使用DAT.GUI库，这与您的示例中使用的库相同。

这是如何在你的three.js代码中使用它的基本教程：

http://learningthreejs.com/blog/2011/08/14/dat-gui-simple-ui-for-demos/

颜色选择器的示例代码：

var FizzyText = function() {

  this.color0 = "#ffae23"; // CSS string
  this.color1 = [ 0, 128, 255 ]; // RGB array
  this.color2 = [ 0, 128, 255, 0.3 ]; // RGB with alpha
  this.color3 = { h: 350, s: 0.9, v: 0.3 }; // Hue, saturation, value

  // Define render logic ...

};

window.onload = function() {

  var text = new FizzyText();
  var gui = new dat.GUI();

  gui.addColor(text, 'color0');
  gui.addColor(text, 'color1');
  gui.addColor(text, 'color2');
  gui.addColor(text, 'color3');

};

在此link，您可以看到整个示例。