WebGL/Three.js Model laden funktioniert nicht

Fugel · 30.01.2018

Hallo Leute,

ich versuche mich gerade das erste mal an WebGL und Three.js und scheitere leider beim laden eines Models.

Hier mein Code:

Code:

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <title>Hello, world!</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
        <script src="build/three.min.js"></script>
        <script type="module" src="src/loaders/MaterialLoader.js"></script>
        <script type="module" src="src/loaders/ObjectLoader.js"></script>
       
        <script>
            var scene, camera, renderer, mesh;

            function init() {
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera(90, 1280 / 720, 0.1, 1000);

                //Objekte
                mesh = new THREE.Mesh(
                        new THREE.BoxGeometry(1, 1, 1),
                        new THREE.MeshPhongMaterial({color: 0xff9999, wireframe: false})
                        );

                scene.add(mesh);
               
               
                //Licht
                ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
                scene.add(ambientLight);
               
                light = new THREE.PointLight();
                light.position.set(-3,6,-3);
                light.castShadow = true;
                light.shadow.camera.near = 0.1;
                light.shadow.camera.far = 25;
                scene.add(light);
               
               
                //Add Object

                var objLoader = new THREE.ObjectLoader();
                objLoader.load('candyCane.obj', function(mesh){
                    scene.add(mesh);
                });

                //Kamera
                camera.position.set(0, 0, -2);
                camera.lookAt(new THREE.Vector3(0, 0, 0));

                renderer = new THREE.WebGLRenderer();
                renderer.setSize(1280, 720);
               
                renderer.shadowMap.enabled = true;
                renderer.shadowMap.type = THREE.BasicShadowMap;
               
               
                document.body.appendChild(renderer.domElement);

                animate();
            }

            function animate() {
                requestAnimationFrame(animate);

                mesh.rotation.x += 0.01;
                mesh.rotation.y += 0.02;

                renderer.render(scene, camera);
            }

            window.onload = init;
        </script>

    </head>
    <body>



        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

und die Fehlermeldung:

THREE:ObjectLoader: Can't parse candyCane.obj.JSON.parse: unexpected character at line 1 column 1 of the JSON data

Kann mir da einer sagen was ich falsch mache?

AliceG · 30.01.2018

Wie sieht denn deine json Datei aus? Ist sie überhaupt da?

Hier: https://stackoverflow.com/questions/23855693/threejs-cannot-load-json-files
scheint jemand gleiches Problem gehabt zu haben. Lösung ist ist dabei.

Fugel · 30.01.2018

Danke für den Link,

so wie ich das sehe hat er zuerst nicht mit dem ObjectLoader geladen, das mach ich aber. Die datei hab ich mir im Netz geladen, die seite wurde bei fast jedem Tutorial zu dem Thema empfohlen. Die Datei sollte somit i.O. sein.

Myhar · 30.01.2018

Wenn die Datei i.O. sein sollte dann sollte dein Code auch funktionieren.

Fugel · 30.01.2018

hast du denn eine Quelle zu einer Datei die 100% stimmt? Zum testen.

Curanai · 01.02.2018

Fugel schrieb:
unexpected character at line 1 column 1 of the JSON data

Für gewöhnlich ist diese Fehlermeldung Hinweis darauf, dass etwas anderes als JSON kommt ... bspw. ein vorgezogenes echo/var_dump/print_r usw., eine serverseitige Fehlermeldung o. ä. Hier musst Du einfach mal im Browser schauen, was er da zurückliefert - Du findest diese Info in der Entwicklerkonsole, die Du in jedem Browser mit F12 erreichst.

Da Du offenbar nur eine Datei mittels Endung .obj lädst, tippe ich mal blindlings auf ein Problem mit der Verzeichnisstruktur (Datei nicht dort, wo Du es erwartest), worauf er Dir einen 404 gibt, welcher zu obiger Meldung führt, da eben HTML und kein JSON.