Backend rendering of a preview image

Questions
1

I have a working threejs-based viewer an now i like to generate preview image in the backend. I like t o load the website and than catch the first rendered scene. No move or rotation. I already have a working code in javascript implemented to catch the current scene to a image by click on a button on the webpage so this part should not be the problem.

The backend is written in java and i like to execute a task where i get a image or a path of a image to store them in a database for future use.

Im totally lost where to start. Do i need to setup a complete nodejs setup or are there some smaller opinions for my task?

2

three.js generates the thumbnails for its examples with a node.js script. The most important module of the script is Puppeteer: GitHub - puppeteer/puppeteer: Node.js API for Chrome

Related:

The actual script is:

I don’t know how to implement the same with Java though.

1 Like
3

Considering you wish to render using Canvas API, you cannot do it in node.js directly. Using JSDOM or mockbrowser didn’t work well for me. So, I used node-canvas library to Virtuealize the canvas. After that you know what to do!

Still, here’s my base snippet. Hope it helps!

const { createCanvas } = require("canvas");
const THREE = global.THREE = require("three");
const fs = require("fs");

async function Virtuealize_Canvas() {

    this.width = 512
    this.height = 512
    const canvas = createCanvas(this.width, this.height, { alpha: true })
    
    const renderer = new THREE.WebGLRenderer({ canvas });
    renderer.setSize(this.width, this.height);
    
    const scene = new THREE.Scene();
    
    const camera = new THREE.PerspectiveCamera(75, this.width / this.height, 0.1, 1000);
    camera.position.z = 11
    
    const ambientLight = new THREE.AmbientLight('white', 0.8);
    scene.add(ambientLight);
    
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    
    renderer.render(scene, camera);
    
    const buffer = canvas.toBuffer();
    
    fs.writeFileSync(__dirname + `image.png`, buffer)

}