Converting a three.js scene into SVG or alternative vector format for export

Question

Converting a three.js scene into SVG or alternative vector format for export

Can an SVG- or other vector-formatted image be exported from a scene rendered using three.js's WebGLRenderer? What about from a scene derived from CanvasRenderer?

If not, how can one set up SVGRenderer with three.js? Creating a new THREE.SVGRenderer() in v69 seems to result in an error in the console, suggesting that the constructor is unavailable. The documentation for three.js lacks information on SVGRenderer. Once configured, is it feasible to utilize textures and particles with SVGRenderer similar to WebGLRenderer?

javascript svg three.js webgl

Answer 1

Answer №1

If you have a task of exporting an svg from three.js, I have a working solution for you. This solution makes use of the 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">

To make use of this code, save it in a file named some.html and click on the Get as SVG button to export to an svg file. You can also view the jsfiddle link for reference: https://jsfiddle.net/9y0b3wet/

Answer 2

If you have a task of exporting an svg from three.js, I have a working solution for you. This solution makes use of the 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">

To make use of this code, save it in a file named some.html and click on the Get as SVG button to export to an svg file. You can also view the jsfiddle link for reference: https://jsfiddle.net/9y0b3wet/

Converting a three.js scene into SVG or alternative vector format for export

Answer №1

Similar questions

Prevent Click Event on Angular Mat-Button

Enhancing ajax requests with headers in Ember.js

Does this Loop run synchronously?

Angular state correctly maps to the controller but is not reflected in the HTML

Finding the tiniest match within a regex pattern

Generating numerous circular elements for each item in the dataset using D3

cheerio scraping results in an array that is devoid of any data

Executing a Python function on a server from a local machine with the help of AngularJS

Leveraging ng-class with an Angular $scope attribute

Guide to verifying all chosen options in a multiple select field using EJS

Is it possible to use getJSON to retrieve a value from an HTML tag ID that has already been displayed on a webpage? How about using json_decode

The initial click does not trigger a state update in React

Executing asynchronous jQuery AJAX requests using the async/await syntax

Issue with vue-template-compiler in Vue.js 3 webpack configuration

Is there a way to automatically mount tabs without manually clicking on them?

Using TypeScript to determine the week number - the value on the right side of the math operation must be of data type 'any'

What is the purpose of encasing the routes within the <Switch> element in react-router, when they seem to function perfectly fine without it

The ng-change event is triggered for radio buttons that are generated using ng-repeat the first time they appear, but not for subsequent appearances

Leveraging the power of `.vue` files in modern web browsers that have native support for

NextJs not processing Bootstrap form submissions