Help with three.js in express.js

Question

Help with three.js in express.js

Navigation

#1 by (1 votes)

3

I want to upload a .json format with objLoader of three.js, everything works perfect in webpack dev-server but when I try to open it through Expressjs The error appears:

this is my threejs code

group = new THREE.Group();
const objLoader = new THREE.ObjectLoader();
objLoader.load('/dist/orig.json', (obj) => {
    objLoader.parseMaterials(obj);
    for ( let i = 0; i <= 300; i ++ ) {
        let mesh = new THREE.Mesh( obj.geometry, obj.material );
        mesh.position.x = Math.random() * 2000 - 1000;
        mesh.position.y = Math.random() * 2000 - 1000;
        mesh.position.z = Math.random() * 2000 - 1000;
        mesh.rotation.x = Math.random() * 2 * Math.PI;
        mesh.rotation.y = Math.random() * 2 * Math.PI;
        mesh.matrixAutoUpdate = false;
        mesh.updateMatrix();
        group.add(mesh);
    }
});
scene.add( group );

the model in .json format

   {
    "metadata": {
        "version": 4.5,
        "type": "Object",
        "generator": "Object3D.toJSON"
    },
    "geometries": [
        {
            "uuid": "E659E6A4-5694-47CA-81D3-7A0B1C3CE82F",
            "type": "BufferGeometry",
            "data": {
                "attributes": {
                    "position": {...
                     },
                    "normal": { ...
                     },
                        }
                },
                "boundingSphere": {
                    "center": [0.255983,14.427521,43.275352],
                    "radius": 62.117679
                }
            }
        }],
    "materials": [
        {
            "uuid": "786A7F66-D4CA-4E72-B923-D1CBC05E6A7A",
            "type": "MeshNormalMaterial",
            "depthFunc": 3,
            "depthTest": true,
            "depthWrite": true
        }],
    "object": {
        "uuid": "52B0AF11-9409-4324-8D5E-892A13524F12",
        "type": "Mesh",
        "name": "Object.1",
        "layers": 1,
        "matrix": [1.634013,0,0,0,0,2.454071,0,0,0,0,2.481994,0,2.12552,19.763961,-34.185104,1],
        "geometry": "E659E6A4-5694-47CA-81D3-7A0B1C3CE82F",
        "material": "786A7F66-D4CA-4E72-B923-D1CBC05E6A7A"
    }
}

Thanks

json reactjs express three.js

asked by Gabriel Espinosa 03.10.2018 в 00:54

source

1 answer

How to open webcam in fullscreen with python? how can I use this character (*) repeatedly in python3?

score 1 · Answer 1

I have never used express, but the error says that it found a < in the zero position, that is, in the first character. Probably the < is part of a tag <html> . Confirm that by directly accessing dist/orig.json from your browser, but the error should be on the server side. Either you are not properly returning a json, but an html from your controller or there is simply an error occurring on the server side that is normally returned as html.

As a separate point, .load accepts 3 callback functions as a parameter, one of them being to handle errors. This I tell you for the hypothetical case that the server is returning an error 500, so you could manage what to do in your code for such a case, something like:

objLoader.load('/dist/orig.json', (obj) => {
    objLoader.parseMaterials(obj);
    for ( let i = 0; i <= 300; i ++ ) {
        let mesh = new THREE.Mesh( obj.geometry, obj.material );
        mesh.position.x = Math.random() * 2000 - 1000;
        mesh.position.y = Math.random() * 2000 - 1000;
        mesh.position.z = Math.random() * 2000 - 1000;
        mesh.rotation.x = Math.random() * 2 * Math.PI;
        mesh.rotation.y = Math.random() * 2 * Math.PI;
        mesh.matrixAutoUpdate = false;
        mesh.updateMatrix();
        group.add(mesh);
    }
},
null,
(err) => {
  console.error('Error del servidor', err);
});