Javascript 未能在三个JS中加载错误_Javascript_Html_Three.js

Javascript 未能在三个JS中加载错误

javascript html three.js

Javascript 未能在三个JS中加载错误,javascript,html,three.js,Javascript,Html,Three.js,我使用插件io_混合器将我的3d模型导出到JSON文件。但当我尝试加载html时，会显示下一个错误： three.js:31844未能加载file:///F:/xampp/htdocs/threejs/Rock1.json: 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https 读了很多可能的解决方案，但我不明白。有人说我需要将json文件放在服务器上。所以我从xampp复制了htdocs上的文件，但没有成功 <html> <head

我使用插件io_混合器将我的3d模型导出到JSON文件。但当我尝试加载html时，会显示下一个错误：

three.js:31844未能加载file:///F:/xampp/htdocs/threejs/Rock1.json: 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https

读了很多可能的解决方案，但我不明白。有人说我需要将json文件放在服务器上。所以我从xampp复制了htdocs上的文件，但没有成功

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/controls/OrbitControls.js"></script> 
        <script src="js/OBJLoader.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            controls =  new THREE.OrbitControls(camera, renderer.domElement);

            var obj;
            var loader = new THREE.JSONLoader();

            loader.load(
                'Rock1.json',
                function(g,m){
                    obj = new THREE.Mesh(g,m);
                    scene.add(obj);

                    obj.position = -6;
                    obj.rotation = 0.4;
                }
            );

            //create the model
            /*var geometry =  new THREE.BoxGeometry(1, 1, 1);

            //create material
            var material = new THREE.MeshBasicMaterial({color: 0xFFFFFF, wireframe: false});
            var cube = new THREE.Mesh(geometry, material);*/
            //scene.add (cube); 
            camera.position.z = 3;

            //game logic
            var update = function(){
                /*cube.rotation.x += 0.01;
                cube.rotation.y += 0.05;*/
            };

            //draw scene
            var render = function() {
                renderer.render(scene, camera);
            };

            //run game loop (update. render, repeat)
            var GameLoop = function(){
                requestAnimationFrame( GameLoop );
                update( );
                render( );
            };

            GameLoop();
        </script>
    </body>
</html>


我的前三个.js应用程序
正文{页边距：0；}
画布{宽度：100%；高度：100%}
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
var-obj；
var loader=new THREE.JSONLoader（）；
装载机(
“Rock1.json”，
函数（g，m）{
obj=新的三网格（g，m）；
场景。添加（obj）；
对象位置=-6；
obj旋转=0.4；
}
);
//创建模型
/*var geometry=新的3.BoxGeometry（1,1,1）；
//创造材料
var material=new THREE.MeshBasicMaterial（{color:0xFFFFFF，线框：false}）；
var cube=新的三个网格（几何体、材质）*/
//scene.add（立方体）；
摄像机位置z=3；
//博弈逻辑
var update=函数（）{
/*立方体旋转.x+=0.01；
立方体旋转y+=0.05*/
};
//画场景
var render=function（）{
渲染器。渲染（场景、摄影机）；
};
//运行游戏循环（更新、渲染、重复）
var GameLoop=函数（）{
requestAnimationFrame（GameLoop）；
更新（）；
render（）；
};
GameLoop（）；

谢谢

您需要将json文件上传到服务器上，基本上这就是解决方案

我遇到了相同的错误，找到了相同的可能解决方案，我将dae文件放在服务器上，但它没有按照您所说的那样工作，但在我的情况下，我遇到了不同的错误

加载失败：请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“null”

我添加了这个chrome扩展，问题就解决了

您的问题与json文件有关，但我相信此解决方案将非常有用。

您可以发布确切的错误吗？请阅读：three.js:31844未能加载file:///F:/xampp/htdocs/threejs/Rock1.json: 跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https。