2016-04-14 25 views
1

doku, 3d modele çaldırmak için yüklenmedi. Ama diğer bazı nesneler için çalışacaktır.değer derleme hataları yok. Tüm tüm ışık durumunu doğru ayarlıyorum.ama 3d model renk gri/black.texture diğer nesne için doğru yüklenmiştir.3d nesne formatı .obj, koduma mtl dosyası yüklemedim. mtlobjloader, threejs.org'da değil, mtl dosyasını yüklemek ve dokuyu nesneye eşlemek için bir yer vardır. plz bana yardım et.doku 3d cisme yüklenemedi (harita)

enter code here

<html> 
<head> 
<title> Test Three.js</title> 
<style type="text/css"> 
     BODY 
     { 
      margin: 0; 
     } 

     canvas 
     { 
      width: 100%; 
      height:100%; 
     } 



     </style> 
</head> 
<body> 


      <div> 
       <p>Color: 
       <button class="jscolor{onFineChange:'onClick(this)',valueElement:null,value:'66ccff'}" 
        style="width:50px; height:20px;"></button> 
        </p> 
        <p>Object: 
         <button style="width:50px; height:20px;" id="object"></button> 
        </p> 
      </div> 

     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src="three.min.js"></script> 
     <script src="TrackballControls.js"></script> 
     <script src="jscolor.js"></script> 
     <script src="AmbientLight.js"></script> 
     <script src="SpotLight.js"></script>"> 
     <script src="JSONLoader.js"></script>"> 
     <script src="ObjectLoader.js"></script>"> 
     <script src="OBJLoader.js"></script>"> 
     <script src="MTLLoader.js"></script>"> 
     <script src="Material.js"></script>"> 
     <script src="MeshPhongMaterial.js"></script>"> 
     <script> 
     function onClick(jscolor) { 

     cube.material.color = new THREE.Color('#'+jscolor); 
     cube.material.needsUpdate = true; 
     }; 

     var onClicked=function(){ 
      scene.remove(cube); 

      var material1 = new THREE.LineBasicMaterial({ 
       color: 'red' 
      }); 

      var geometry1 = new THREE.Geometry(); 
      geometry1.vertices.push(
       new THREE.Vector3(-10, 0, 0), 
       new THREE.Vector3(0, 10, 0), 
       new THREE.Vector3(10, 0, 0) 
      ); 

      var cube1 = new THREE.Line(geometry1, material1); 
      scene.add(cube1); 

     }; 

     $('#object').click(onClicked); 

     var scene =new THREE.Scene(); 
     var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); 

     var controls =new THREE.TrackballControls(camera); 
     controls.addEventListener('change',render); 
     var renderer = new THREE.WebGLRenderer({ alpha: true }); 

     renderer.setSize(window.innerWidth,window.innerHeight); 
     document.body.appendChild(renderer.domElement); 
     /*var material = new THREE.MeshLambertMaterial({color:'red'}); 
     var geometry=new THREE.CubeGeometry(100,100,100); 
     var cube=new THREE.Mesh(geometry,material); 
     scene.add(cube);*/ 

     camera.position.z=500; 
     var light = new THREE.AmbientLight(0x404040); 
     light.intensity = 0; 
     light.position.z=10; 
     light.position.y=10; // soft white light 
     scene.add(light); 



        // } 
     //init(); 

     /* var loader = new THREE.JSONLoader(); 
     loader.load('ring.json', function (geometry) { 
     var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial()); 

         mesh.position.x =500; 
         mesh.position.y =100; 
         mesh.position.z =500; 
     scene.add(mesh); 

     }); *//* 
     var loader = new THREE.ObjectLoader(); 
     loader.load("ring.json",function (obj) { 
      THREE.ImageUtils.crossOrigin = ''; 
     var texture = THREE.TextureLoader("images.jpg"); 
     //obj.map= texture; 
     obj.scale.set (10,10,10); 

     obj.traverse(function(child) { 
      if (child instanceof THREE.Mesh) { 
       child.geometry.computeVertexNormals(); 
       child.material.map=texture; 
      } 
     }); 
      scene.add(obj); 
     });*/ 
    var manager = new THREE.LoadingManager(); 
     manager.onProgress = function (item, loaded, total) { 
     console.log(item, loaded, total); 
     }; 
     var texture = new THREE.Texture(); 
     var loader = new THREE.ImageLoader(manager); 

     // You can set the texture properties in this function. 
     // The string has to be the path to your texture file. 
     loader.load('brick_bump.jpg', function (image) { 
     texture.image = image; 
     texture.needsUpdate = true; 
     // I wanted a nearest neighbour filtering for my low-poly character, 
     // so that every pixel is crips and sharp. You can delete this lines 
     // if have a larger texture and want a smooth linear filter. 
     // texture.magFilter = THREE.NearestFilter; 
     //texture.minFilter = THREE.NearestMipMapLinearFilter; 
     }); 

     var loader = new THREE.OBJLoader(manager); 
     /*var Mloader= new THREE.MTLLoader(manager); 
     Mloader.load('ring.mtl',function(object){ 
      object.traverse(function (child) { 
      if (child.material instanceof THREE.MeshPhongMaterial) { 
      child.material.map = texture; 
      } 
     }); 
      scene.add(object); 
     });*/ 
     // As soon as the OBJ has been loaded this function looks for a mesh 
     // inside the data and applies the texture to it. 
     loader.load('ring1.obj', function (event) { 
     var object = event; 
     /*for (var i = 0, l = object.children.length; i < l; i ++) { 

      object.children[ i ].material.map = texture; 

      console.log("rgr"+ object); 
      }*/ 

     object.traverse(function (child) { 
      if (child instanceof THREE.Mesh) { 
      child.material.map = texture; 
      console.log("rgr"+ object.children); 
      } 
     }); 

     // My initial model was too small, so I scaled it upwards. 
     object.scale = new THREE.Vector3(25, 25, 25); 

     // You can change the position of the object, so that it is not 
     // centered in the view and leaves some space for overlay text. 
     object.position.y -= 2.5; 
     scene.add(object); 
     }); 



     function render(){ 

      renderer.render(scene,camera); 
     } 

     function animate(){ 
      requestAnimationFrame(animate); 
      controls.update(); 
     } 

     animate(); 

     </script> 

</body> 
</html> 

cevap

0

Önce ring.obj dosyasını kontrol ederim. Ring.obj dosyasının tüm köşe noktalarında UV değerleri ile dışa aktarıldığını doğrulamanız gerekir. UV değerleri, dokudaki noktaları mesh üzerindeki belirli noktalara atar. Örneğin. Dokunun yüzeye nasıl serildiğini tanımlarlar.

THREE.js generate UV coordinate

Ama milage örgü yazar eğer değişebilir: Eğer kaliteye ring.obj ihracat süreci bunu temin kontrolünü yoksa, burada yük anda üreten Uvs hakkında yığınında bir görüşme oldu Belli doku çapaları vardı.

Bu sorun olmayabilir, ancak doku diğer kafesler için çalıştığından, halka örgüsü ile ilgili bir sorun olduğunu düşünürdüm.

+0

ama blender 3d modelleme uygulamasında açılım yapıyorum. Ben texture.I çemberi içe aktararak üç.js.texture ile düzlemde görünecek, ringe değil. Ringde bir sorun olduğunu düşünüyorum. tamir edebilirim efendim ??? – arunaDJ

+0

Bu noktada, cevaplayamadığım bir blender sorusu. Burada bir forum tartışması var http://blenderartists.org/forum/showthread.php?223482-Applying-a-UV-map-to-mesh – Radio