Model texture not rendering correctly in Three.js

I am trying to get a DAE model file to render in Three.js (location of model is here: http://tf3dm.com/3d-model/scotty-89815.html). When I try to render the model directly, Chrome locks up. When I import and export the model from Blender, the browser works but the textures are not appearing correctly in the model. I both exporting to DAE and JSON and the results are the same. As a side note, I exported all of the TGA texture files to PNG because Chrome wouldn’t display any of the textures otherwise.

I am using Blender 2.77 and Three.js r77. Below is the script that I am using on my web page:

var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load('Scotty/Scotty1.dae', function (collada)
{
    var dae = collada.scene;
    var skin = collada.skins[0];
    dae.position.set(0, 0, 0); //x,z,y- if you think in blender dimensions ;)
    dae.scale.set(.5, .5, .5);
    scene.add(dae);
});

// Load JSON file
var loader = new THREE.JSONLoader();
loader.load('Scotty/Scotty.json', function (geometry, materials)
{
    var mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

    mesh.scale.set(0.25, 0.25, 0.25);
    mesh.position = new THREE.Vector3(0, -1000000, 0);
    scene.add(mesh);
});
Three.js version
  • Dev
  • r77
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • Linux
  • Android
  • IOS
Hardware Requirements (graphics card, VR Device, …)

Appears to be hardware independent.

Author: Fantashit

1 thought on “Model texture not rendering correctly in Three.js

Comments are closed.