CODEWITHSUNDEEP
javascriptthree.js
user3634184
user3634184

Reputation: 466

jsonloader texture not loading

I'm not a blender expert (I got this model), and I exported it to JS, but the texture isn't showing. When I remove the texture file, the browser gives an error that the 'map.png' isn't found, so it loads, but it doesn't show it.

The code is online: http://bensjitestsite.site50.net

but to make it easy:

html:

<!doctype html>
<html lang="en">
<head>
  <title>Map Prolab</title>
  <meta charset="utf-8">
</head>
<body style="margin: 0;">

  <link rel="stylesheet" href="app.css" type="text/css" />

      <!-- JQUERY CDN FIRST OTHERWISE LOCAL FALLBACK -->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.3.min.js"></script>
    <script>window.jQuery || document.write('<script src="jquery-2.0.3.min.js">\x3C/script>')</script>

  <script src="js/three.min.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script src='js/CSS3DRenderer.js'></script>
  <script src="app.js"></script>
  <script src="addmarkers.js"></script>
  <script src="js/ColladaLoader.js"></script>


</body>
</html>

css:

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

js:

    // 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();

    }

json:

{

    "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

So, you can see the result in the link I gave.

Thank you for your help!

Upvotes: 0

Views: 202

Answers (1)

WestLangley
WestLangley

Reputation: 104783

In your loader callback, you need to create the mesh like so:

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

You are using a version of the library that is almost a year old. You would be wise to update to the current version. All your three.js include files must be consistent with the current version, too.

three.js r.67

Upvotes: 1

Related Questions