Выдавливание 2D цветного изображения в три. js - PullRequest
Новая
       45

Выдавливание 2D цветного изображения в три. js

1 голос
/ 29 марта 2020

Я искал ресурсы в Интернете, но я не видел способа выдавливания цветного изображения в Three. js. Я пытаюсь создать что-то вроде предмета Minecraft, где изображение используется для создания вытянутой геометрии. Примером может быть: https://minecraft.gamepedia.com/File: BowSpinning3.gif

Я пытался просмотреть этот ресурс: https://muffinman.io/three-js-extrude-svg-path/, но это только выдавливает неокрашенные SVG. 


loader.load('./textures/diamondbleu.svg', function (data) {

  // Group we'll use for all SVG paths
  const svgGroup = new THREE.Group();
  // When importing SVGs paths are inverted on Y axis
  // it happens in the process of mapping from 2d to 3d coordinate system
  svgGroup.scale.y *= -1;

  const material = new THREE.MeshLambertMaterial();

  // Loop through all of the parsed paths
  data.paths.forEach((path, i) => {
    const shapes = path.toShapes(true);

    // Each path has array of shapes
    shapes.forEach((shape, j) => {
      // Finally we can take each shape and extrude it
      const geometry = new THREE.ExtrudeGeometry(shape, {
        depth: 20,
        bevelEnabled: false
      });

      // Create a mesh and add it to the group
      const mesh = new THREE.Mesh(geometry, material);

      svgGroup.add(mesh);
    });
  });

  // Get group's size
  const box = new THREE.Box3().setFromObject(svgGroup);
  const size = new THREE.Vector3();
  box.getSize(size);

  const yOffset = size.y / -2;
  const xOffset = size.x / -2;

  // Offset all of group's elements, to center them
  svgGroup.children.forEach(item => {
    item.position.x = xOffset;
    item.position.y = yOffset;
  });

  svgGroup.position.set(0, blockSize*75, 0);

  // Finally we add svg group to the scene
  scene.add(svgGroup);
})

Есть ли способ изменить код, чтобы учесть цветные SVG? Спасибо!

1 Ответ

2 голосов
/ 02 апреля 2020

Вы можете использовать SVGLoader, который доступен в папке "examples/jsm/loaders/".

В документах изложено , как генерировать SVG в 3D-пространстве , это похоже, в вашем примере кода отсутствует та часть, где paths l oop создает новый материал и назначает цвет для каждого path: 

var material = new THREE.MeshBasicMaterial( {
    color: path.color,
    side: THREE.DoubleSide,
    depthWrite: false
} );

Кажется, что ваш код создает один LambertMaterial без назначенных цветов и без подсветки. Материалы Ламберта нуждаются в освещении для освещения, тогда как BasicMaterial просто показывает цвет без необходимости освещения.

Посмотрите на код в этой демонстрации для другого примера. Вместо использования path.color эта демонстрация находит цвет путем доступа к path.userData.style.fill. Я думаю, что вам понадобится последний подход, в зависимости от вашего SVG-файла.

...