Может ли Three.js / WebGL отображать сложные SVG, созданные с помощью Adobe Illustrator? - PullRequest
Новая
       22

Может ли Three.js / WebGL отображать сложные SVG, созданные с помощью Adobe Illustrator?

1 голос
/ 06 февраля 2020

Я пытаюсь создать веб-страницу с кучей различных иллюстраций SVG, используя камеры Three. js и WebGL для навигации по ним. Однако чем больше я исследую рендеринг SVG, тем больше понимаю, что способ экспорта Adobe этих SVG может быть недоступен для чтения тремя. js. Я изначально рисовал эти изображения на Adobe Illustrator Draw на iPad, поэтому существует множество нестандартных, органических * штрихов c. Например, прикрепленный является одной из иллюстраций, которые я надеюсь использовать.

enter image description here

Это приводит к довольно сложному коду, который содержит более 3000 строк. Вы можете найти код здесь для приведенного выше изображения SVG для справки:

https://jsfiddle.net/hjnrmfe3/1/

То, что я до сих пор пытался сделать, это использовать URL-ссылку на файл с 3000 строками кода для загрузки SVG с Three. js, потому что вставить его в файл JS было бы кошмаром. Однако мне не удалось заставить его работать. Единственный экземпляр, который мне удалось загрузить, - это использование TextureLoader, которое приводит к получению полностью зернистого изображения и лишает возможности иметь иллюстрации в формате SVG, как показано ниже: 

function init() {
  
  container = document.querySelector( '#viewport' );
  scene = new THREE.Scene();

  var fieldOfView = 75;
  var aspectRatio = window.innerWidth / window.innerHeight;
  var nearPlane = 0.1;
  var farPlane = 10000;

  var camera = new THREE.PerspectiveCamera(
    fieldOfView, aspectRatio, nearPlane, farPlane
  );

  camera.position.z = 1;

  var renderer = new THREE.WebGLRenderer({antialias: true});
  var canvasWidth = window.innerWidth
  renderer.setSize( canvasWidth, 2000); 

  document.body.appendChild( renderer.domElement );

  //image
  var loader = new THREE.TextureLoader();
  var material = new THREE.MeshLambertMaterial({
    map: loader.load(""),
  });

  var geometry = new THREE.PlaneGeometry(5, 2.5);

  var desk = new THREE.Mesh(geometry, material);

  desk.position.set(0,0,0)

  scene.add(desk);

  var light = new THREE.PointLight( 0xffffff, 1, 0 );
  light.position.set(1, 1, 100 );
  scene.add(light)  


  function animate() {
  requestAnimationFrame( animate );
    renderer.render( scene, camera );
  }
  animate();

}

init();
#viewport {
    position: fixed;
	margin: 0;
	padding: 0;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
<canvas id="viewport"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://threejs.org/examples/js/renderers/SVGRenderer.js"></script>

Итак, мне любопытно - возможно ли рендерить эти сложные SVG-файлы из Adobe Illustrator с помощью Three. js? Я планирую использовать около 10-15 таких иллюстраций стиля, код которых выглядит одинаково. Как лучше всего это сделать go, если это возможно?

Любое руководство с благодарностью. Спасибо!

...