语法错误 JSONLoader答案

【问题标题】：Syntax Error JSONLoader语法错误 JSONLoader
【发布时间】：2013-03-07 23:29:56
【问题描述】：

我正在尝试将我的模型从 c4d 导入到 three.js。我知道有一个适合我的 OBJLoader。如果我想使用导出的波前 (.obj) 并使用 convert_obj_three.py 进行转换，它不会返回任何错误，并且 json 文件看起来很好。

但是如果我想在我的 three.js 脚本中加载生成的 .js 文件，它会返回：

Uncaught SyntaxError: Unexpected token ;

这是我尝试过的：

var loader2 = new THREE.JSONLoader();
loader2.load('assets/models/test.js', createScene);
function createScene(){
    mesh = new THREE.Mesh();
    scene.add(mesh);
}

test.js：http://www.file-upload.net/download-7296129/test.js.html

错误：http://www.file-upload.net/download-7296139/screenie.png.html

这是完整的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - loaders - OBJ loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: gray;
                color: #fff;
                margin: 0px;
                overflow: hidden;
            }
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;
            }
            #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
        </style>
    </head>

    <body>
        <div id="info">
        <a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader test
        </div>

        <script src="assets/three.min.js"></script>
        <script src="assets/OBJLoader.js"></script>

        <script src="assets/TrackballControls.js"></script>

        <script src="assets/Detector.js"></script>
        <script src="assets/stats.min.js"></script>

        <script>

            var container, stats;

            var camera, scene, controls, renderer;

            var mouseX = 0, mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;


            init();
            animate();


            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.z = 900;

                // controls

                controls = new THREE.TrackballControls( camera );

                controls.rotateSpeed = 5.0;
                controls.zoomSpeed = 5;
                controls.panSpeed = 2;

                controls.noZoom = false;
                controls.noPan = false;

                controls.staticMoving = true;
                controls.dynamicDampingFactor = 0.3;

                // scene

                scene = new THREE.Scene();

                var ambient = new THREE.AmbientLight( 0xfff3dd );
                scene.add( ambient );

                var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                directionalLight.position.set( 0, 0, 1 ).normalize();
                scene.add( directionalLight );

                // model

                var loader2 = new THREE.JSONLoader();
                loader2.load('assets/models/test.js', function (geometry, materials){

                    mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
                    scene.add(mesh);

                });

                renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                controls.handleResize();
                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );
                render();

            }

            function render() {

                controls.update();
                renderer.render( scene, camera );

            }

        </script>
    </body>
</html>

【问题讨论】：

请出示assets/models/test.js的内容
我认为您没有为我们提供足够的信息来解决您的问题。你能检查你的控制台并告诉我们语法错误发生在哪一行吗？这里没有什么特别突出的。
分享“test.js”的内容，可能有一些与“;”相关的语法错误。

标签： javascript json three.js

【解决方案1】：

加载json文件的函数：

THREE.JSONLoader.prototype.load = function ( url, callback, texturePath )



loader2.load('assets/models/test.js', function(geometry, materials){

   mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
   scene.add(mesh);

});

【讨论】：

我没有选择这个，因为这里有这个页面：github.com/mrdoob/three.js/issues/1476
讨论已经一年了。代码已更改。
好的，我已将代码更改为您的版本。仍然给出同样的错误。
Unexpected token error 和JSONLoader没有关系，但是看代码的时候很难说。我试过你的 json 并且它正在工作。
更改mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));