从three.js场景导出为SVG或其他矢量格式

Question

有可能从three.js的WebGLRenderer渲染的场景中导出SVG或其他矢量格式的图像吗？如果是由CanvasRenderer派生的场景是否也可以实现？

如果无法做到这点，那么该如何设置three.js中的SVGRenderer呢？例如，在v69中实例化一个新的THREE.SVGRenderer()会在控制台返回错误，表示构造函数不可用。three.js文档似乎没有包含有关SVGRenderer的详细信息。一旦设置完成，是否可以像使用WebGLRenderer一样在SVGRenderer中使用纹理和粒子？

- Alex Reynolds

---

请查看示例http://threejs.org/examples/#svg_sandbox - gaitat

Answer 1

我还有一个任务是从three.js导出svg，以下是可用的解决方案。它使用SVGRenderer：

var controls;
var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.x = 2;
  camera.position.y = 1;
  camera.position.z = 3;
  camera.zoom = 3.6;
  camera.updateProjectionMatrix();

  scene = new THREE.Scene();

  geometry = new THREE.BoxGeometry(0.4, 0.2, 0.2);
  material = new THREE.MeshNormalMaterial();

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

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    preserveDrawingBuffer: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight - 70);

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.update();

  document.body.appendChild(renderer.domElement);
  
}

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

function btnSVGExportClick() {
  var rendererSVG = new THREE.SVGRenderer();
  
  rendererSVG.setSize(window.innerWidth, window.innerHeight);
  rendererSVG.render(scene, camera);
  ExportToSVG(rendererSVG, "test.svg");
}

function ExportToSVG(rendererSVG, filename) {
  var XMLS = new XMLSerializer();
  var svgfile = XMLS.serializeToString(rendererSVG.domElement);
  var svgData = svgfile;
  var preface = '<?xml version="1.0" standalone="no"?>\r\n';
  var svgBlob = new Blob([preface, svgData], {
    type: "image/svg+xml;charset=utf-8"
  });
  var svgUrl = URL.createObjectURL(svgBlob);
  var downloadLink = document.createElement("a");
  
  downloadLink.href = svgUrl;
  downloadLink.download = filename;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/SVGRenderer.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>

<input id="btnSVGExport" type="button" value="Get as SVG" onclick="btnSVGExportClick()" style="margin-bottom:3px">

将此代码保存为some.html文件并使用“获取SVG”按钮保存为svg文件。 jsfiddle链接：https://jsfiddle.net/9y0b3wet/

- Zviadi

---

有没有办法只导出当前方向可见的物体？它似乎会导出场景中的所有物体，即使被其他物体隐藏，导致生成一个巨大的SVG文件。 - user2445278

抱歉，我无法帮助您。我在threejs方面的经验不多，只是使用了几个月。 - Zviadi