Three.js JSON loader on apache - json

Question

I have created a 3D model website for showing JSON files with three.js.
This is working if I open the html file locally stored on my computer.
But if I upload all files to my webserver (apache2) nothing is displayed.
I have tried to run a simple Three.js example without JSON loader and this is working on my webserver.
I also checked the paths to the JSON files and they are all relative paths I can open each file in the browser if I type the name or if I use firebug I can browse all files.
I checked the apache error log but no error message appears.
What can be the problem or how can I find out what the problem is?
This is my Script part.
var scene;
var camera;
var controls;
var geometryArray;
initializeScene();
animateScene();
function initializeScene(){
if(!Detector.webgl){
Detector.addGetWebGLMessage();
return;
}
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor(0x000000, 1);
canvasWidth = window.innerWidth;
canvasHeight = window.innerHeight;
renderer.setSize(canvasWidth, canvasHeight);
document.getElementById("WebGLCanvas").appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100);
camera.position.set(0, 0, 6);
camera.lookAt(scene.position);
scene.add(camera);
controls = new THREE.TrackballControls(camera, renderer.domElement);
axisSystem = new AxisSystem(camera, controls);
geometryArray = new Object();
var loader = new THREE.JSONLoader();
for(var i = 0; i < jsonFileNames.length; i++){
var layerName = jsonFileNames[i].split("/")[2].split(".")[0];
loader.load(layerName, jsonFileNames[i], function(geometry, materials, layerName){
mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({vertexColors: THREE.FaceColors, side:THREE.DoubleSide}));
mesh.scale.set(0.013, 0.013, 0.013);
scene.add(mesh);
geometryArray[layerName] = mesh;
}, layerName);
}
var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position = camera.position;
scene.add(directionalLight);
}
function animateScene(){
controls.update();
axisSystem.animate();
requestAnimationFrame(animateScene);
renderScene();
}
function renderScene(){
renderer.render(scene, camera);
axisSystem.render();
}

Answer 1

My guess is that your files are not being loaded because of the for loop you are using. Load is asynchronous, so each time you call loader.load, you corrupt object state from previous call. Try creating new loader in every step or come up with different way of loading multiple files.