Three.js로 구형 텍스처링이 스마트 폰에서 작동하지 않습니다.

Three.js를 사용하는 데 문제가 있습니다. 구 (이미지)에 텍스처를 적용하고 싶습니다. 내 코드는 아무 문제없이 작동합니다 ... 스마트 폰에서 시도 할 때까지. 나는 파이어 폭스와 그 원격 디버거로 버그를 찾으려고 노력하지만, 나는 그 문제를 발견하지 못했다.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가 2의 거듭 제곱이 아니므로 스마트 폰에서로드 할 수 없습니까? 합리적인 텍스처 크기로 1024x1024를 시도하십시오. – GuyGood

@GuyGood : 사실 작은 이미지 (2048 × 1024)에서는 문제가 없습니다. 이 아이디어에 감사드립니다! 이제 문제는 : 우리는이 행동을 바꿀 수 있습니까? :/ – Jeremy

아니오, 그렇게 생각하지 않습니다. 최소한 4096/2048을 시도해보십시오. 단지 크기를 2로 유지하십시오. 하이 엔드 그래픽 카드조차도 단일 텍스처 크기에 한계가 있음을 명심하십시오. 또한,이 작은 구형이 1024²보다 큰 것을 필요로하는 이유를 알 수 없습니다.) – GuyGood

재 게시 : 문제는 두 텍스처 크기의 힘을 사용하여 해결됩니다.

출처

2014-04-22 13:36:33 GuyGood

Three.js로 구형 텍스처링이 스마트 폰에서 작동하지 않습니다.

답변

관련 문제