Question

以下对于我在R76和R77 of Three.js中使用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，但是三个显然没有被他们的缺席所困扰。在Chrome中使用localhost对FF没有任何影响

所以问题似乎在于使用TextureLoader或WebGLRenderer，它们在R78中都有相当的重新洗牌。

我还简要地尝试了开发版本，它充当了r78。

有谁可以建议我从哪里出发？我不确定是否要提交错误或恢复功能？＃34;。 Here's期望的效果。

Answer 1

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

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

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

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

我在这里的教训不是依靠实例来工作。我应该直接挖掘，破解事物，并在Github上与issues保持同步。

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

three.js：从r78开始加载带有textureloader的svg

1 个答案: