.svg资产在three.js 3d空间中

我正在尝试将

.svg

资源作为平面向量层加载到我的three.js场景中；我在另一篇文章中找到了这个例子，其中有

SVGLoader

和

svgrender

，但我无法让它工作

加载的svg卡在2d空间中，无法响应摄影机的移动，我无法访问其位置。 我试图切换到

WebGLRenderer

，但svg没有加载

作为精灵加载的选项会很好，但我希望精灵不要面对相机，并且在3d空间中保持静止

var svgManager=new THREE.SVGLoader（）；
var url='1〕https://upload.wikimedia.org/wikipedia/commons/f/f7/Europe_laea_location_map.svg';
函数svg_加载_完成_回调（doc）{
init（）；
svg（新的3.SVGObject（doc））；
ico（）；
制作动画（）；
};
svgManager.load（url，
svg\u加载\u完成\u回调，
函数（）{
log（“加载SVG…”）；
},
函数（）{
log（“加载SVG时出错！”）；
});
风险价值金额=100；
var容器、摄影机、场景、渲染器；
函数init（）{
场景=新的三个。场景（）；
renderer=new THREE.svgrender（）；
渲染器.setClearColor（0x00ff00）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
var container=document.getElementById（'container'）；
container.appendChild（renderer.domeElement）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=1100；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.enableZoom=true；
addEventListener（'resize'，onWindowResize，false）；
}
函数svg（svg对象）{
svgObject.position.x=510；
svgObject.position.y=-110；
svgObject.position.z=0；
场景.add（svgObject）；
}
函数ico（）{
几何=新的三面体。二十面体几何（100，1）
材质=新的三个.MeshNormalMaterial（{}）；
ico=新的三个网格（几何体、材质）；
ico.position.y=-300；
场景.添加（ico）；
ico2=新的三个网格（几何体、材质）；
Icon.位置y=500；
ico2.position.x=-500；
Icon.position.z=-50；
场景。添加（ico2）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
控制。更新；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}

正文{
保证金：0；
}
帆布{
宽度：100%；
身高：100%
}

SVGLoader
和
svgrender
是两个不同的东西。第一个加载SVG文件并将其转换为3.js形状（尽管有一些限制，例如可以读取非常简单的SVG，不渲染笔划，只渲染填充对象等），而后一个使用SVG元素而不是WebGL渲染3.js基本体。从某种意义上说，它们是对立的

因此，首先，您需要为您的案例使用
WebGLRenderer

然后，您需要更改SVG加载回调。它接收一组路径，您可以使用这些路径渲染SVG

查看函数
svg\u loading\u done\u callback
、
init
和
svg
中的更改，并在以下位置运行它：


var svgManager=new THREE.SVGLoader（）；
var url='1〕https://upload.wikimedia.org/wikipedia/commons/f/f7/Europe_laea_location_map.svg';
函数svg\加载\完成\回调（路径）{
init（）；
svg（路径）；
ico（）；
制作动画（）；
};
svgManager.load（url，
svg\u加载\u完成\u回调，
函数（）{
log（“加载SVG…”）；
},
函数（）{
log（“加载SVG时出错！”）；
});
风险价值金额=100；
var容器、摄影机、场景、渲染器；
函数init（）{
场景=新的三个。场景（）；
renderer=new THREE.WebGLRenderer（）；
渲染器.setClearColor（0x00ff00）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
var container=document.getElementById（'container'）；
container.appendChild（renderer.domeElement）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=1100；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.enableZoom=true；
addEventListener（'resize'，onWindowResize，false）；
}
函数svg（路径）{
var group=新的三个.group（）；
组位置x=510；
组位置y=-110；
组位置z=0；
对于（var i=0；i}
对此有何想法？谢谢，我已经找到了一种不用svg资产的解决方法。下次我需要的时候，我会回来的！