如何解决三个JS线框球形SVG
我正在尝试使用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文件吗?
解决方法
可以在此设置下尝试一下吗?它只是将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 );
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。