three.js 使用canvas加载图片作为模型的纹理贴图

效果：

代码：

说一下遇到的问题：

1，图片使用在线百度图库中的图片时，没有加载 出来，报错 THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. 这是遇到了跨域安全问题，解决方式：

跨域安全问题。跨域；解决办法：安全

1 若是你用的是纹理题图：如：three
var loader = new THREE.TextureLoader();
加上：loader.setCrossOrigin( 'Anonymous');方法便可。
（THREE.ImageUtils.loadTexture也可用这个方法）

2 若是你是直接用img的，如：img
var img = new image(); 加上 img.crossOrigin =“anonymous” 便可loader

3 若是你被THREE.WebGLRenderer: image is not power of two  这样的warning所困扰，在你的创建mesh后加上：mesh.material.map.minFilter = THREE.LinearFilter; 便可。如

var mesh = new THREE.Mesh( geometry, material );
mesh.material.map.minFilter = THREE.LinearFilter;

2，即使解决了安全策略问题，还是无法显示纹理贴图， ， //如果不设置texture.needsUpdate = true ,纹理可能就不会更新，你很可能看到得是黑色几何体。原因是纹理绘制需要一段时间，javascript是可以异步运行的；这里我注释了 texture.needsUpdate = true 这一句，依然能渲染出来，最好是不要注释；上面的Html 中，在创建平面模型 PlaneGeometry ,、高光材质 MeshPhongMaterial  、网格模型 Mesh 时，将他们三者的创建放在了 图片加载完成后进行创建，否则纹理依然无法渲染出来。