我可以在Three.js中使用用户输入来设置我的对象的颜色吗?

时间:2015-09-18 13:18:30

标签: javascript three.js

// Load in the mesh and add it to the scene.
var loader = new THREE.JSONLoader();
loader.load( "models/cubic.js", function(geometry){
  // var material = new THREE.MeshLambertMaterial({color: 0x55B663});
  alert(geometry.faces.length);
  //for ( var i = 0; i < geometry.faces.length; i ++ ) {

  var face = geometry.faces[ 2];
  face.color.setHex(0x55B663 );
  var face = geometry.faces[ 3 ];
  face.color.setHex(0x55B663 );
  var face = geometry.faces[ 4];
  face.color.setHex(0xFFFF00 );
  var face = geometry.faces[ 5 ];
  face.color.setHex(0xFFFF00 );
  var face = geometry.faces[ 8];
  face.color.setHex(0x666600 );
  var face = geometry.faces[ 9 ];
  face.color.setHex(0x666600 );
  var face = geometry.faces[ 6];
  face.color.setHex(0x1A1A00 );
  var face = geometry.faces[ 7 ];
  face.color.setHex(0x1A1A00 );
  var face = geometry.faces[ 10];
  face.color.setHex(0x00001a);
  var face = geometry.faces[ 11 ];
  face.color.setHex(0x00001a);
  var face = geometry.faces[ 1];
  face.color.setHex(0x200614);
  var face = geometry.faces[ 0 ];
  face.color.setHex(0x200614);

  //}
  mesh1 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors } ));
  //mesh1 = new THREE.Mesh(geometry, material);
  scene.add(mesh1);
  mesh1.position.x=-3;
});
<input id="color" type="text" />
<button id="submit" type="submit">submit</button>

我可以从用户那里获取输入来设置用户想要为对象设置颜色的颜色吗?

在上面我已经为我的对象的每个面部硬编码颜色,但我想从用户那里获取输入来设置颜色。

1 个答案:

答案 0 :(得分:0)

当然,您可以通过mesh1.material.color设置整个对象的颜色,也可以随时更改mesh1.geometry.faces[...].color值。您可能需要密切管理更新,请查看https://github.com/mrdoob/three.js/wiki/Updates以获取有关您何时需要知道的提示THREE.js“已发生变化”