Question

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

three.js：31844无法加载文件：/// 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>

谢谢

Answer 1

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

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

无法加载https://...test.dae：所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问原始“空”。

我添加了这个Chrome扩展名Allow-Control-Allow-Origin，此问题已解决。

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

无法在三个JS中加载错误

1 个答案: