Three.js线框球SVG

Question

Three.js线框球SVG

4

我正在尝试使用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文件吗？

- iamrobin.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mugen87 · Accepted Answer

请使用这个设置尝试一下？它只会向场景添加一个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>