Canvas 画布作为 Three.js 纹理贴图 CanvasTexture - 文章教程

Canvas 画布作为 Three.js 纹理贴图 CanvasTexture

发布于 2021-08-10 字数 2242 浏览 1106 评论 0

Canvas 画布可以通过 2D API 绘制各种各样的几何形状,可以通过 Canvas 绘制一个轮廓后然后作为 Three.js 网格模型、精灵模型等模型对象的纹理贴图。

一段 Canvas 代码

下面是一段与 WebGL 或者说 Threejs 无关的 Canvas 代码,你可以在 .html 文件中打开查看一下,通过下面代码绘制的 Cnavas 画布可以作为 Three.js 模型对象的纹理贴图。

<script type="text/javascript">
var canvas = document.createElement("canvas");
canvas.width = 512;
canvas.height = 128;
var c = canvas.getContext('2d');
// 矩形区域填充背景
c.fillStyle = "#ff00ff";
c.fillRect(0, 0, 512, 128);
  c.beginPath();
// 文字
c.beginPath();
c.translate(256,64);
c.fillStyle = "#000000"; //文本填充颜色
c.font = "bold 48px 宋体"; //字体样式设置
c.textBaseline = "middle"; //文本与fillText定义的纵坐标
c.textAlign = "center"; //文本居中(以fillText定义的横坐标)
c.fillText("郭隆邦_技术博客", 0, 0);
document.body.appendChild(canvas)
</script>
/**
 * 创建一个canvas对象,并绘制一些轮廓
 */
var canvas = document.createElement("canvas");
// 上面canvas代码省略
...
c.fillText("郭隆邦_技术博客", 0, 0);
// canvas画布对象作为CanvasTexture的参数重建一个纹理对象
// canvas画布可以理解为一张图片
var texture = new THREE.CanvasTexture(canvas);
//打印纹理对象的image属性
// console.log(texture.image);
//矩形平面
var geometry = new THREE.PlaneGeometry(128, 32);
var material = new THREE.MeshPhongMaterial({
  map: texture, // 设置纹理贴图
});
// 创建一个矩形平面网模型,Canvas画布作为矩形网格模型的纹理贴图
var mesh = new THREE.Mesh(geometry, material);

Canvas 画布加载图片

如果作为纹理贴图使用的 Canvas 画布加载了图片,注意在图片加载完成的时候更新 Threejs 相关模型的纹理贴图。如果不更新纹理,你会发现 canvas 画布上的图片无法现在是 Threejs 模型的纹理上。

var canvas = document.createElement("canvas");
...
var ctx = canvas.getContext('2d');
var Image = new Image();
Image.src = "./贴图.jpg";
Image.onload = function() {
  var bg = ctx.createPattern(Image, "no-repeat");
...
// 注意图片加载完成执行canvas相关方法后,要更新一下纹理
  texture.needsUpdate = true;
}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

夜无邪

这个人比较懒,什么都没有填写!

9 文章
3 评论
18932 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0