Created
May 6, 2025 07:09
-
-
Save sport4minus/6ab4190d9402a1739f4ff2a4d02d3273 to your computer and use it in GitHub Desktop.
Use three.js in a p5js sketch - render into p5js graphics offscreen buffer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Three Five</title> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <!-- assume local copies of p5js and three --> | |
| <script src="libraries/p5.min.js"></script> | |
| <script src="libraries/three.min.js"></script> | |
| </head> | |
| <body> | |
| <script src="sketch.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //three.js needs a canvas to render into | |
| let threeCanvas; | |
| let scene, camera, cube; | |
| let renderer; | |
| function setup() { | |
| createCanvas(400, 400, WEBGL); | |
| //here, we create a p5js graphics object. under the hood, this also creates a canvas. and, we can use it as a texture when we call image() | |
| threeCanvas = createGraphics(400, 400, WEBGL); | |
| console.log("three canvas", threeCanvas.canvas); | |
| // this is important: we pass the html canvas of the graphics object to the threejs renderer as render target. | |
| // if alpha:true is set, we have a transparent background | |
| renderer = new THREE.WebGLRenderer({ canvas: threeCanvas.canvas, alpha:true}); | |
| // the size of the renderer should match the size of the graphics object. | |
| //it does not necessarily need to be the same size as the main sketch. | |
| renderer.setSize(width, height); | |
| //set up three scene, lights, materials... here it's just a simple green cube | |
| scene = new THREE.Scene(); | |
| const geometry = new THREE.BoxGeometry(1, 1, 1); | |
| const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); | |
| cube = new THREE.Mesh(geometry, material); | |
| camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); | |
| camera.position.set(0, 0, 10); | |
| scene.add(cube); | |
| } | |
| function draw() { | |
| //normal draw cycle | |
| background(220); | |
| //rotate whole sketch in order to demonstrate that the visible three stuff is actually rendered into a texture | |
| rotateX(0.5) | |
| rotateY(0.5) | |
| //animate three scene. | |
| cube.rotateX(0.001); | |
| cube.rotateY(0.002); | |
| //call renderer.render before using threeCanvas | |
| renderer.render(scene, camera); | |
| //finally, display three.js render output as texture/image | |
| image(threeCanvas, -200, -200); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment