Javascript 使用three.js加载JSON模型-UncaughtTypeError_Javascript_Json_Three.js

Javascript 使用three.js加载JSON模型-UncaughtTypeError

javascript json three.js

Javascript 使用three.js加载JSON模型-UncaughtTypeError,javascript,json,three.js,Javascript,Json,Three.js,我正在尝试加载我使用three.js exporter插件在blender中创建的模型。然而，即使我改变了loading属性，我仍然是一个反复出现的错误，我想知道格式化它的正确方法 <html> <head> <title>three.js</title> <meta charset="utf-8"> <style> body { margin: 0;

我正在尝试加载我使用three.js exporter插件在blender中创建的模型。然而，即使我改变了loading属性，我仍然是一个反复出现的错误，我想知道格式化它的正确方法

<html>
    <head>
        <title>three.js</title>
        <meta charset="utf-8">
        <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
        </style>
     </head>
<body>
 <script src="js/three.min.js"></script>
 <script src="js/renderers/Projector.js"></script>
 <script src="js/renderers/CanvasRenderer.js"></script>

 <script>
 // Setup a new scene
 var scene = new THREE.Scene();

 // Setup the camera
 var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
 camera.position.z = 5;
 camera.position.y = 1;

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


 // Add the lights
 var ambientLight = new THREE.AmbientLight(0x111111);
 scene.add(ambientLight);

 var light = new THREE.PointLight( 0xFFFFDD );
 light.position.set( -15, 10, 15 );
 scene.add( light );

 // Models
 var model;
 var theaterModel;

 // instantiate a loader
 var loader = new THREE.JSONLoader();

 // load a resource
 loader.load(
    // resource URL
    'models/Theater-of-PalmyraNEW.json',
    // Function when resource is loaded
    function ( geometry, materials ) {
        var material = new THREE.MultiMaterial( materials );
        var object = new THREE.Mesh( geometry, material );
        scene.add( object );
    }
 );

 function render() {
         camera.position.x += ( mouseX - camera.position.x ) * .05;
         camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
         camera.lookAt( scene.position );
         renderer.render( scene, camera );
     }
 </script>
</body>
</html>


3.js
正文{页边距：0；}
画布{宽度：100%；高度：100%}
//设置新场景
var scene=new THREE.scene（）；
//设置相机
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=5；
摄像机位置y=1；
//设置渲染器
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//加灯
var环境光=新的三个环境光（0x111111）；
场景。添加（环境光）；
var灯=新的三点灯（0xFFFFDD）；
灯。位置。设置（-15，10，15）；
场景。添加（灯光）；
//模型
var模型；
var-theaterModel；
//实例化加载程序
var loader=new THREE.JSONLoader（）；
//加载资源
装载机(
//资源URL
“PalmyraNEW.json的模型/剧院”，
//加载资源时的函数
功能（几何、材料）{
var物料=新的三种。多物料（物料）；
var对象=新的三个网格（几何体、材质）；
场景。添加（对象）；
}
);
函数render（）{
camera.position.x+=（mouseX-camera.position.x）*.05；
camera.position.y+=（-mouseY+200-camera.position.y）*.05；
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
}

其中的错误为three.js文件和three.min.js文件中的未捕获类型错误

Uncaught TypeError: Cannot read property 'length' of undefined
    at three.min.js:658
    at Jd.parse (three.min.js:661)
    at three.min.js:657
    at XMLHttpRequest.<anonymous> (three.min.js:605)

Uncaught TypeError:无法读取未定义的属性'length'
三点。分钟js:658
在Jd.parse（three.min.js:661）
三点。分钟js:657
在XMLHttpRequest。（3.min.js:605）

这可能只是一个我没有看到的简单错误——我也看到其他人在这方面有问题