在 three.js 中使用二进制加载器加载对象不起作用答案

【问题标题】：Object loading with binary loader in three.js is not working在 three.js 中使用二进制加载器加载对象不起作用
【发布时间】：2015-03-20 19:09:06
【问题描述】：

我正在尝试修改three.js 示例的代码以加载在.js 中转换的.obj。它使用 BinaryLoader.js 来加载对象。该对象未显示在我修改后的代码中。到目前为止，我的代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>home</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 {
                background:#000;
                color:#fff;
                padding:0;
                margin:0;
                overflow:hidden;
                font-family:georgia;
                text-align:center;
            }

        </style>
    </head>

    <body>

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

        <script src="js/loaders/BinaryLoader.js"></script>

        <script src="js/Detector.js"></script>

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var CARS = {

                "Porsche":  {

                    name:   "Bugatti Veyron",
                    url:    "obj/car/Porsche_911_GT2.js",
                //  author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a>',
                    init_rotation: [ 0, 0, 0 ],
                    scale: 5.5,
                    //init_material: 4,
                    //body_materials: [ 2 ],

                    object: null,
                    buttons: null,
                    materials: null

                }


            };

            var container, stats;

            var camera, scene, renderer;

            init();
            animate();

            function init() {

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


            var loader = new THREE.BinaryLoader( true );
            document.body.appendChild( loader.statusDomElement );
                // CAMERAS

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );

                // SCENE

                scene = new THREE.Scene();

                    // LIGHTS

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

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.setFaceCulling( THREE.CullFaceNone );
                renderer.autoClear = false;

                container.appendChild( renderer.domElement );

                loader.load( CARS[ "Porsche" ].url, function( geometry ) { createScene( geometry, "Porsche" ) } );

            }

            function animate() {

            requestAnimationFrame( animate );

            render();

            }

            function render() {

                var timer = -0.0002 * Date.now();

                camera.position.x = 1000 * Math.cos( timer );
                camera.position.y += ( - mouseY - camera.position.y ) * .05;
                camera.position.z = 1000 * Math.sin( timer );

                camera.lookAt( scene.position );
                    renderer.render( scene, camera );


            }



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

有人知道这个问题吗？

【问题讨论】：

您能否提供一个链接以下载您的对象的 .js 文件？
抱歉，您能告诉我应该在哪里附加对象的 .js 文件吗？
嘿，这是我对象的 .js 文件的链接 dropbox.com/s/kt4ehcvwuh9gecq/Porsche_911_GT2.js?dl=0

标签： javascript json three.js

【解决方案1】：

您有一个 JSON 模型，因此您需要 JSONLoader 而不是 BinaryLoader，另一个问题是您的模型很小，因此您必须将其缩放 200 才能从初始化的相机中查看（fov=70） .我将使用以下代码：

var loader = new THREE.JSONLoader(true);

loader.load(CARS[ "Porsche" ].url, function (geometry)
{
    /*createScene( geometry, "Porsche" )*/
    var material = new THREE.MeshBasicMaterial({color: 0xff0000});
    var mesh = new THREE.Mesh(geometry, material);
    mesh.scale.set(200,200,200);
    scene.add(mesh);
});

更新：完整代码在这里

<!DOCTYPE html>
<html lang="en">
<head>
    <title>home</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 {
            background: #000;
            color: #fff;
            padding: 0;
            margin: 0;
            overflow: hidden;
            font-family: georgia;
            text-align: center;
        }

    </style>
</head>

<body>

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

<script src="js/loaders/BinaryLoader.js"></script>

<script src="js/Detector.js"></script>

<script>

    if (!Detector.webgl) {
        Detector.addGetWebGLMessage();
    }
    var mouseY = 0;
    var CARS = {

        "Porsche": {

            name: "Bugatti Veyron",
            url: "obj/car/Porsche_911_GT2.js",
            //  author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a>',
            init_rotation: [ 0, 0, 0 ],
            scale: 5.5,
            //init_material: 4,
            //body_materials: [ 2 ],

            object: null,
            buttons: null,
            materials: null

        }


    };

    var container, stats;

    var camera, scene, renderer;

    init();
    animate();

    function init()
    {

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

        var loader = new THREE.JSONLoader(true);
        document.body.appendChild(loader.statusDomElement);
        // CAMERAS

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100000);

        // SCENE

        scene = new THREE.Scene();

        // LIGHTS

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

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setFaceCulling(THREE.CullFaceNone);
        renderer.autoClear = false;

        loader.load(CARS[ "Porsche" ].url, function (geometry)
        {
            /*createScene( geometry, "Porsche" )*/
            var material = new THREE.MeshBasicMaterial({color: 0xff0000});
            var mesh = new THREE.Mesh(geometry, material);
            mesh.scale.set(200,200,200);
            scene.add(mesh);
        });

        container.appendChild(renderer.domElement);

    }

    function animate()
    {

        requestAnimationFrame(animate);

        render();

    }

    function render()
    {

        var timer = -0.0002 * Date.now();

        camera.position.x = 1000 * Math.cos(timer);
        camera.position.y += ( -mouseY - camera.position.y ) * .05;
        camera.position.z = 1000 * Math.sin(timer);

        camera.lookAt(scene.position);
        renderer.render(scene, camera);

    }


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

【讨论】：

嗨，米歇尔·科根，感谢您的回答。我已经修改了您建议的更改。但是仍然出现黑屏并且没有显示对象。我的对象的 .js 文件是否需要其他一些文件，我可能会丢失，这就是对象不显示的原因？
@kiran 我用经过测试的完整代码更新了我的答案，以防您遇到问题。
非常感谢 Michel Kogan 的帮助。它现在工作正常。