There is this project on Github I am trying to use. The project has the very basic setup and it renders a sphere on server side → [link].
What I did was
const fs = require('fs');
const BABYLON = require('babylonjs');
const {createCanvas} = require('../lib');
// polyfill
global.HTMLElement = function () {};
global.window = {
setTimeout,
addEventListener() {},
};
global.navigator = {};
global.document = {
createElement() {
return createCanvas(300, 150);
},
addEventListener() {},
};
// Get the canvas DOM element
const canvas = createCanvas(512, 512);
// Load the 3D engine
const engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
// CreateScene function that creates and return the scene
const createScene = function () {
// Create a basic BJS Scene object
const scene = new BABYLON.Scene(engine);
// Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
const camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
// Target the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// Attach the camera to the canvas
camera.attachControl(canvas, false);
// Create a basic light, aiming 0, 1, 0 - meaning, to the sky
const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
// Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
const sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);
// Move the sphere upward 1/2 of its height
sphere.position.y = 1;
// Create a built-in "ground" shape; its constructor takes 6 params : name, width, height, subdivision, scene, updatable
const ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
const isPluginAvailable = BABYLON.SceneLoader.IsPluginForExtensionAvailable('.babylon')
console.log('Plugin Availability ::::: ', isPluginAvailable)
BABYLON.SceneLoader.ImportMesh('', 'https://playground.babylonjs.com/scenes/', 'dummy2.babylon', scene, null)
// Return the created scene
return scene;
};
// call the createScene function
const scene = createScene();
scene.render();
fs.writeFileSync('./snapshot/snap-babylon.png', canvas.toBuffer());
// run the render loop
// engine.runRenderLoop(() => {
// scene.render();
// });
Then it produces infinite log on the terminal like this
var n=function(e,t){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])})(e,t)};function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function i(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)}var o=function(){return(o=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var r in t=arguments[i])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};function a(e,t,i,n){var r,o=arguments.length,a=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,n);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,i,a):r(t,i))||a);return o>3&&a&&Object.defineProperty(t,i,a),a}function s(e,t,i,n){return new(i||(i=Promise))((function(r,o){function a(e){try{c(n.next(e))}catch(e){o(e)}}function s(e){try{c(n.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?r(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(a,s)}c((n=n.apply(e,t||[])).next())}))}function c(e,t){var i,n,r,o,a={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]};return o={next:s(0),th....
@bghgary, I have succeeded in rendering on server side using BabylonJS and even with ThreeJS, but had a problem when trying to load models
@slin , I also tried loading a model the way you did with base64
const rawContent = fs.readFileSync('/Users/david/Documents/dummy2.babylon')
const base64Content = Buffer.from(rawContent).toString('base64')
const base64ModelString = `data:base64,${base64Content}`
const { meshes, skeletons } = await BABYLON.SceneLoader.ImportMesh('', '', base64ModelString, scene)
and still got this error
BJS - [17:00:24]: Unable to import meshes from data:base64,ewogICJwcm9kdWNl
Hmm… I think this is the smallest unit project I can reproduce