当前位置：首页 > VUE

vue实现柏林噪音

2026-02-11 07:46:12VUE

Vue 实现柏林噪声

柏林噪声（Perlin Noise）是一种用于生成自然随机纹理的算法，广泛应用于游戏开发、地形生成等领域。在 Vue 中实现柏林噪声可以通过引入第三方库或手动实现算法。

使用 noisejs 库实现

安装 noisejs 库：

vue实现柏林噪音

npm install noisejs

在 Vue 组件中引入并使用：

vue实现柏林噪音

import { noise } from 'noisejs';

export default {
  mounted() {
    const Noise = new noise(Math.random());
    const value = Noise.perlin2(0.5, 0.5); // 生成二维柏林噪声值
    console.log(value);
  }
}

手动实现柏林噪声

以下是一个简化的柏林噪声实现示例：

export default {
  methods: {
    generatePerlinNoise(width, height) {
      const grid = [];
      for (let y =  0; y < height; y++) {
        const row = [];
        for (let x = 0; x < width; x++) {
          const nx = x / width - 0.5;
          const ny = y / height - 0.5;
          row.push(this.perlin(nx, ny));
        }
        grid.push(row);
      }
      return grid;
    },

    perlin(x, y) {
      // 实现柏林噪声的核心算法
      const X = Math.floor(x) & 255;
      const Y = Math.floor(y) & 255;
      const xf = x - Math.floor(x);
      const yf = y - Math.floor(y);

      // 简化版的插值计算
      const u = this.fade(xf);
      const v = this.fade(yf);

      // 返回噪声值（范围 -1 到 1）
      return this.lerp(u, 
        this.lerp(v, this.grad(X, Y, xf, yf), this.grad(X+1, Y, xf-1, yf)),
        this.lerp(v, this.grad(X, Y+1, xf, yf-1), this.grad(X+1, Y+1, xf-1, yf-1))
      );
    },

    fade(t) {
      return t * t * t * (t * (t * 6 - 15) + 10);
    },

    lerp(a, b, x) {
      return a + x * (b - a);
    },

    grad(hash, x, y) {
      // 简化版的梯度计算
      switch(hash & 3) {
        case 0: return  x + y;
        case 1: return -x + y;
        case 2: return  x - y;
        case 3: return -x - y;
        default: return 0;
      }
    }
  }
}

可视化柏林噪声

在 Vue 模板中使用 Canvas 渲染噪声图：

<template>
  <canvas ref="noiseCanvas" width="256" height="256"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.noiseCanvas;
    const ctx = canvas.getContext('2d');
    const noiseData = this.generatePerlinNoise(256, 256);

    for (let y = 0; y < 256; y++) {
      for (let x = 0; x < 256; x++) {
        const value = (noiseData[y][x] + 1) * 128; // 将值从 -1~1 映射到 0~255
        ctx.fillStyle = `rgb(${value}, ${value}, ${value})`;
        ctx.fillRect(x, y, 1, 1);
      }
    }
  }
}
</script>