Question

我想使用以下代码使用Three.js加载多个obj + mtl文件。它可以使用一个或两个obj数据。但是当我尝试加载多个OBJ（超过三个）时，它会在iOS上崩溃。

obj数据很小，总共为6MB。如果我在加载后克隆对象，它甚至可以使用十个对象，但如果在iOS上多次使用THREE.OBJMTLLoader，它会崩溃。

我找不到加载多个obj文件的好例子。对于多个OBJ，有什么我应该关心的吗？

<!DOCTYPE html>
<html lang="ja">
  <head><meta charset="UTF-8"></head>
  <script src="http://threejs.org/build/three.min.js"></script>
  <script src="http://threejs.org/examples/js/loaders/MTLLoader.js"></script>
  <script src="http://threejs.org/examples/js/loaders/OBJMTLLoader.js"></script>
  <body>
<div id="canvas_frame"></div>
    <script>
    var canvasFrame, scene, renderer, camera;
    
    canvasFrame = document.getElementById('canvas_frame');
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    canvasFrame.appendChild( renderer.domElement );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set(50,50,50);
    camera.lookAt( {x: 0, y: 0, z: 0} );
    var ambient = new THREE.AmbientLight(0xFFFFFF);
    scene.add(ambient);

    function animate() {
        renderer.render( scene, camera );
        requestAnimationFrame( animate );
    }

    function loadObjMtl(objUrl, mtlUrl, url, x, y, z){
          var loader = new THREE.OBJMTLLoader();
          loader.crossOrigin = 'anonymous';
          loader.load( objUrl, mtlUrl,
              function ( object ) {
                object.url = url; 
                object.position.set(x,y,z);
                scene.add ( object ); 
            });
    }

    objUrl = "http://test2.psychic-vr-lab.com/temp/mesh_reduced.obj";
    mtlUrl = "http://test2.psychic-vr-lab.com/temp/mesh_reduced.mtl";
    loadObjMtl(objUrl,mtlUrl,"",0,0,0);
    loadObjMtl(objUrl,mtlUrl,"",20,20,0);
    loadObjMtl(objUrl,mtlUrl,"",40,20,0);
    loadObjMtl(objUrl,mtlUrl,"",60,0,0);
    animate(); 
    </script>

  </body>
</html>

Answer 1

您的iOS设备上可能已耗尽图形内存。

您使用的纹理文件很大，例如4096x4096 http://test2.psychic-vr-lab.com/temp/tex_0.jpg

对于OpenGL使用的原始位图没有压缩，然后占用大量内存（我认为数十兆，RGB的4096 * 4096 * 3大约为50MB）。

使用较小分辨率的图像。另外在iOS PVRTC上使用压缩格式的纹理格式，在https://github.com/mrdoob/three.js/pull/5337中添加了对three.js的支持（＆＃34;示例中的PVRTC支持＆＃34;）

克隆有效，因为您可以为许多对象重复使用相同的纹理 - 大图像只在内存中使用一次。如果他们都使用相同的图像，那当然是你想要的。但是如果您需要为各种对象提供不同的图像，那么您需要使它们的内存消耗更小。

带有Three.js的多个obj + mtl加载崩溃，特别是在iOS上崩溃

1 个答案: