Question

纹理未加载到环3d模型中。但它适用于其他一些对象。没有编译错误。我正确设置了全部光照条件。但是3d模型颜色为灰色/黑色。其他纹理加载对象正确.3d目标文件格式是.obj，我没有加载mtl文件到我的代码。 mtlobjloader不在threejs.org中，有一些方法可以加载mtl文件并将纹理映射到对象。请帮助我。

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>

Answer 1

首先，我会检查ring.obj文件。您需要验证ring.obj文件是否正在导出所有顶点上的UV值。 UV值将纹理上的点指定给网格上的特定点。例如。它们定义了纹理如何覆盖在表面上。如果您无法控制ring.obj导出过程以保证质量，那么在堆栈上有关于在加载时生成UV的对话：

THREE.js generate UV coordinate

但是如果网格作者有特定的纹理锚点，你的milage可能会有所不同。

这可能不是问题，但由于纹理适用于其他网格，我认为环网存在问题。

纹理没有加载到3d对象（映射）

1 个答案: