三.js：使用纹理加载器加载 svg 自 r78 起不起作用

Question

以下对 Three.js 的 R76 和 R77 中的 svg 文件效果很好，但在 R78 中我只能让它与 pngs 和 jpgs 一起使用

    var floor = new THREE.TextureLoader();
    floor.load('layout.svg', function ( texture ) {
        var geometry = new THREE.PlaneBufferGeometry(4096, 4096);
        var material = new THREE.MeshBasicMaterial( { map: texture } );
        var mesh = new THREE.Mesh(geometry, material);
        mesh.rotation.x = -Math.PI / 2;
        scene.add(mesh);
    } );

由于问题出现，我在加载参数中添加了进度和错误函数...

    function ( xhr ) {
        console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
    },

    function ( xhr ) {
        console.log( 'An error happened' );
    }

...这告诉我在 r78 中，svg 已 100% 加载，但它没有出现在场景中。我应该补充一点，我还将它与 phongmaterial 一起用于反射属性，并使用透明度来显示显然漂浮在天空图中的 svg 元素，非常有趣。我的问题是，我怎样才能让它工作？

在 R77 中，svg 将映射到 FF 或 chrome 中的 planeBufferGeometry。

在 R78 中它不会加载，Firebug 上没有显示错误。

更新

我调查了 SVGLoader.js、SVGRenderer.js（也需要 Projector.js）。渲染面向相机的 svg 文件，响应平移，但不响应旋转；即没有透视图是可能的。我在 svg 文件中添加了一个 xml 标头，然后添加了一个 doctype，但 Threejs 显然并没有因为它们的缺席而烦恼。使用 localhost 在 FF 中没有区别，在 Chrome 中是必需的

所以问题似乎出在 TextureLoader 或 WebGLRenderer 上，它们都在 R78 中进行了相当大的改组。

我还简要地尝试了 dev 版本，它的作用与 r78 相同。

谁能建议我从这里去哪里？我不确定是提交错误还是“功能恢复”。 这是想要的效果。

Answer 1

现在我的理解是，在R78之前，svgs在渲染之前在内部转换为光栅图像。

要在 R78 及以上版本中继续使用 Textureloader 中的 svg 图像，请预先将它们转换为 png。

或者，如果 svg 始终面向相机，请使用THREE.SVGLoader。

或者如果在 Three.js 场景中需要单独的 svg 元素，请将它们转换为路径并使用此示例来制作 2d 形状或 3d 拉伸形状。

我在这里得到的教训是不要仅仅依靠示例来发挥作用。我应该立即深入研究，打破常规，并及时了解Github 上的最新问题。

并且使用不止一种浏览器；当时，Chrome 正在经历一个与此不完全无关的 bug 阶段。