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.
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.
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)
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)
}