Блог

Я создал веб-сайт 3D-модели для показа файлов JSON с three.js .

Это работает, если я открываю HTML-файл, локально хранящийся на моем компьютере. Но если я загружу все файлы на свой веб-сервер (apache2), ничего не отображается.

Я попытался запустить простой Three.js пример без загрузчика JSON, и это работает на моем веб-сервере.

Я также проверил пути к файлам JSON, и все они являются относительными путями. Я могу открыть каждый файл в браузере, если я введу имя или если я использую firebug, я могу просматривать все файлы.

Я проверил журнал ошибок Apache, но сообщение об ошибке не появилось.

В чем может быть проблема или как я могу узнать, в чем проблема?

Это часть моего сценария.

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

Я предполагаю, что ваши файлы не загружаются из-за используемого вами цикла for. Загрузка происходит асинхронно, поэтому каждый раз, когда вы вызываете loader.load, вы повреждаете состояние объекта из предыдущего вызова. Попробуйте создавать новый загрузчик на каждом шаге или придумайте другой способ загрузки нескольких файлов.