Question

我正在尝试通过ThreeJS加载.obj文件并使其交叉兼容。我正在使用OBJMTLLoader方法。该对象可以在Windows上加载和渲染Firefox，Chrome和IE;请参阅falloutfan.com/eyebot以供参考。

在iPhone 5上，我能够看到该对象，但很明显.mtl没有渲染。 iPhone / iOS不完全支持WebGL吗？这有什么变通方法吗？任何帮助表示赞赏。以下是我的代码：

<html>
<head>

    <script src="threejs/build/three.min.js"></script>
    <script src="threejs/src/loaders/OBJLoader.js"></script>
    <script src="threejs/src/loaders/OBJMTLLoader.js"></script>
    <script src="threejs/src/loaders/MTLLoader.js"></script>
    <script src="threejs/src/loaders/DDSLoader.js"></script>

</head>

<body>

    <script>

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
        clock = new THREE.Clock();

        // ambient
        var ambient = new THREE.AmbientLight(0xeeeeee);
        scene.add(ambient);

        // light
        var light = new THREE.PointLight( 0xffffff, 1, 50 );
        light.position.set(0, 0, 6 ).normalize();
        scene.add( light );

        THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader());

        // instantiate a loader
        var loader = new THREE.OBJMTLLoader();

        // load a resource
        loader.load(
            // resource URL
            'eyebot.obj', 'eyebot.mtl',
            // Function when resource is loaded
            function ( object ) {
                object.position.set(0, 0, 0);
                camera.position.set(0, 12, 0);
                camera.lookAt(new THREE.Vector3(0,0,0));
                obj = object;
                scene.add( obj );
            }
        );

        obj = null;
        var render = function ()
        {
            deg_per_sec = 40;
            delta = clock.getDelta();
            requestAnimationFrame( render );
            renderer.render(scene, camera);
            if (obj)
            {
                obj.rotation.x += delta * Math.PI / 180 * deg_per_sec; // Rotates 1 degree per second
                obj.rotation.y += delta * Math.PI / 180 * deg_per_sec * 1.5;
            }

        };

        renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true
        });
        renderer.setClearColor( 0x000000, 1);
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        if (window.addEventListener)
            window.addEventListener('load', render, false);
        else if (window.attachEvent)
            window.attachEvent('onload', render);
        else window.onload = render;

    </script>

</body>

Answer 1

您是否在JavaScript控制台中查找错误？ Remote debugging is your friend。 iOS模拟器也可以进行类似的调试

根据您的评论，我猜你是否看过JavaScript控制台会告诉你错误是内存不足，你的图片太大了（jpg压缩并不重要） WebGL，图像将扩展回原来的未压缩尺寸。）

您评论中最可能出现的错误是您正在使用.DDS文件。 .DDS文件仅适用于桌面（通常），因为它们通常用于DXT compressed textures。没有iOS设备支持DXT压缩纹理。一些配备NVidia GPU的Android设备可以。对于iOS，您需要将这些压缩纹理更改为JPG或PNG。或者您需要将它们更改为iOS支持的压缩格式，如PVRTC。

例如，当我使用iOS模拟器运行this three.js sample using DXT compressed texture formats并检查Safari中的JavaScript控制台时，我看到了

[Log] THREE.WebGLRenderer 71 (three.min.js, line 523)
[Warning] THREE.WebGLRenderer: WEBGL_compressed_texture_s3tc extension not supported. (three.min.js, line 2)
[Warning] THREE.WebGLRenderer: EXT_blend_minmax extension not supported. (three.min.js, line 2)
[Warning] THREE.WebGLRenderer: Attempt to load unsupported compressed texture format in .uploadTexture() (three.min.js, line 2, x19)

enter image description here

如何使用ThreeJS在iPhone 5上渲染.mtl for object？

1 个答案: