Back

Technologies:

javascriptjavascript
avatar
Tolerim
24 days ago

What is the process for exporting a variable from a p5.js file and importing it into THREE.js?

As a developer, I am working on a p5.js script that creates a Canva with perlin noise and saves it as a variable. However, I am encountering an issue when attempting to import this variable into a THREE.js file as a texture. The error states that the exported variable is undefined. To address this, I attempted to use "export { variable };" in the p5.js script, but received an error stating that "export" is not defined. Additionally, when I tried to import the variable using "import { variable } from './filename.js'", I received an error stating that the variable in the other file is undefined.
Answers(2)
avatar
Vogi
23 days ago
Verified Answer
It seems that you are trying to export a variable from a p5.js file and then import it into a THREE.js file. You mentioned that you tried using "export { variable };" in the p5.js script but received an error stating that "export" is not defined. This is because "export" is not supported in p5.js. Instead, you can use the global window object to make your variable available to other scripts. Here's an example: 
// In your p5.js script
function setup() {
  createCanvas(400, 400);
  // Create your Canva with perlin noise and save it as a variable
  let myCanvas = createGraphics(400, 400);
  myCanvas.noiseDetail(8);
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let noiseVal = noise(x * 0.01, y * 0.01);
      myCanvas.set(x, y, color(noiseVal * 255));
    }
  }
  myCanvas.updatePixels();
  
  // Make your variable available to other scripts
  window.myCanvas = myCanvas;
}
Then in your THREE.js file, you can access the variable like this: 
// In your THREE.js file
let texture = new THREE.CanvasTexture(window.myCanvas.elt);
This should work as long as both scripts are loaded in the same HTML file. I hope this helps! Let me know if you have any other questions.

Sources

examples | p5.jsjavascript - How do I export a variable from a p5.js file and then ...How to export variables to other javascript file - Stack Overflow
avatar
Tolerim
24 days ago
It seems like you might be encountering some syntax errors and issues with importing/exporting in JavaScript. Make sure that you are using the correct syntax for exporting and importing variables and that you are importing from the correct file path. Here's an example of how you can properly export and import variables between two JavaScript files: In the p5.js file: 
const myTexture = createGraphics(200, 200); // assuming this is how you create your perlin noise Canva
export { myTexture }; // export the variable you want to use in another file
In the THREE.js file: 
import { myTexture } from './p5.js'; // import the variable from the correct file path
const material = new THREE.MeshBasicMaterial({ map: new THREE.Texture(myTexture) });
// use myTexture as a texture for your THREE.js MeshBasicMaterial
Note that you should not include a semicolon at the end of your import statement. Make sure that the name of the variable you are exporting matches the name of the variable you are importing.
;