Two cubes are created with the following code using the same material. The first cube's geometry is generated with new THREE.BoxGeometry(), while the second cube's geometry is imported from Blender. The first cube displays the expected texture loaded from an image, whereas the second cube appears to show only one color from the image (see result). What is causing this difference and how can the material on the cube loaded from Blender be properly set?
Any help would be appreciated!
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>