svg - 三个js线框球体svg

Question

我正在尝试使用three.js构建以下线框球体。重要的是，我可以将它们导出为带有单行(垂直和水平)的结构良好的 SVG 文件，因此我可以使用我的 Axidraw 绘图机绘制它们。

我使用以下设置来获得具有纯白色表面的线框球体:

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'));

但是，当我现在使用 Three.js SVGRenderer 导出球体时，我得到了一个带有奇怪单个片段的 SVG 球体，而不是像希望的单个水平和垂直环/线:

有没有人知道如何获得更好的线框球体结构化 SVG 文件？

Answer 1

你能试试这个设置吗？它只是添加了一个 LineSegments 的实例到场景(并且没有网格)。还要注意 EdgesGeometry 的用法而不是 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;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/examples/js/renderers/Projector.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.116.1/examples/js/renderers/SVGRenderer.js"></script>