Question

我创建了一个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();
        }

Answer 1

我的猜测是，由于您正在使用 for 循环，因此未加载您的文件。加载是异步的，因此每次调用 loader.load 时，都会损坏之前调用的对象状态。尝试在每个步骤中创建新的加载器，或者提出加载多个文件的不同方式。

Apache上的Three.js JSON加载程序

1 个答案: