用Three.js纹理球体不能在智能手机上工作

我有一些使用Three.js的麻烦。我想在球体（图像）上应用纹理。我的代码没有任何问题，直到我在智能手机上试用。我试图寻找与Firefox和它的远程调试器的错误，但我没有找到问题。这里是我的代码：用Three.js纹理球体不能在智能手机上工作

<!DOCTYPE html> 
<html> 

    <head> 
     <meta charset="utf-8" /> 
     <title>Test</title> 
     <meta name="viewport" content="initial-scale=1.0" /> 
     <script src="./three.min.js"></script> 
     <script src="./sphere.js"></script> 
     <style> 
      html, body, #container { 
       margin: 0; 
       overflow: hidden; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="container" style="width: 300px; height: 200px;"></div> 

     <script> 
      init(); 
     </script> 
    </body> 

</html>

和：

var renderer, scene, camera, mesh; 

function init() { 
    var container = document.getElementById('container'); 
    var width = container.offsetWidth; 
    var height = container.offsetHeight; 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(width, height); 
    container.appendChild(renderer.domElement); 

    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(90, width/height, 1, 1000); 
    camera.position.set(0, 0, 300); 
    scene.add(camera); 

    var geometry = new THREE.SphereGeometry(200, 16, 16); 

    var texture = new THREE.Texture(); 
    var loader = new THREE.ImageLoader(); 
    var f = function(img) { 
     texture.needsUpdate = true; 
     texture.image = img; 

     var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true}); 
     mesh = new THREE.Mesh(geometry, material); 
     scene.add(mesh); 
     render(); 
     animate(); 
    } 
    loader.load('sphere.jpg', f); 
} 

function animate() { 
    requestAnimationFrame(animate); 
    mesh.rotation.y += 0.003; 
    render(); 
} 

function render() { 
    renderer.render(scene, camera); 
}

我该怎么办错了吗？

如果您想查看代码，请转至here。请注意，WebGLRenderer和CanvasRenderer都存在这个问题。

来源

2014-04-22 Jeremy

难道你的sphere.jpg不是两个幂，你的智能手机无法加载它？尝试将1024x1024作为合理的纹理大小。 – GuyGood

@GuyGood：确实，小图像（2048×1024）没有问题。感谢这个主意！现在的问题是：我们可以改变这种行为吗？：/ – Jeremy

不，我不这么认为，你至少可以试试4096/2048，只需保持2的大小。请记住，即使高端显卡对单个纹理尺寸也有限制。另外，我不明白为什么这个小球体需要大于1024²的任何东西;） – GuyGood

作为转贴：该问题通过使用两种纹理尺寸的幂来解决。

来源

2014-04-22 13:36:33 GuyGood

用Three.js纹理球体不能在智能手机上工作

回答

相关问题