3

Quiero subir un modelo formato .json con objLoader de three.js, todo trabaja perfecto en webpack dev-server pero cuando intento abrirlo atravez de Expressjs Aparece el error: introducir la descripción de la imagen aquí

este es mi codigo de threejs

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 );

el modelo en formato .json

   {
    "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"
    }
}

Gracias

4
  • ¿Puedes poner el contenido del archivo orig.json? Lo que noto es que la función load es posible que ya te está regresando un json y con objLoader.parseMaterials(obj); intentas convertirlo nuevamente a json.
    – Phi
    el 3 oct. 2018 a las 3:20
  • Acabo de subir el codigo de orig.json, la funcion obj.Loader.parseMaterials(obj) la utilice como puebra, al final esta no influye en nada en el resultado final, sirve en dev-server tanto con ella como sin ella el 4 oct. 2018 a las 20:07
  • Oye, verifica que tu archivo orig.json tenga una estructura correcta, ya que al copiarlo y pegarlo en un archivo y guardarlo como json, en VS Code me marca errores en el bloque "attributes" que empieza en la línea 12, también hay una "}" de más en ese mismo bloque. el 4 oct. 2018 a las 20:15
  • Si esta bien la estructura, el codigo era bien extenso como para pegarlo aca y trate de resumirlo a mano, es muy posible que haya cometido errores pasandolo aca, el modelo .json fue exportado directo desde three.js y se lee normalmente desde el dev-server el 5 oct. 2018 a las 1:43

1 respuesta 1

1

Nunca he usado express, pero el error dice que encontró un < en la posición cero, o sea en el primer caracter. Probablemente el < es parte de un tag <html>. Confirma eso accediendo directamente a dist/orig.json desde tu explorador, pero el error debería estar por el lado del servidor. Ya sea no estás retornando apropiadamente un json, sino un html desde tu controlador o simplemente está ocurriendo un error por el lado del servidor que normalmente es retornado como html.

Como punto aparte, .load acepta 3 funciones callback como parámetro, siendo una de ellas para manejar errores. Esto te lo digo para el caso hipotético que el servidor te esté retornando un error 500, así podrías manejar que hacer en tu código para tal caso, algo como:

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);
});
4
  • Al abrirlo desde el navegador se observa como un archivo ordinario .json, acabo de subir su codigo si te interesa ver. Probe añadiendo tu codigo y tienes razon es un error de servidor da el mensaje: Error del servidor SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at Object.onLoad (three.module.js:38037) at XMLHttpRequest.<anonymous> (three.module.js:32002) el 4 oct. 2018 a las 20:08
  • Veo que el response de orig.json es el archivo index_bundle.html que es la raiz de mi aplicacion el 4 oct. 2018 a las 20:29
  • Y si vas a la pestaña de network (no se como sale en español, pero me imagino "redes" o "conexiones") en la consola de desarrollador en chrome, ¿también te muestra un json como respuesta? ¿desde qué línea específica de tu código te está arrojando el error? (expande el error en la consola de chrome haciéndole clic). Agrega además el código de tu controlador por si está realizando algo inadecuado. Por último el json que agregaste no es válido, no entrega el mismo error que a tí, pero definitivamente está mal formado el 4 oct. 2018 a las 21:33
  • De respuesta me muestra el index_bundle.html, respecto a el .json que agregue es muy extenso como para subirlo aca y manualmente lo edite es posible tenga errores, pero el original fue exportado directo de threejs el 5 oct. 2018 a las 2:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.