Antworten auf deine Fragen:
Neues Thema erstellen

WebGL/Three.js Model laden funktioniert nicht

Fugel

rebmeM

PSD Beta Team
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?
 

Fugel

rebmeM

PSD Beta Team
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.
 

Curanai

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben