Threejs - SVG Renderer + download file

by black strings

HTML

<!--
SVG v105 introduced artifacts around font when rendering textGeometry.

Dot vs cross product
Cross product always returns you an arrow/vector. The return vector will always be perpendicular to the two arrows. it mattesr which of the two arrows goes first.

Dot product always returns a number. If you have two normalized vector, it'll return you a normalized value between 0-1. It can also be negative if one of the vector is negative. It doesn't matter which arrows goes first or second, you'll get the same value.

If the two vectors are not normalized, you may get odd results.
-->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/renderers/SVGRenderer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/renderers/Projector.js"></script>
<div class="no-break">
  <button onClick="takeShot()" class="btn">capture with current render</button>
  <button onClick="takeShot(true)" class="btn">capture as SVG</button>
</div>

<div class="no-break-2">
  <button onClick="toggleRendererSwap()" class="btn">swapRenderer</button>
  <button onClick="toggleCamera()" class="btn">swapCamera</button>
</div>
<div id="ui-display" class="ui-display">Active Render: SVG</div>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}
.no-break div {
  display: inline-block;
  
}
.no-break {
  position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000; /* Ensures the button appears above other elements */
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
}
.no-break .btn {
  border: none;
  background: #0fffFF;
  border-radius: 5px;
  padding: .3rem;
  cursor: pointer;
}
.no-break-2 {
  position: fixed;
    top: 60px;
    right: 10px;
    z-index: 1000; /* Ensures the button appears above other elements */
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
}
.ui-display {
  position: fixed;
    top: 100px;
    right: 10px;
    z-index: 1000; /* Ensures the button appears above other elements */
    padding: 10px 20px;
    color: white;
}

JavaScript

// smooth cam dolly https://github.com/yomotsu/camera-controls

var mesh, renderer, scene, camera, controls, svgRenderer, webGlRenderer, pcam, ocam;

init();
animate();

function init() {

 		// camera
    //camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    //camera.position.set( 20, 20, 20 );
    
   	toggleCamera();

    // SVG renderer
    // there are some limitatsion to SVG, such as it cannot display texture, read threejs doc for more
    toggleRendererSwap();

    // scene
    scene = new THREE.Scene();
    
    // controls
    //controls = new THREE.OrbitControls( camera, renderer.domElement );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20,20, 0 );
    scene.add( light );
    
    var gridXZ = new THREE.GridHelper(1000, 100);
    scene.add(gridXZ);
    //gridXZ.rotation.x = Math.PI / 2;
    
    // axes
    //scene.add( new THREE.AxesHelper( 20 ) );

    // geometry
    var geometry = new THREE.SphereGeometry( 5, 12, 8 );
    
    // material
    var material = new THREE.MeshLambertMaterial( {
        color: 0x00ffff, 
       /*  flatShading: true,
        transparent: true,
        opacity: 0.7, */
    } );
    
    // mesh
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
    const point2d = [
    	new THREE.Vector2(0,0), new THREE.Vector2(10, 0), new THREE.Vector2(10, 10), new THREE.Vector2(10,0)
    ];
    
   /* 	for(const p of point2d) {
   	      p.multiplyScalar(20.0);
   	    } */
    
    const shape = new THREE.Shape(point2d);
    const geo = new THREE.ShapeGeometry(shape, 5);
    const mat = new THREE.MeshBasicMaterial({color: 0xff0000});
    const m = new THREE.Mesh(geo, mat);
    m.add(new THREE.AxesHelper(1));
    //scene.add(m);
    
    /*
    const p1 = new THREE.Vector3();
    const p2 = new THREE.Vector3(0,1);
    const l1Points =...