Create three js geometry with values from a database

Questions
1

For the beginning, I’ve built an HTML page that uses “three js” to create some cubes. The number of cubes, the size, the coordinates are fixed.
In the next step, these values, which are the number of cubes, their size and position, are read from a postgrsql database. I do that with node js.
Do I have to create a JSON file or OBJ / MTL files? And import this, as a whole scene, then with a loader?
If so, where can I find an example / description of the JSON format or OBJ / MTL format?

I say thank you for your advice.
Regards

2

You should probably start here.

https://threejs.org/docs/#manual/en/introduction/Loading-3D-models

3

I would import the whole scene, probably as glTF. You can use GLTFExporter to create the glTF asset and then use GLTFLoader to import the file. The following two examples might help to see both classes in action:

https://threejs.org/examples/misc_exporter_gltf.html
https://threejs.org/examples/webgl_loader_gltf

BTW: I don’t think it’s a good idea to store assets in a database. Using a content or just a web server might be the better option.

4

I want to represent an industrial process and get the current values ​​from a database.
I have unfortunately found no way to pass the values ​​to a html page and assign them to the three js geometries. In the meantime I created a scene with blender and exported it to a gltf file.
Unfortunately I can not read this file with three js.

Here is my code under node js:

index.js:

var app = require('express')();

app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});

app.listen(3000, function(){
console.log("Listenng to port 3000")
});

and the index.html:

<html>
<head>
<title>threejs - models</title>

<style>
	body{
		margin: 0;
		overflow: hidden;
	}
</style>
</head>
<body>

<canvas id="myCanvas"></canvas>

<script src="//threejs.org/build/three.js"></script>
<script  type="text/javascript" src="GLTFLoader.js"></script>

<script>

var renderer,
	scene,
	camera,
 	myCanvas  = document.getElementById('myCanvas');	
				
	renderer = new THREE.WebGLRenderer({
		canvas: myCanvas,
		antialias: true
	});
	renderer.setClearColor(0x000000);
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	
	
	camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000 );
	
	camera.position.y = -400;
	camera.position.z = 400;
	camera.rotation.x = .70;
	
	scene = new THREE.Scene();
	
	var light = new THREE.AmbientLight(0xffffff, 0.5);
	scene.add(light);
	
	var light2 = new THREE.PointLight(0xffffff, 0.5);
	scene.add(light2);
	
	
	
	var loader = new THREE.GLTFLoader();
	loader.load('Version_2.gltf', handle_load);
					
	function handle_load(gltf) {
		
		
		scene.add (gltf.scene);
		
	}
	
	// for test:
	//cube = new THREE.Mesh(new THREE.CubeGeometry(100,100,100), new THREE.MeshNormalMaterial());					
	//scene.add(cube);
	
	
	renderer.render(scene, camera);
	
	
				
	</script>
</body>
</html>

It looks like the line:

var loader = new THREE.GLTFLoader();

Blockquote

causes an error.

5

It works now.
I have probably used an old version of the GLTFLoader. I can now load a gltf file. Parallel I tried the OBJLoader / MTL Loader. I can work with that, too.