Fatal编程技术网
  • javascript/
  • Javascript 如何使用ThreeJS为iPhone 5上的对象呈现.mtl？

Javascript 如何使用ThreeJS为iPhone 5上的对象呈现.mtl？

javascript ios three.js webgl

Javascript 如何使用ThreeJS为iPhone 5上的对象呈现.mtl？,javascript,ios,three.js,webgl,.obj,Javascript,Ios,Three.js,Webgl,.obj,我试图通过ThreeJS加载.obj文件，并使其具有交叉兼容性。我使用的是OBJMTLLoader方法。该对象在Windows上加载并渲染Firefox、Chrome和IE时效果良好；请参阅以供参考 在iPhone5上，我可以看到该对象，但很明显，.mtl没有渲染。iPhone/iOS不完全支持WebGL吗？有什么解决办法吗？感谢您的帮助。下面是我的代码： <html> <head> <script src="threejs/build/three.min

我试图通过ThreeJS加载.obj文件，并使其具有交叉兼容性。我使用的是OBJMTLLoader方法。该对象在Windows上加载并渲染Firefox、Chrome和IE时效果良好；请参阅以供参考

在iPhone5上，我可以看到该对象，但很明显，.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>


var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
时钟=新的三个时钟（）；
//环境的
var环境光=新的三个环境光（0xEEEE）；
场景。添加（环境光）；
//轻的
var灯=新的三点灯（0xffffff，1，50）；
light.position.set（0,0,6）.normalize（）；
场景。添加（灯光）；
添加（/\.dds$/i，新的三个.DDSLoader（））；
//实例化加载程序
var loader=new THREE.OBJMTLLoader（）；
//加载资源
装载机(
//资源URL
“eyebot.obj”、“eyebot.mtl”，
//加载资源时的函数
功能（对象）{
object.position.set（0,0,0）；
摄像机位置设置（0,12,0）；
摄像机。注视（新三个。矢量3（0,0,0））；
obj=对象；
场景。添加（obj）；
}
);
obj=null；
var render=函数（）
{
度/秒=40；
delta=clock.getDelta（）；
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
如果（obj）
{
obj.rotation.x+=delta*Math.PI/180*deg_/秒；//每秒旋转1度
物体旋转y+=增量*数学PI/180*度/秒*1.5；
}
};
renderer=new THREE.WebGLRenderer({
反别名：是的，
阿尔法：是的
});
setClearColor（0x000000，1）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
if（window.addEventListener）
window.addEventListener（'load'，render，false）；
else if（窗口附件）
window.attachEvent（'onload'，render）；
else window.onload=渲染；
您是否在JavaScript控制台中查找错误。同样，iOS模拟器也可以进行类似的调试

从您的评论中，我猜如果您查看了JavaScript控制台，会发现错误是内存不足，图像太大（jpg压缩对WebGL不重要，图像将扩展回其原始未压缩大小）

评论中最可能出现的错误是您正在使用.DDS文件。DDS文件仅在台式机上工作（通常），因为它们通常用于。没有iOS设备支持DXT压缩纹理。有一些安卓设备使用NVidia GPU。对于iOS，您需要将这些压缩纹理更改为JPG或PNG。或者您需要将其更改为iOS支持的压缩格式，如

例如，当我使用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)

您使用的是设备可能无法处理的压缩纹理。在iOS上，您还应该关注任何图像的资源大小限制。请参阅。您应该检查iOS safari设置中是否启用了WebGL。我不知道MTLLoader使用的材质类型，因此您可能仅限于不使用WebGL的画布渲染器。@Radio，我想您已经掌握了资源大小方面的知识。WebGL能够在vrscrolls.com上渲染每个面上都有图像的旋转立方体（每个图像为11Kb），但无法在falloutfan.com上渲染另一个立方体（每个图像为605Kb）。我甚至尝试将605Kb的图像转换为.jpg，但也无法渲染。我可能需要学习如何进一步压缩.dds文件，并将较小的纹理分配给移动用户渲染的对象，除非有人有其他想法。你的纹理是2的幂吗？另外，1024*1024*32位=4 MB的未压缩图像数据。即使您发送的是600kb的压缩文件，webGL也可能会在Safari设置的页面限制之外分配更多的空间。此外，如果您的图像尺寸不合适，我会尝试每个维度的二次幂，例如1、2、4、8、16、32、64。。。我会质疑mobile webGL将纹理拉伸到UV贴图的能力。我会尝试将你的所有图像设置为512px乘以512px。如果操作正确，您可以在同一个文件中存储多个图像，并且具有非常可预测的ram分配。openGL和webGL是相似的，谷歌应该有很多。你认为有可能将DDS文件转换成JPG并正确渲染吗？当然有可能。太好了，谢谢！我期待着在移动平台上渲染这些纹理。所以我所要做的就是使用www.ddscoverter.com中的工具将DDS文件转换为JPG，然后将MTL文件指向新的JPG文件。工作得很有魅力！falloutfan.com/eyebot看起来不错。