Three.js не заполняет форму пользовательской текстурой / цветовым спектром - PullRequest
Новая
       27

Three.js не заполняет форму пользовательской текстурой / цветовым спектром

0 голосов
/ 28 августа 2018

У меня есть требование нарисовать многоугольник и заполнить его пользовательской цветовой гаммой.

  • Для цветового спектра : после Google я нашел этот пост , который показывает мне, как генерировать цветовой спектр так, как мне нужно.

  • Для многоугольника : я выбираю THREE.Shape(), чтобы я мог определить, где его нарисовать.

  • Соберите все вместе : он отлично работает с монохромным цветом, например material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide });, но ничего не показывает, когда я использую цветовую гамму. Вы можете найти мой код здесь (который я разветвил с здесь ).

Пожалуйста, укажите мне, где я поступаю неправильно.

Чтобы не тратить время на просмотр кода, вот фрагмент: 

  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);

1 Ответ

0 голосов
/ 28 августа 2018

Проблема в том, что вы просто используете 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/

...