three.js中使用canvas生成动态纹理贴图

three.js小白的学习之路。

今天分享一个使用canvas生成纹理,然后通过CanvasTexture类创建贴图的例子。

1.canvas纹理

生成一个圆形的canvas纹理,颜色随机,半径随机,圆心随机。

先创建一个随机函数:

TypeScript 复制代码
const rand = (min: number, max: number) => {
  return (Math.random() * (max - min) + min) | 0;
};

Math.random()方法生成一个 [0, 1) 的数据,结合上述计算生成一个 [min, max)区间内的数。

然后根据这个方法随机生成颜色rgb,半径和圆心。

首先颜色,颜色可以使用十六进制数来表示,从 0x000000 到 0xffffff 的范围内均表示一个颜色,由于生成的结果是左包右不包,所以代码如下:

TypeScript 复制代码
rand(0, 0x1000000)

然后再转成十六进制:

TypeScript 复制代码
rand(0, 0x1000000).toString(16).padStart(6, "0")

半径和圆心就比较简单,半径给到[16, 64)范围,圆心不超过canvas的画布大小即可:

TypeScript 复制代码
  const x = rand(0, ctx.canvas.width);
  const y = rand(0, ctx.canvas.height);
  const radius = rand(16, 64);

整体的生成圆的代码如下:

TypeScript 复制代码
const drawRandomCircle = (ctx: CanvasRenderingContext2D) => {
  ctx.fillStyle = `#${rand(0, 0x1000000).toString(16).padStart(6, "0")}`;
  ctx.beginPath();

  const x = rand(0, ctx.canvas.width);
  const y = rand(0, ctx.canvas.height);
  const radius = rand(16, 64);
  ctx.arc(x, y, radius, 0, 2 * Math.PI);
  ctx.fill();
};

2.canvas转three.js的纹理

使用的是Three.CanvasTexture类:

TypeScript 复制代码
const ctx = document.createElement("canvas").getContext("2d")!;
ctx.canvas.width = 256;
ctx.canvas.height = 256;
ctx.fillStyle = "#FFF";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
const texture = new Three.CanvasTexture(ctx.canvas);

3.创建载体盒子

这就是很基础的创建一个BoxGeometry,然后将纹理赋值给材质的属性map:

TypeScript 复制代码
  const geometry = new Three.BoxGeometry();
  const material = new Three.MeshBasicMaterial({
    map: texture,
  });
  const cube = new Three.Mesh(geometry, material);
  scene.add(cube);

4.循环生成圆,更新纹理贴图

在loop循环中,循环调用生成canvas纹理的方法,从而可以多次生成不同圆心、颜色、半径的圆,同时旋转立方体Box:

TypeScript 复制代码
function render(time: number) {
  time *= 0.001;

  cube.rotation.x = time;
  cube.rotation.y = time;

  ctx && drawRandomCircle(ctx);
  texture.needsUpdate = true;

  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

5.结果

相关推荐
知识分享小能手2 小时前
JavaScript学习教程,从入门到精通,Ajax数据交换格式与跨域处理(26)
xml·开发语言·前端·javascript·学习·ajax·css3
哟哟耶耶3 小时前
react-11使用vscode开发react相关扩展插件(相关的快捷生成)
javascript·vscode·react.js
谢一歇_fn4 小时前
如何在uni-app中自定义输入框placeholder的样式
前端·javascript·uni-app
顽强d石头4 小时前
elementui里的el-tabs的内置样式修改失效?
前端·javascript·elementui
江湖行骗老中医5 小时前
js闭包概念和使用
开发语言·javascript·ecmascript
楠奕5 小时前
Neo4j多关系或多路径
前端·javascript·neo4j
小彭努力中8 小时前
8.Three.js中的 StereoCamera 立体相机详解+示例代码
开发语言·前端·javascript·vue.js·深度学习·数码相机·ecmascript
哎哟喂_!11 小时前
UniApp 实现分享功能
前端·javascript·vue.js·uni-app
k19551423912 小时前
uniapp常用
前端·javascript·uni-app