当前位置：首页 > VUE

vue实现柏林噪音

2026-03-28 18:13:37VUE

Vue 实现柏林噪声

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

安装噪声库

推荐使用 noisejs 库，它提供了柏林噪声的实现。通过 npm 安装：

npm install noisejs

基础实现

在 Vue 组件中引入 noisejs 并生成柏林噪声：

import { Noise } from 'noisejs';

export default {
  data() {
    return {
      noise: new Noise(Math.random()), // 使用随机种子初始化
      width: 100,
      height: 100,
    };
  },
  methods: {
    generateNoise() {
      const noiseData = [];
      for (let y = 0; y < this.height; y++) {
        for (let x = 0; x < this.width; x++) {
          // 缩放系数控制噪声细节
          const scale = 0.1;
          const value = this.noise.simplex2(x * scale, y * scale);
          noiseData.push(value);
        }
      }
      return noiseData;
    },
  },
};

可视化噪声

将生成的噪声数据渲染到 Canvas 上：

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

<script>
export default {
  mounted() {
    this.drawNoise();
  },
  methods: {
    drawNoise() {
      const canvas = this.$refs.noiseCanvas;
      const ctx = canvas.getContext('2d');
      const noiseData = this.generateNoise();

      for (let y = 0; y < this.height; y++) {
        for (let x = 0; x < this.width; x++) {
          const index = y * this.width + x;
          const value = (noiseData[index] + 1) / 2; // 归一化到 [0, 1]
          const color = Math.floor(value * 255);
          ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
          ctx.fillRect(x, y, 1, 1);
        }
      }
    },
  },
};
</script>

动态噪声

通过时间参数实现动态变化的噪声效果：

methods: {
  animateNoise() {
    let time = 0;
    const animate = () => {
      const noiseData = [];
      for (let y = 0; y < this.height; y++) {
        for (let x = 0; x < this.width; x++) {
          const value = this.noise.simplex3(x * 0.1, y * 0.1, time);
          noiseData.push(value);
        }
      }
      this.renderNoise(noiseData);
      time += 0.01;
      requestAnimationFrame(animate);
    };
    animate();
  },
  renderNoise(data) {
    const ctx = this.$refs.noiseCanvas.getContext('2d');
    // 渲染逻辑与之前相同
  },
},
mounted() {
  this.animateNoise();
},