javascript - Texturing a sphere with Three.js does'nt work on smartphones -
i have troubles using three.js. want apply texture on sphere (an image). code works without problem... until try on smartphone. try bug firefox , remote debugger, did not find issue. here code :
<!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> and :
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); } what do wrong?
if want see code in action, can go here. note problem here both webglrenderer , canvasrenderer.
as repost: problem solved using power of 2 texture sizes.
Comments
Post a Comment