将JSON模型导入Three.js - 没有任何显示

时间:2013-09-13 13:34:52

标签: json import three.js

我正在使用以下代码并且已经通过帖子和绝对所有的wiki等等。无论我使用什么.js JSON对象,浏览器窗口中都不会出现任何内容。浏览器控制台中没有标志,我准备在本地运行。缺少什么/做错了什么?

    

<body>

    <script src="http://threejs.org/build/three.js"></script>
    <script>

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

        var geometry;

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

        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

        loader = new THREE.JSONLoader();

        loader.load( "LeePerrySmith.js", function( geometry ) {

            mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
            mesh.scale.set( 10, 10, 10 );
            mesh.position.y = 0;
            mesh.position.x = 0;
            mesh.scale.set( 100, 100, 100 );
            scene.add( mesh );
            mesh.side = THREE.DoubleSide;
            alert("hit");

            } );


        camera.position.z = 5;

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

        render();

    </script>
</body>


新代码

<script src="http://threejs.org/build/three.js"></script>
<script>

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

    var geometry;

    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    var mesh = new THREE.Mesh( geometry, material );

    loader = new THREE.JSONLoader();

    loader.load( "LeePerrySmith.js", function( geometry ) {

        mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );
        mesh.scale.set( 10, 10, 10 );
        mesh.position.y = 0;
        mesh.position.x = 0;
        mesh.scale.set( 100, 100, 100 );
        scene.add( mesh );
        mesh.side = THREE.DoubleSide;
        alert("hit");
        render();

        } );


    camera.position.z = 1000;

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

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



</script>

1 个答案:

答案 0 :(得分:1)

加载是异步的。这就是为什么你有一个回调函数。您在模型加载前调用render()

  1. render()移动到回调函数的最后一行。或者做大多数用户所做的事情并添加动画循环。

  2. 将相机移回z = 1000.它可能在模型内。

  3. 您没有使用原始红色材料。这样做:`var mesh = new THREE.Mesh(geometry,material);

  4. sidematerial的属性,而不是mesh:设置mesh.material.side = THREE.DoubleSide,如果您认为有此需要。