THREE.js Modelloading geht nicht.

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
29
1
3
17
Hallo.
Ich habe ein Problem mit dem Objectloader und denke das ich hier beim Thema javascript richtig bin.
Momentan versuche ich js zu lernen und wollte Jetzt eine json Datei einfügen.
Ich benutze xampp um die website zu laden... Daran kann es also nicht liegen.
Außerdem wars es noch gedacht das Modell in den Header zu laden (neben den Text).
LG Johannes ;)

HTML:
<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <meta name="keywords" content="">
    <meta name="generator" content="Atom">
    <link rel="stylesheet" href="css/indexstyle.css">
  </head>
  <body>
<div class="all">
  <header><h1>Test</h1>
    <ol><a href="#">test</a><a href="#">test</a><a href="#">test</a><a href="#">test</a></ol>
    </header>
</div>

<script src="js/three.js"></script>
<script src="js/ObjectLoader.js">

</script>

<script>
//drawscene
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', function()
  {var width=window.innerWidth;
   var height=window.innerHeight;
   renderer.setSize(width,height);
   camera.aspect = width/height;
   camera.updateProjectionMatrix();
});

var loader =new THREE.ObjectLoader();
loader.load ('models/test.json',function(object){scene.add(object);});
  camera.position.z=3;

  var ambientLight =new THREE.AmbientLight(0xffffff,0.9);

  //logic
  var update = function(){};
  //loop
  var render = function (){renderer.render(scene,camera);};
  var GameLoop = function(){requestAnimationFrame(GameLoop);
  update();render(); };
  GameLoop();
</script>
  </body>

</html>
Screenshot (49).png
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.238
483
83
Berlin
Du solltest deine HTM-Seite über einen Webserver laden, damit der AJAX-Request die test.json finden kann.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.147
428
83
68
Ich denke, sowohl bei Xampp als auch threejs liegst Du richtig. Ich empfehle dabei zu bleiben und den Fehler zu suchen und zu beheben.
 

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
29
1
3
17
Hmmmm villeicht will wenn der browser das den object loader geladen hat nicht das dieser eine Datei vom server per js abruft..

könnte man nicht das objekt als var einspeichern ?
also das er sagt das diese var jetzt abgerufen wird die dann halt das dokument beinhaltet
 

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
29
1
3
17
Screenshot (51).png


Jetzt sind es wenigstens 2 andere fehler (Habe ein anderes Modell genommen)
Achja und falls wer ein anderes tool kennt womit man json modelle machen kann währe das auch sehr gut zu wissen ;)

Code:
{
    "__comment": "Model generated using MrCrayfish's Model Creator (https://mrcrayfish.com/tools?id=mc)",
    "textures": {
        "download": "minecraft:blocks/download"
    },
    "display": {
        "gui": {
            "rotation": [ 30, 45, 0 ],
            "translation": [ 0, 0, 0 ],
            "scale": [ 0.625, 0.625, 0.625 ]
        },
        "ground": {
            "rotation": [ 0, 0, 0 ],
            "translation": [ 0, 3, 0 ],
            "scale": [ 0.25, 0.25, 0.25 ]
        },
        "fixed": {
            "rotation": [ 0, 180, 0 ],
            "translation": [ 0, 0, 0 ],
            "scale": [ 1, 1, 1 ]
        },
        "head": {
            "rotation": [ 0, 180, 0 ],
            "translation": [ 0, 0, 0 ],
            "scale": [ 1, 1, 1 ]
        },
        "firstperson_righthand": {
            "rotation": [ 0, 315, 0 ],
            "translation": [ 0, 2.5, 0 ],
            "scale": [ 0.4, 0.4, 0.4 ]
        },
        "thirdperson_righthand": {
            "rotation": [ 75, 315, 0 ],
            "translation": [ 0, 2.5, 0 ],
            "scale": [ 0.375, 0.375, 0.375 ]
        }
    },
    "elements": [
        {
            "name": "Cube",
            "from": [ 0, 0, 0 ],
            "to": [ 16, 15, 5 ],
            "faces": {
                "north": { "texture": "#download", "uv": [ 0, 0, 16, 15 ] },
                "east": { "texture": "#download", "uv": [ 0, 0, 5, 15 ] },
                "south": { "texture": "#download", "uv": [ 0, 0, 16, 15 ] },
                "west": { "texture": "#download", "uv": [ 0, 0, 5, 15 ] },
                "up": { "texture": "#download", "uv": [ 0, 0, 16, 5 ] },
                "down": { "texture": "#download", "uv": [ 0, 0, 16, 5 ] }
            }
        },
        {
            "name": "Cube",
            "from": [ 0, 0, 5 ],
            "to": [ 16, 9, 10 ],
            "faces": {
                "east": { "texture": "#download", "uv": [ 0, 0, 5, 9 ] },
                "west": { "texture": "#download", "uv": [ 0, 0, 5, 9 ] },
                "up": { "texture": "#download", "uv": [ 0, 0, 16, 5 ] },
                "down": { "texture": "#download", "uv": [ 0, 0, 16, 5 ] }
            }
        },
        {
            "name": "Cube",
            "from": [ 0, 0, 10 ],
            "to": [ 16, 16, 17 ],
            "faces": {
                "north": { "texture": "#download", "uv": [ 0, 0, 16, 16 ] },
                "east": { "texture": "#download", "uv": [ 0, 0, 7, 16 ] },
                "south": { "texture": "#download", "uv": [ 0, 0, 16, 16 ] },
                "west": { "texture": "#download", "uv": [ 0, 0, 7, 16 ] },
                "up": { "texture": "#download", "uv": [ 0, 0, 16, 7 ] },
                "down": { "texture": "#download", "uv": [ 0, 0, 16, 7 ] }
            }
        }
    ]
}
 
Werbung:

Neueste Beiträge