用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紋理球體不能在智能手機上工作

回答

相關問題