three.js在canvas画布上生成噪音图，然后创建凹凸贴图(vue中使用three.js79)

博客介绍了使用Three.js生成噪音图并利用canvas画布创建凹凸贴图的方法。实现要点包括引入噪音函数库、在画布上绘制噪音图、创建凹凸贴图材质的网格对象以及更新bumpScale，还给出了demo代码。

使用噪音图创建凹凸贴图

1.demo效果
2. 实现要点
4. demo代码

1.demo效果

在这里插入图片描述

2. 实现要点

2.1 引入噪音函数库

在public目录下的index.html文件中通过< script >标签引入perlin.js 文件

<script type="text/javascript" src="./libs/perlin.js"></script>

2.2在画布上绘制噪音图

这里首先创建一个canvas标签，追加到DOM上，然后通过噪音函数生成噪音图

addCanvas() {
   
   
  const publicPath = process.env.BASE_URL
  this.canvas = document.createElement('canvas')
  this.canvas.setAttribute('width', 256)
  this.canvas.setAttribute('height', 256)
  this.canvas.setAttribute(
    'style',
    'position: absolute; x:0; y:0; bottom: 0px'
  )
  document.getElementById('canvas-output').appendChild(this.canvas)

  const ctx = this.canvas.getContext('2d')
  const date = new Date()
  const pn = new Perlin('rnd' + date.getTime())

  this.fillWithPerlin(pn, ctx)
},

//对canvas噪音处理
fillWithPerlin(perlin, ctx) {
   
   
  for (let x = 0; x < 512; x++) {
   
   
    for (let y = 0; y < 512; y++) {
   
   
      const base = new THREE.Color(0xffffff)
      const value = perlin.noise(x / 12, y / 10, 0) //产生噪音值
      base.multiplyScalar(value) //给Color的RGB每个分量都乘以给定值
      ctx.fillStyle = '#' + base.getHexString()
      ctx.fillRect(x, y, 1, 1)
    }
  }
}

生成的噪声图如下
在这里插入图片描述

2.3 创建凹凸贴图材质的网格对象

createMesh(geom) {
   
   
  const bumpMap = new THREE.Texture(this.canvas)//将canvas画布上的噪音图创建为纹理
  geom.computeVertexNormals()
  const mat = new THREE.MeshPhongMaterial({
   
    color: 0x02ce50 })
  mat.bumpMap = bumpMap //将创建的纹理设置为材质的凹凸贴图
  bumpMap.needsUpdate = true
  const mesh = new THREE.Mesh(geom, mat