尝试渲染精灵时，三个js TextureLoader无效。

Question

我正在尝试在Three.js中进行Sprites，但似乎无法使TextureLoader正确加载.jpg。单色有效，而不是图像。我做了一些搜索，但实际上找不到任何特定的Sprites或Texture加载器。得到错误：

Failed to execute 
'texImage2D' on 'WebGLRenderingContext': The cross-origin image 

ERROR 
:GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips
255index.html:1 [.Offscreen-For-WebGL-000001B1C9621FE0]RENDER WARNING: 
texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 
and have incompatible texture filtering.
index.html:1 WebGL: too many errors, no more errors will be reported to the 
console for this 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>