2016-04-14 2 views
1

Textur ist nicht in Ring 3D-Modell geladen. Aber es wird für einige andere Objekte funktionieren.Es gibt keine Kompilierfehler.Ich setze alle alle Lichtbedingungen korrekt.aber 3D-Modell Farbe ist grau/schwarz.Textur für andere Objekt korrekt geladen.3D Objekt Dateiformat ist. OBJ, ich habe nicht geladen MTL-Datei zu meinem Code. mtlobjloader ist nicht in threejs.org, es gibt eine Möglichkeit, die mtl-Datei zu laden und die Textur dem Objekt zuzuordnen. plz hilf mir.Textur wurde nicht in 3D-Objekt geladen (Mapping)

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> 

Antwort

0

Zuerst würde ich die ring.obj Datei überprüfen. Sie müssen überprüfen, ob die ring.obj-Datei mit UV-Werten für alle Scheitelpunkte exportiert wird. UV-Werte weisen Punkte auf der Textur bestimmten Punkten auf dem Mesh zu. Z.B. Sie definieren, wie die Textur über die Oberfläche drapiert wird. Wenn Sie die Kontrolle über den ring.obj Exportprozess gewährleistet nicht, es haben Qualität, gab es ein Gespräch auf dem Stapel zu erzeugen, UVs zur Ladezeit hier:

THREE.js generate UV coordinate

Aber Ihre milage wenn das Netzes Autor variieren kann hatte spezifische Texturanker.

Das mag nicht das Problem sein, aber da die Textur für andere Netze funktioniert, würde ich denken, dass es ein Problem mit dem Ringnetz gibt.

+0

aber ich öffne durch den Mischer 3D-Modellierung Anwendung.Ich kann die Textur ändern.Ich importiere den Ring mit der Ebene zu three.js.texture erscheint zu planen, nicht in Ring.Ich denke, ein Problem in Ring mesh.how kann ich es reparieren, Sir? – arunaDJ

+0

An dieser Stelle ist es eine Mixer-Frage, die ich nicht beantworten kann. Es gibt eine Diskussion im Forum http://blenderartists.org/forum/showthread.php?223482-Applying-a-UV-map-to-mesh – Radio

Verwandte Themen