Three on node.js

Hello,

would someone please be so kind to point me in a good direction to a modern approach to work with node.js running three.js on it.
I would like to use three on the server in every way I do in the browser. But nothing too fancy, please as I do not use frameworks like react, vue or angular.

three works fine under node, only three/examples/jsm does not. you will have better luck with GitHub - pmndrs/three-stdlib: Stand-alone library of threejs examples designed to run without transpilation in node & browser which mostly runs fine, but loaders for instance still rely on web apis.

what is it that you’re trying to do exactly?

Sean-Bradley/Threejs-Boilerplate: A Threejs Boilerplate to aid in quick prototyping (github.com)

Hello and tu,

there may be several things I would like to accomplish with three.js. I could think of it as a game server which can save scenes and takes the part of a route/ pathfinding machine for a game I am working on. I would like to make Videos and save them. There are many many things…

It’s my first approach with modules so that may take some time, too. At the moment I am stuck when being told that the renderer has no render- method…

What disturbs me is that it seems I have to start the program in the CLI every time I made changes and getting errors there, too.

i would first try if stdlib helps, and then maybe make a list of the troubles you have and make an issue there so that we can fix it. we use sdtlib for similar reasons, mostly ssr on the server. so our goals are a little different from how threejs deals with examples/jsm, node being top priority.

Would you like to go a bit more into detail, please ?

If you’d like to use three in the server. Research server side rendering.
Note that three is not intended to run on the server, so you will have many extra issues that you need to resolve.
I have written another boilerplate that demonstrates server side rendering which I abbreviate as SSR. (not Screen Space Reflection processing)

Working Demo : https://sbcode.net/threejs/ssr-branch/

Boilerplate : Sean-Bradley/Three.js-TypeScript-Boilerplate at ssr (github.com)
See the SSR branch
Its a typescript project.

Heads-up, server side rendering with threejs is very complicated and you will have many extra problems to solve but my boilerplate can start you off.

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)

}