将 JSON 模型导入 Three.js - 没有显示答案

【问题标题】：Importing a JSON model into Three.js - Nothing showing将 JSON 模型导入 Three.js - 没有显示
【发布时间】：2013-09-14 04:24:07
【问题描述】：

我正在使用以下代码，并且已经浏览了帖子，当然还有所有的 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>

【问题讨论】：

标签： json import three.js

【解决方案1】：

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

将render() 移动到回调函数的最后一行。或者做大多数用户做的事情并添加一个动画循环。
将相机移回 z = 1000。它可能在模型内部。
您没有使用原始的红色材料。这样做：`var mesh = new THREE.Mesh(geometry, material);
side 是material 的属性，而不是mesh：设置mesh.material.side = THREE.DoubleSide，如果你觉得需要的话。

【讨论】：

我已经包含了您的建议，但仍然只有警报。已发布修改代码。
你没有执行我的第一条指令。
还是什么都没有。我相信我已经正确地实现了所有三个，但是没有动画循环（我真的不想动画这个）。
您的代码对我有用。确保模型与库的当前版本一致。请记住，让您的代码正常工作是您的责任，而不是我的。弄清楚后，请记住通过单击复选标记来接受此答案。第 1 点对其他人非常有帮助。
@gustable 摆脱装载机外部的网格和材料。然后在你有new THREE.MeshBasicMaterial()的加载器中给它一个颜色new THREE.MeshBasicMaterial({color: 0x00ff00})。你的代码现在大部分都很好，我认为它只是一个白色背景上的白色模型:)