Three.js node.js file not working:

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

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)

This is my canvas. I want a correct rendered figure with nodejs instead of framework.

ERROR:

image
image1352×361 34.1 KB

2

Using this code it worked, idk how:

// Init Node3D environment
const three = require('three');
const { init, addThreeHelpers } = require('3d-core-raub');
const { doc, gl, requestAnimationFrame } = init({ isGles3: true, isWebGL2: true, vsync: false });
addThreeHelpers(three, gl);

// Three.js rendering setup
const renderer = new three.WebGLRenderer();
const scene = new three.Scene();
const camera = new three.PerspectiveCamera(70, doc.w / doc.h, 0.2, 500);
camera.position.z = 3;
scene.background = new three.Color(0x333333);

// Add scene lights
scene.add(new three.AmbientLight(0xc1c1c1, 0.5));
const sun = new three.DirectionalLight(0xffffff, 2);
sun.position.set(-1, 0.5, 1);
scene.add(sun);

loader=new three.TextureLoader();

// Original knot mesh
const knotGeometry = new three.BoxGeometry(1,3,1);

let bottomMaterial = new three.MeshLambertMaterial({ map: loader.load("bottom.jpg") });

let sideMaterial = new three.MeshLambertMaterial({ map: loader.load("side.jpg") });

let topMaterial = new three.MeshLambertMaterial({ map: loader.load("top.jpg") });

var materialArray = [
	sideMaterial,
	sideMaterial,
	topMaterial,
	bottomMaterial,
	sideMaterial,
	sideMaterial,
];

materialArray[0].map.minFilter = three.NearestFilter
materialArray[0].map.magFilter = three.NearestFilter
materialArray[1].map.minFilter = three.NearestFilter
materialArray[1].map.magFilter = three.NearestFilter
materialArray[2].map.minFilter = three.NearestFilter
materialArray[2].map.magFilter = three.NearestFilter
materialArray[3].map.minFilter = three.NearestFilter
materialArray[3].map.magFilter = three.NearestFilter
materialArray[4].map.minFilter = three.NearestFilter
materialArray[4].map.magFilter = three.NearestFilter
materialArray[5].map.minFilter = three.NearestFilter
materialArray[5].map.magFilter = three.NearestFilter

const knotMesh = new three.Mesh(knotGeometry, materialArray);
scene.add(knotMesh);

// Handle window resizing
doc.addEventListener('resize', () => {
	camera.aspect = doc.w / doc.h;
	camera.updateProjectionMatrix();
	renderer.setSize(doc.w, doc.h);
});

// Called repeatedly to render new frames
const animate = () => {
	requestAnimationFrame(animate);
	const time = Date.now();
	knotMesh.rotation.x = time * 0.0005;
	knotMesh.rotation.y = time * 0.001;
	renderer.render(scene, camera);
};

animate();
3

Solutoin reached.