在three.js中能否使用外部canvas元素作为立方体模型的纹理？

这个需求完全可以实现，Three.js原生支持将页面中任意已存在的canvas元素作为纹理源使用，不需要额外做格式转换。

实现步骤 #

• 第一步：获取页面中你已经提前绘制好的外部canvas DOM元素
• 第二步：基于该canvas实例化THREE.CanvasTexture纹理对象
• 第三步：将生成的纹理赋值给立方体材质的map属性即可完成绑定

完整示例代码 #

首先你需要在页面中提前定义好外部canvas（可以隐藏不展示）：

<canvas id="externalCanvas" width="512" height="512" style="display: none;"></canvas>

Three.js逻辑部分代码：

// 1. 获取外部canvas并绘制测试内容
const externalCanvas = document.getElementById('externalCanvas');
const ctx = externalCanvas.getContext('2d');
ctx.fillStyle = '#2196F3';
ctx.fillRect(0, 0, 512, 512);
ctx.fillStyle = '#fff';
ctx.font = '50px Arial';
ctx.fillText('外部Canvas纹理', 60, 280);

// 2. 生成Three.js纹理
const canvasTexture = new THREE.CanvasTexture(externalCanvas);
// 静态纹理仅需设置一次，若canvas内容会动态更新，每次重绘后都要执行下一行
canvasTexture.needsUpdate = true;

// 3. 创建立方体并绑定纹理
const geometry = new THREE.BoxGeometry(2, 2, 2);
// 单个纹理默认应用到立方体所有面，如果需要6个面用不同canvas纹理，传入长度为6的材质数组即可
const material = new THREE.MeshBasicMaterial({ map: canvasTexture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

注意事项 #

• 建议将外部canvas的宽高设置为2的幂次（如256、512、1024），避免Three.js自动缩放导致纹理模糊
• 若canvas内容会实时更新（比如动态绘制图表、动画效果），每次修改canvas内容后必须手动将对应canvasTexture.needsUpdate设为true，Three.js才会同步最新的纹理内容
• 若需要立方体不同面使用不同的外部canvas纹理，你可以为每个面单独生成对应CanvasTexture，再将6个材质按顺序组成数组传入Mesh的材质参数即可

内容的提问来源于stack exchange，提问作者Luca Argentieri