如何使用 ThreeJS 为 iPhone 5 上的对象渲染 .mtl？

Question

我正在尝试通过 ThreeJS 加载 .obj 文件并使其交叉兼容。我正在使用 OBJMTLLoader 方法。该对象在 Firefox、Chrome 和 Windows 上的 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. No iOS devices support DXT compressed textures. A few Android devices with NVidia GPUs do. For iOS you either need to change those compressed textures to JPG or PNG. Or you need to change them to a compressed format iOS supports like PVRTC.

例如，当我运行 this three.js sample using DXT compressed texture formats 使用 iOS 模拟器并检查 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)

如何使用 ThreeJS 为 iPhone 5 上的对象渲染 .mtl？

How can I render .mtl for object on iPhone 5 using ThreeJS?

javascript

ios

three.js

webgl

.obj