So stellen Sie die Kamera richtig ein

Ich habe Probleme zu wissen, wie die Kamera eingestellt ist. Was ich habe versucht, ist ein Beispiel verwenden und nur die OBJLoader URL zu ändern, um meine DateiSo stellen Sie die Kamera richtig ein

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>three.js webgl - OBJLoader + MTLLoader</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       font-family: Monospace; 
       color: #fff; 
       margin: 0px; 
       overflow: hidden; 
      } 
      #info { 
       color: #fff; 
       position: absolute; 
       top: 10px; 
       width: 100%; 
       text-align: center; 
       z-index: 100; 
       display:block; 
      } 
      #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer } 
     </style> 
    </head> 

    <body> 
     <div id="info"> 
     <a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader + MTLLoader 
     </div> 

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

     <script src="js/loaders/DDSLoader.js"></script> 
     <script src="js/loaders/MTLLoader.js"></script> 
     <script src="js/loaders/OBJLoader.js"></script> 

     <script src="js/Detector.js"></script> 
     <script src="js/libs/stats.min.js"></script> 
     <script src="js/controls/OrbitControls.js"></script> 

     <script> 

      var container, stats; 
      var camera, scene, renderer; 
      var mouseX = 0, mouseY = 0; 
      var windowHalfX = window.innerWidth/2; 
      var windowHalfY = window.innerHeight/2; 

      init(); 
      render(); 

      function init() { 
       container = document.createElement('div'); 
       document.body.appendChild(container); 

       camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
       camera.position.z = -25; 

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

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

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

       THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader()); 

       var mtlLoader = new THREE.MTLLoader(); 
       mtlLoader.load('140018_2.mtl', function(materials) { 
        materials.preload(); 

        var objLoader = new THREE.OBJLoader(); 
        objLoader.setMaterials(materials); 
        objLoader.load('140018_2.obj', function (object) { 

         object.position.set(0, 0, 0); 
         console.log("loaded"); 

         scene.add(object); 
        }); 
       }); 

       // 

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

       controls = new THREE.OrbitControls(camera, renderer.domElement); 
       controls.addEventListener('change', render); // add this only if there is no animation loop (requestAnimationFrame) 
       controls.enableZoom = true; 
      } 

      function animate() { 
       requestAnimationFrame(animate); 
       render(); 
      } 

      function render() { 
       renderer.render(scene, camera); 
      } 
     </script> 
    </body> 
</html>

Es etwas funktioniert. Wenn ich die Seite lade, sehe ich nichts. Aber wenn ich herauszoom, "fliegt" das Objekt von der oberen linken Ecke meines Bildschirms. Alles, was ich wirklich brauche, ist nur, dass das Objekt auf dem Bildschirm zentriert ist.

Wie schaffen Sie das? Der OBJ wird nicht von mir erstellt und seine Einstellungen (Höhe, Breite usw.) können variieren.

Quelle

2016-07-12 Michal-sk

Es scheint also, dass dies mit Beleuchtung zu tun hat ... –

Vielleicht ist Ihre Kamera nicht weit genug vom Zentrum entfernt "camera.position.z = -25". Die Tatsache, dass du sagst "das Objekt fliegt von der oberen linken Ecke", deutet darauf hin, dass deine .OBJ nicht zentriert ist, denn wenn sie aus dem 3D-Editor exportiert wurde, war sie nicht zentriert. – 2pha

Das könnte sehr gut möglich sein. Ist es möglich, es mit ThreeJS zu zentrieren? –

Die Tatsache, dass Sie sagen "das Objekt fliegt von der oberen linken Ecke" schlägt mir vor, dass Ihre .OBJ nicht zentriert ist, wie in, als es aus dem 3D-Editor exportiert wurde, war es nicht zentriert.
Es muss im 3D-Authoring-Programm zentriert und erneut exportiert werden.

Quelle

2016-07-12 11:10:09 2pha

Antwort

Verwandte Themen