时间戳

首页 > 解决方案 > 三个 JS 加载失败错误

javascript - 三个 JS 加载失败错误

问题描述

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

three.js:31844 加载文件失败：///F:/xampp/htdocs/threejs/Rock1.json：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、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>

谢谢

标签： javascripthtmlthree.js

解决方案

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

我有同样的错误，我找到了相同的可能解决方案，我把 dae 文件放在服务器上，但它没有像你说的那样工作，但在我的情况下，我得到了一个不同的错误

无法加载https://...test.dae：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'null' 不允许访问。

我添加了这个 chrome 扩展Allow-Control-Allow-Origin并解决了问题。

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

推荐阅读