Question

我需要绘制一个多边形，并用自定义色谱填充它。

用于色谱图：在google之后，我发现了this post，它向我展示了如何以所需的方式生成色谱图。
对于多边形：我选择THREE.Shape()，以便定义绘制位置。
放在一起：它可以与material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });之类的单色一起正常工作，但是当我使用色谱时却什么也没显示。您可以找到我的代码here（我是从here分叉的）。

请指出我做错事情的地方。

为了避免浪费时间查看代码，以下是代码段：

  var curveShape = new THREE.Shape();
  curveShape.moveTo(0, 0);
  curveShape.lineTo(5, 7);
  curveShape.lineTo(2, 9);
  curveShape.lineTo(8, 11);
  curveShape.lineTo(10, 15);
  curveShape.lineTo(9, 16);
  curveShape.lineTo(7, 20);
  curveShape.lineTo(0, 20);

  // geometry
  var geometry = new THREE.ShapeGeometry(curveShape);

  // material texture
  var texture = new THREE.Texture(generateTexture());
  texture.needsUpdate = true; // important!

  // material
  var material = new THREE.MeshBasicMaterial({
    map: texture,
    overdraw: 0.5,
    side: THREE.DoubleSide
  });

  // mesh
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

Answer 1

问题在于您只是使用moveTo()来绘制形状。但是此方法仅将形状的内部当前点设置为给定的坐标。要创建真实的轮廓，请使用lineTo()之类的方法。

var curveShape = new THREE.Shape();
curveShape.moveTo(0, 0); // define start point
curveShape.lineTo(5, 7); // draw a line from the current point to the given coordindates

基于您的代码段的完整示例：https://jsfiddle.net/f2Lommf5/12600/

Three.js不会用自定义纹理/色谱填充形状

1 个答案: