javascript - three.js:使用 textureloader 加载 svg 从 r78 开始不起作用

Question

对于 Three.js 的 R76 和 R77 中的 svg 文件，以下内容对我来说效果很好，但在 R78 中，我只能让它与 png 和 jpg 一起使用

    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 header ，然后是一个 doctype，但是 threejs 显然不会因为它们的缺失而烦恼。使用 localhost 在 FF 中没有区别，在 Chrome 中是必需的

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

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

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

Answer 1

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

要继续在 R78 及 Textureloader 中使用 svg 图像，请事先将它们转换为 png。

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

或者如果在 three.js 场景中需要单独的 svg 元素，将它们转换为路径并使用 this example制作 2d 形状或 3d 挤压形状。

我在这里学到的教训是不要仅仅依靠示例来工作。我应该深入挖掘，破坏事物，并与issues保持同步。在 Github 上。

并使用多个浏览器；当时，Chrome 正在经历一个与此并非完全无关的错误阶段。