There is this “node-canvas-webgl” project that allows you to render Three.js on server side.
With the following step, you can get a sample GIF with a box rotating.
-
git clone
https://github.com/akira-cn/node-canvas-webgl.git
-
npm i
-
node test/three.js
then you get this beautiful rotating box.
However, with this setup on a docker, I get an error message at
const renderer = new THREE.WebGLRenderer({
canvas,
});
saying
THREE.WebGLRenderer: Cannot read properties of null (reading 'getUniformLocation')
/usr/src/app/node_modules/three/build/three.js:18302
throw error;
^
TypeError: Cannot read properties of null (reading 'getUniformLocation')
at NodeCanvasElement.getContext (/usr/src/app/lib/canvas.js:88:39)
at getContext (/usr/src/app/node_modules/three/build/three.js:18248:27)
at new WebGLRenderer (/usr/src/app/node_modules/three/build/three.js:18279:11)
at Object.<anonymous> (/usr/src/app/test/threejs.js:14:18)
at Module._compile (node:internal/modules/cjs/loader:1155:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
at Module.load (node:internal/modules/cjs/loader:1033:32)
at Function.Module._load (node:internal/modules/cjs/loader:868:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:22:47
The project works fine even on EC2, but not on docker. Does anyone know what is going on?
Thanks! Happy Coding!