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

THREE.js Modelloading geht nicht.

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
 
Werbung:
Du solltest deine HTM-Seite über einen Webserver laden, damit der AJAX-Request die test.json finden kann.
 
Werbung:
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
 
Werbung:
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 ] }
            }
        }
    ]
}
 
Zurück
Oben