// 創建幾何體
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
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
