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

Question

是否可以从使用 Three.js 渲染的场景中导出 SVG 或其他矢量格式的图像WebGLRenderer？源自 的场景是否可能CanvasRenderer？

如果做不到这一点，如何实际设置SVGRendererThree.js？例如，在 v69 中实例化 newTHREE.SVGRenderer()似乎会在控制台中返回错误，表明构造函数不可用。Three.js 的文档似乎不包含有关SVGRenderer. SVGRenderer设置完成后，是否可以像 中那样使用纹理和粒子WebGLRenderer？

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/