作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。
150篇入门文章
THREE.CanvasTexture 是 Three.js 中的一个纹理类，用于从 HTML5 <canvas> 元素创建纹理。与其他类型的纹理（如从图像文件创建的纹理）不同，CanvasTexture 允许你动态地生成纹理内容，因为 <canvas> 元素本身就是一个可以绘制任意内容的画布。
构造函数
构造函数 new THREE.CanvasTexture(canvas[, flipY[, premultiplyAlpha]]) 用于创建一个新的 CanvasTexture 实例。
- canvas：HTML5
<canvas>元素。这是纹理数据的来源。 - flipY：布尔值，指定是否翻转 Y 轴。默认值为
true，表示纹理的垂直方向会被反转。对于<canvas>元素来说，通常不需要翻转（即设置为false）。 - premultiplyAlpha：布尔值，指定是否在纹理加载时进行 Alpha 预乘。默认值为
true。
属性
THREE.CanvasTexture 类提供了多个属性来控制纹理的行为：
- image：返回创建纹理的
<canvas>元素。 - needsUpdate：布尔值，当纹理内容发生变化时，设置为
true，以通知 Three.js 重新加载纹理。
方法
THREE.CanvasTexture 类提供了几个方法来控制纹理的更新：
- dispose()：释放与纹理关联的 WebGL 资源。
- onUpdateCallback()：当纹理更新时调用的回调函数。
使用示例
下面是一个简单的示例，展示如何使用 THREE.CanvasTexture 来创建一个动态生成的纹理，并将其应用到一个网格上：
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建一个 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个 <canvas> 元素
const canvas = document.createElement('canvas');
canvas.width = 128;
canvas.height = 128;
const ctx = canvas.getContext('2d');
// 在 <canvas> 上绘制图案
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 创建一个 CanvasTexture
const texture = new THREE.CanvasTexture(canvas);
// 创建一个材质
const material = new THREE.MeshBasicMaterial({
map: texture });
// 创建一个网格对象
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
// 更新 <canvas> 内容
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'blue';
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, Math.PI * 2);
ctx.fill();
texture.needsUpdate = true; // 标记纹理需要更新
// 更新立方体的旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
animate();
在这个示例中，我们首先创建了一个 <canvas> 元素，并在其上绘制了一个红色的矩形。然后，我们使用这个 <canvas> 元素创建了一个 CanvasTexture，并将该纹理应用到一个立方体的材质上。在渲染循环中，我们清除了 <canvas> 的内容，并绘制了一个蓝色的圆圈，然后标记纹理需要更新，以确保 Three.js 重新加载纹理。
注意事项
-
更新纹理：当
<canvas>内容发生变化时，必须手动设置needsUpdate属性为true，以确保 Three.js 重新加载纹理。 -
性能考虑：频繁地更新纹理可能会导致性能下降。因此，在实际应用中，应该尽量减少更新频率，或将更新操作批量执行。
-
翻转 Y 轴：默认情况下，
CanvasTexture的构造函数会翻转 Y 轴，因为<canvas>的原点位于左上角，而纹理坐标系统的原点位于左下角。如果不需要翻转，可以将flipY参数设置为false。 -
预乘 Alpha：默认情况下，
premultiplyAlpha参数为true，这意味着在纹理加载时会进行 Alpha 预乘。如果不需要预乘，可以将此参数设置为false。
总结
THREE.CanvasTexture 是 Three.js 中用于从 <canvas> 元素创建纹理的类。通过使用 <canvas> 元素，你可以动态地生成纹理内容，并将其应用于 Three.js 的材质上。这对于需要实时生成纹理的应用场景非常有用，例如游戏中的动态 UI 元素或其他需要实时更新的纹理。
在实际开发中，可以根据需要选择合适的参数来配置 CanvasTexture，并注意在内容发生变化时及时更新纹理。