如何用Three.js渲染到纹理

ImageUtils.loadTexture：从指定位置加载图片文件，文件格式可以是PNG，GIF或JPEG文件。

ImageUtils.loadTexture

2个很关键的值得注意的点：

这个方法是异步调用的，所幸的是使用了render循环，这样每秒能被渲染几十次，并不会影响渲染的效果

图片的长宽大小最好是2的次方256*256 512*512等。我曾看到如果使用不是类似这样的长宽，Three..js会将其压缩。

加载纹理的方法

通常，加载纹理可理解为加载图片，然后贴在材质上，一个常用的套路就是写一个函数，用来加载图片，然后返回网格，实例代码如下

function createMesh(geom, imageFile) {

var texture = THREE.ImageUtils.loadTexture(imageFile)

var mat = new THREE.MeshPhongMaterial()

mat.map = texture//材质的Map属性用于添加纹理

var mesh = new THREE.Mesh(geom, mat)

return mesh

}12345671234567

所以，如果给球体添加一个木质纹理属性，就会看起来像这个样子

其实纹理材质跟css的background基本一致，除了简单的颜色背景，还可以贴图。

这里涉及到异步加载图片，为了找到图片资源，我们需要搭建一个静态文件服务器，通过localhost访问网页。

先装一下依赖包：

然后新建一个server.js文件（名字随便起）:

然后运行：

这样静态文本服务器就起来了，我们通过访问 http://localhost:5000/demo.html 即可访问到页面。

---