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

【问题标题】：How to create a color picker in three.js and that will allows users to change the color of a particular polygon of Maya 3D Model?如何在 three.js 中创建一个颜色选择器，并允许用户更改 Maya 3D 模型的特定多边形的颜色？
【发布时间】：2015-10-24 02:47:46
【问题描述】：

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

我在 Maya 2014 中为 3D 复合体建模，并将其导出到 webGL。

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

【问题讨论】：

标签： javascript colors three.js

【解决方案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 你可以看到整个例子。

【讨论】：