使用 WebGLRenderer 在 three.js 中显示 svg

【问题标题】：Display svg in three.js using WebGLRenderer使用 WebGLRenderer 在 three.js 中显示 svg
【发布时间】：2016-04-02 17:37:15
【问题描述】：

我可以使用 WebGL 渲染器在 three.js 场景中显示 svg 吗？我知道这可以使用 SVG 渲染器和加载器来完成，但我不能用它来解决我的问题。

谢谢。

【问题讨论】：

也许你会发现这很有用：css-tricks.com/rendering-svg-paths-in-webgl

标签： javascript three.js

【解决方案1】：

您可以使用 Sprite 对象并在 TextureLoader() 中指定您的 svg 文件，如下所示：

var map = new THREE.TextureLoader().load( "sprite.svg" ); 
var material = new THREE.SpriteMaterial( { map: map, color: 0xffffff, fog: true } ); 
var sprite = new THREE.Sprite( material ); 
scene.add( sprite );

您可以在这里阅读更多内容：Three.js - Sprite

【讨论】：

似乎不适用于最新版本的three.js