三个 js 线框球体 svg答案

【问题标题】：Three js wireframe sphere svg三个 js 线框球体 svg
【发布时间】：2020-08-30 17:56:34
【问题描述】：

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

【问题讨论】：

标签： svg three.js

【解决方案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>

【讨论】：

这就是我正在寻找的解决方案。感谢您的精彩回答！还有一个问题：有没有办法只看到“前景”中的线框？换句话说，是否有可能用纯白色填充表面，这样你就无法透过球体看，它也会影响生成的 svg？
恐怕SVGRenderer 不提供这种灵活性。