javascript - Three.js/WebGL 可以渲染用 Adob​​e Illustrator 制作的复杂 SVG 吗？

Question

我正在尝试使用 Three.js 和 WebGL 相机来设计一个包含一堆不同 SVG 插图的网页来浏览它们。然而，我对渲染 SVG 的研究越多，我就越意识到 Adob​​e 导出这些 SVG 的方式可能无法被 Three.js 读取。我最初在 iPad 上的 Adob​​e Illustrator Draw 上绘制了这些图像，因此有大量非标准的有机笔触。例如，附件是我希望使用的插图之一。

这会产生一些相当复杂的代码，超过 3,000 行。您可以在此处找到上述 SVG 图像的代码以供参考：

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

到目前为止，我尝试做的是使用链接到具有 3,000 行代码的文件的 URL 来使用 Three.js 加载 SVG，因为将其粘贴到 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>

所以，我很好奇 - 是否可以使用 Three.js 从 Adob​​e Illustrator 渲染这些复杂的 SVG？我计划使用这些样式插图中的大约 10-15 个，它们的代码看起来相同。如果可能的话，最好的方法是什么？

非常感谢任何指导。谢谢！

标签： javascriptsvgthree.js