OBJ-Loader THREE.JS Problem

Ich habe ein Problem mit dem OBJ-Loader in THREE.JS.

Ich habe geschrieben das folgenden code:

   //Scene
scene = new THREE.Scene();

//Camera
camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);

//Renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth-5,window.innerHeight-5);
document.getElementById('container').appendChild(renderer.domElement);


//loader
loader = new THREE.OBJLoader();
loader.load('../disk.obj',function(object){
   scene.add(object);
});
//Main loop
function init() {
   renderer.render(camera,scene);
}

Können Sie mir helfen?

  • Sie sind nicht zu beschreiben, was das problem ist.
  • Der loader wird nicht ausgeführt..
  • was ist der Fehler???
  • Wenn ich render mein code auf dem browser, ich kann nicht sehen, was der Lader leisten sollte.
InformationsquelleAutor user3522940 | 2014-06-14
  1. 1

    Vorausgesetzt, Ihr javascript wird in einer anderen Datei, die Sie nie aufrufen der init-Methode. Wenn Sie das tun, stellen Sie sicher, dass das Dokument geladen ist, mit dem Fenster.onload-Zeile. Sie haben noch keine Lichter in Ihrer Szene, so natürlich es wird alles schwarz. Stellen Sie sicher, dass Sie die OBJLoader, die in der js/examples Ordner. Auch stellen Sie sicher, dass Ihr Objekt Datei ist groß genug, dass die Kamera es bei der Suche.

    Ihres HTML sollte so etwas wie dieses

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>three.js webgl - loaders - OBJ loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  </head>
  <body>
    <script src="three.js/build/three.min.js"></script>
    <script src="three.js/examples/js/loaders/OBJLoader.js"></script>
    <script src="main.js"></script>
    <div id="container"></div>
  </body>
</html>

    - und Ihre javascript-Datei (main.js) sollte so etwas wie dieses. ersetzen Sie natürlich

    window.onload=function(){
  init();
  animate();
}

function init() {

  container = document.getElementById( 'container' );
  console.log(container)
  camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  camera.position.z = 100;

  scene = new THREE.Scene();

  var ambient = new THREE.AmbientLight( 0x101030 );
  scene.add( ambient );

  var directionalLight = new THREE.DirectionalLight( 0xffeedd );
  directionalLight.position.set( 0, 0, 1 );
  scene.add( directionalLight );

  var loader = new THREE.OBJLoader();
  loader.load( 'three.js/examples/obj/male02/male02.obj', function ( object ) {
    console.log(object);
    scene.add( object );
  } );

  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  container.appendChild( renderer.domElement );

}

function animate() {

  requestAnimationFrame( animate );
  render();

}

function render() {

  renderer.render( scene, camera );

}
    InformationsquelleAutor 03civic
  2. 1

    In Ihrem laden callback versuchen, diese

    loader.load('', function( geom ){
    mesh = new THREE.Mesh( geom, yourmaterial);
    scene.add(mesh);
});
    InformationsquelleAutor pailhead
Schreibe einen Kommentar