Image based texture not getting rendered as expected on mesh loaded from blender

Question

With the following code are two cubes created using the same material. The first cubes geometry is created with new THREE.BoxGeometry() and the second cubes geometry is loaded from blender. The first one looks like expected by showing the texture loaded from the image and the second one looks like showing just one color from of the image (see result). What is the difference and how to set properly the material on the cube loaded from blender?

Thank you in advance!

test.js:

var scene, camera, renderer;

function init() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0xcccccc, 0.002);
    var light = new THREE.AmbientLight(0xffffff);
    scene.add(light);
    initObjects();
    camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(20, 20, 20);
    camera.lookAt(scene.position);
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
}

function initObjects() {
    var material_leather_brown = new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture('brown_leather.jpg')});
    scene.add(new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), material_leather_brown.clone()));
    var loader = new THREE.JSONLoader();
    loader.load('cube.json', function (geometry) {
        scene.add(new THREE.Mesh(geometry, material_leather_brown.clone()));});
}

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

init();
render();

cube.json:

{
    "metadata": {
        "type": "Geometry",
        "generator": "io_three",
        "uvs": 0,
        "faces": 6,
        "version": 3,
        "vertices": 8,
        "normals": 8
    },
    "uvs": [],
    "faces": [33,0,1,2,3,0,1,2,3,33,4,7,6,5,4,5,6,7,33,0,4,5,1,0,4,7,1,33,1,5,6,2,1,7,6,2,33,2,6,7,3,2,6,5,3,33,4,0,3,7,4,0,3,5],
    "normals": [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],
    "vertices": [1,0.000214,-6.19525,1,0.000214,-4.19525,-1,0.000214,-4.19525,-1,0.000214,-6.19525,1,2.00021,-6.19525,0.999999,2.00021,-4.19525,-1,2.00021,-4.19525,-1,2.00021,-6.19525],
    "name": "CubeGeometry"
}

test.html:

<!doctype html>
<html style="height: 100%;">
<head>
    <title>Test</title>
    <style>
        html, body {height: 100%;}
    </style>
</head>
<body>
    <script src="three.min.js"></script>
    <script src="test.js"></script>
</body>
</html>

brown_leather.jpg

MrFreeman555 MrFreeman555 · Accepted Answer · 2015-10-22T19:01:42

Material (texture) must be assigned to an object as UV map and export from blender is JSON file, so parametr "uvs" must be fill;

"uvs": [],

Check this example three.js r.73 in jsfiddle.

Make a practice with examples.

Image based texture not getting rendered as expected on mesh loaded from blender

1 Answers