如何从p5.js导出Perlin噪声画布变量并导入到THREE.js作纹理？

问题根源 #

1. 脚本未声明为ES模块：浏览器默认将普通脚本当作传统模式执行，不支持import/export语法，直接使用会触发“export未定义”错误。
2. get()调用时机错误：p5.js的setup()是异步执行的，你把var map = get()写在setup()外部时，画布还未完成绘制，map会返回null，后续导出自然无效。

修复方案 #

1. 修改p5.js脚本（perlin.js） #

将get()移到setup()内部末尾，确保画布绘制完成后再获取图像，同时正确导出变量：

function setup() { 
  createCanvas(800, 400);
  noStroke();

  for (var x = 0; x < width; x+=1) {
      for (var y = 0; y < height; y+=1) {
          var c = 255 * noise(0.01 * x, 0.01 * y);
          fill(c);
          rect(x, y, 10, 10);
      }   
  }
  // 绘制完成后再获取画布图像并导出
  export const map = get();
}

// 移除原脚本外部的get()调用代码

2. 调整HTML脚本引入方式 #

所有涉及模块导入导出的脚本，必须在HTML中声明type="module"，告诉浏览器按ES模块规则执行：

<!-- 引入p5.js核心库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
<!-- 引入你的p5脚本，声明为模块 -->
<script type="module" src="./perlin.js"></script>
<!-- 引入Three.js脚本，同样声明为模块 -->
<script type="module" src="./your-three-script.js"></script>

3. 修改Three.js脚本 #

确保脚本为模块类型，且导入路径正确（若使用远程URL，需目标服务器配置CORS允许跨域访问）：

// your-three-script.js
import { map } from './perlin.js';

// 验证变量是否成功获取
console.log(map);
// 转换为Three.js可用的纹理
const texture = new THREE.CanvasTexture(map.canvas);

额外优化建议 #

如果p5.js绘制过程存在延迟，可改用draw()配合noLoop()确保图像完全生成后再导出：

function setup() {
  createCanvas(800, 400);
  noStroke();
}

function draw() {
  for (var x = 0; x < width; x+=1) {
      for (var y = 0; y < height; y+=1) {
          var c = 255 * noise(0.01 * x, 0.01 * y);
          fill(c);
          rect(x, y, 10, 10);
      }   
  }
  noLoop(); // 只执行一次绘制
  export const map = get();
}

内容的提问来源于stack exchange，提问作者Alessio Fagnani