javascript - Three js TextureLoader not working when trying to render sprites. -
i'm trying sprites in three.js cant seem textureloader load .jpg properly. single color works, not image. i'v done searches couldn't find specific sprites or texture loader. getting error:
failed execute 'teximage2d' on 'webglrenderingcontext': cross-origin image error :gl_invalid_operation : glgeneratemipmap: can not generate mips 255index.html:1 [.offscreen-for-webgl-000001b1c9621fe0]render warning: texture bound texture unit 0 not renderable. maybe non-power-of-2 , have incompatible texture filtering. index.html:1 webgl: many errors, no more errors reported console context. <canvas id="mycanvas"></canvas> <script src="js/three.js"></script> <script> var renderer = new three.webglrenderer({canvas: document.getelementbyid('mycanvas'), antialias: true}); renderer.setclearcolor(0x000000); renderer.setpixelratio(window.devicepixelratio); renderer.setsize(window.innerwidth, window.innerheight); var camera = new three.perspectivecamera(35, window.innerwidth / window.innerheight, 300, 10000); var scene = new three.scene(); var light = new three.ambientlight(0xffffff, 0.5); scene.add(light); var light1 = new three.pointlight(0xffffff, 0.5); scene.add(light1); var spritemap = new three.textureloader().load( 'flake.png' ); var spritematerial = new three.spritematerial( { color: 0xffffff } ); var sprite = new three.sprite( spritematerial ); sprite.scale.set(500, 500, 1); sprite.position.z = -1000; var sprite = new three.sprite( spritematerial ); sprite.scale.set(500, 500, 1); sprite.position.z = -1000; scene.add( sprite ); window.onresize = function () { camera.aspect = window.innerwidth / window.innerheight; camera.updateprojectionmatrix(); renderer.setsize( window.innerwidth, window.innerheight ); }; render(); function render() { renderer.render(scene, camera); requestanimationframe(render); }; </script>
Comments
Post a Comment