Javascript jsonloader纹理未加载

我不是一个搅拌机专家（我得到了这个模型），我把它导出到JS，但是纹理没有显示出来。当我删除纹理文件时，浏览器会给出一个错误，即找不到“map.png”，因此它会加载，但不会显示它

代码在线：

但为了让事情变得简单：

html:

js:

json:

所以，你可以在我给出的链接中看到结果

---

谢谢你的帮助

在加载程序回调中，需要创建网格，如下所示：

mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );

您正在使用的库版本已经有将近一年的历史了。您最好更新到当前版本。所有的three.js include文件也必须与当前版本一致

---

three.js r.67

是的，它发出呜呜声！！非常感谢。（我也更新到了新版本，谢谢你的帮助！

body {
    background: #222;
    overflow:hidden;
}

    // Set up the scene, camera, and renderer as global variables.
    var scene, camera, renderer, container, controls;

    init();
    animate();

    // Sets up the scene. BASIC THREEJS
    function init() {

      // Detecteerd op webGL mogelijk is, zoniet, laad een link ofzo, dan zien we wel, doe ik later wel

      // Create the scene and set the scene size. BASIC THREEJS
      scene = new THREE.Scene();
      var WIDTH = window.innerWidth,
          HEIGHT = window.innerHeight;

        //ik wil da in ne div, om dat later dan in te laden in de supercode e
        container = document.createElement( 'div' );
        document.body.appendChild( container );

      // Create a renderer and add it to the container. BASIIIC
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(WIDTH, HEIGHT);
      renderer.domElement.style.position = "relative";
      container.appendChild(renderer.domElement);

      // Create the camera
      camera = new THREE.PerspectiveCamera(55, WIDTH / HEIGHT, 1, 40000);
      scene.add(camera);
      camera.position.set(0,50,2500);
      camera.lookAt(scene.position);

      // Create an event listener that resizes the renderer with the browser window
      window.addEventListener('resize', function() {
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
        renderer.setSize(WIDTH, HEIGHT);
        camera.aspect = WIDTH / HEIGHT;
        camera.updateProjectionMatrix();
      });

      // Set the background color of the scene.
      renderer.setClearColorHex(0x222222, 1);

      // Create a light, set its position, and add it to the scene.
      var light = new THREE.PointLight(0xffffff);
      light.position.set(-100,200,100);
      scene.add(light);

      // Load in the map and add it to the scene, materials problem!
      var loader = new THREE.JSONLoader();
      loader.load( "models/3dkaart.js", function(geometry, materials){
          //LambertMaterial is correct (zie json file), material is de default, dus ie neemt de texture nie?
        var material = new THREE.MeshLambertMaterial(material);
        mesh = new THREE.Mesh(geometry, material);
          //ik wil men opject wat opschuiven
        mesh.position.set(-1, 1, 2);
        scene.add(mesh);
      });


      // Add OrbitControls voor cameramovement
      controls = new THREE.OrbitControls(camera, renderer.domElement);

        } // END FUNCTION INIT


/* --------------------------------------------------- */



/* ----------------------------------------------------------- */

    // Renders the scene + updater 
    function animate() {

      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      controls.update();

    }

{

    "metadata" :
    {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.7 Exporter",
        "vertices"      : 3508,
        "faces"         : 3993,
        "normals"       : 2595,
        "colors"        : 0,
        "uvs"           : [1734],
        "materials"     : 7,
        "morphTargets"  : 0,
        "bones"         : 0
    },

    "scale" : 1.000000,

    "materials" : [ {
        "DbgColor" : 15658734,
        "DbgIndex" : 0,
        "DbgName" : "Material.002",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.10958866044266014, 0.1218598741570096, 0.06583377220978992],
        "colorDiffuse" : [0.10958866044266014, 0.1218598741570096, 0.06583377220978992],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [0.0, 0.0, 0.0],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 15597568,
        "DbgIndex" : 1,
        "DbgName" : "undefined_dummy_1",
        "vertexColors" : false
    },

    {
        "DbgColor" : 60928,
        "DbgIndex" : 2,
        "DbgName" : "Material.004",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.11392049959183481, 0.10457911647229068, 0.06844939691497975],
        "colorDiffuse" : [0.11392049959183481, 0.10457911647229068, 0.06844939691497975],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [0.0, 0.0, 0.0],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 238,
        "DbgIndex" : 3,
        "DbgName" : "Material.005",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.05598256075356245, 0.04765795540299944, 0.039384198775652024],
        "colorDiffuse" : [0.05598256075356245, 0.04765795540299944, 0.039384198775652024],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [0.0, 0.0, 0.0],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 15658496,
        "DbgIndex" : 4,
        "DbgName" : "undefined_dummy_4",
        "vertexColors" : false
    },

    {
        "DbgColor" : 61166,
        "DbgIndex" : 5,
        "DbgName" : "Material",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [0.0, 0.0, 0.0],
        "depthTest" : true,
        "depthWrite" : true,
        "mapDiffuse" : "map.png",
        "mapDiffuseWrap" : ["repeat", "repeat"],
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    },

    {
        "DbgColor" : 15597806,
        "DbgIndex" : 6,
        "DbgName" : "Material.006",
        "blending" : "NormalBlending",
        "colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
        "colorEmissive" : [0.0, 0.0, 0.0],
        "colorSpecular" : [1.0, 1.0, 1.0],
        "depthTest" : true,
        "depthWrite" : true,
        "shading" : "Lambert",
        "specularCoef" : 50,
        "transparency" : 1.0,
        "transparent" : false,
        "vertexColors" : false
    }],

    "vertices" : and then all the vertices below

mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );