Three js wireframe sphere svg

Question

I'm trying to build the following wireframe spheres with three.js. It's important, that I can export them as well structured SVG files with singles lines (vertical and horizontal), so I can plot them with my Axidraw drawing machine.

I've used the following setup to get a wireframe sphere with solid white surfaces:

let geometry = new THREE.SphereGeometry(1, 32, 16);
let material = new THREE.MeshBasicMaterial({ color: 0xd3d3d3 });

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

let wireframe = new THREE.WireframeGeometry(geometry);
let line = new THREE.LineSegments(wireframe);
line.material.color.setHex(0x000000);
scene.add(line);

scene.add(new THREE.AmbientLight('#fff'));

But when I export the sphere now with the Three.js SVGRenderer I'm getting a SVG sphere with weird single fragments and not as wished single horizontal and vertical rings/lines:

does anyone have an idea how I can achieve a better structured SVG file of a wireframe sphere?

user_5250847 · Answer

Can you please try it with this setup? It just adds an instance of LineSegments to the scene (and no mesh). Also notice the usage of EdgesGeometry instead of WireframeGeometry.

let camera, scene, renderer, lines;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 50 );
    camera.position.z = 5;

    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0, 0, 0 );

    renderer = new THREE.SVGRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    //

    const geometry = new THREE.SphereBufferGeometry(1, 32, 16);
    const material = new THREE.LineBasicMaterial({ color: 0xd3d3d3 });

    const wireframe = new THREE.EdgesGeometry(geometry);
    lines = new THREE.LineSegments(wireframe, material);
    scene.add(lines);

    //

    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    let time = performance.now() / 1000;

    lines.rotation.x = time / 3;
    lines.rotation.z = time / 4;

    renderer.render( scene, camera );
    requestAnimationFrame( animate );

}

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

svg {
  display: block;
}

Three js wireframe sphere svg

1 Answers