Apache 上的 Three.js JSON 加载器答案

【问题标题】：Three.js JSON loader on apacheApache 上的 Three.js JSON 加载器
【发布时间】：2014-07-02 06:48:53
【问题描述】：

我创建了一个 3D 模型网站，用于显示带有 three.js 的 JSON 文件。

如果我打开本地存储在我的计算机上的 html 文件，这将起作用。但是，如果我将所有文件上传到我的网络服务器 (apache2)，则不会显示任何内容。

我尝试在没有 JSON 加载器的情况下运行一个简单的 Three.js 示例，这在我的网络服务器上运行。

我还检查了 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();
        }

【问题讨论】：

标签： json apache three.js

【解决方案1】：

我的猜测是您的文件没有被加载，因为您正在使用 for 循环。加载是异步的，因此每次调用 loader.load 时，都会破坏上一次调用的对象状态。尝试在每一步都创建新的加载器，或者想出不同的方式来加载多个文件。

【讨论】：