// 创建几何体
const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
// 材质
const boxMaterial = new THREE.MeshBasicMaterial({
transparent: true,
});
const canvas = createCanvas(400, 400);
const canvasTexture = new THREE.CanvasTexture(canvas);
boxMaterial.map = canvasTexture;
// 网格
const box = new THREE.Mesh(
boxGeometry,
boxMaterial
);
// canvas的宽高如何确定？需要结合webgl里该材质的显示大小，然后再结合屏幕像素比即可
// 比如上面的边长为1的box，显示到屏幕上，可能会占到200px
// 然后再结合到屏幕的设备像素比为2的话，那么制作canvas材质时，尺寸应该为 200 * 2 = 400
function createCanvas(w, h) {
const canvas = document.createElement('canvas');
canvas.classList.add('test');
const context = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;
context.textAlign = 'center';
context.fillStyle = '#ff0000';
context.fillRect(0, 0, w, w);
context.fillStyle = '#fff';
context.font = `${0.1 * w}px sans-serif`;
context.fillText(`${Math.random().toFixed(5)}`, w * 0.5, h * 0.5);
return canvas;
}
使用canvas元素作为texture
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
