如何用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 即可访问到页面。

在Three.js中，如果要实现不影响内部材质的透明贴图，则需要对渲染器的混合模式进行设置。具体 *** 作如下：

1. 设置材质的混合模式。可以通过设置material.blending参数来完成。例如将blending设置为THREE.NormalBlending表示材质使用正常的混合模式。如果该参数设置为THREE.CustomBlending，则需要进一步设置material.blendSrc和material.blendDst参数来指定混合源和混合目标。

2. 通过调整渲染器的渲染顺序来避免内部材质的透明被多次覆盖。可以通过设置material.depthTest和material.depthWrite参数来实现。通常情况下，需要将这两个参数都设置为true，以确保在深度测试过程中材质的深度值得到正确的比较和保存。

3. 对于透明贴图本身，需要将其加载为一个带有alpha通道的纹理贴图，并将material.opacity属性设置为小于1的数值，以表明材质是半透明的。

综上所述，通过设置合适的混合模式、渲染顺序和透明度等参数，就可以在Three.js中实现不影响内部材质的透明贴图了。

---