Three.js 中的基本 Collada 加载

Question

我正在尝试使用 three.js 和 collada 加载程序加载 collada 文件。我正在利用three.js 文档，但似乎无法让文件在屏幕上呈现。我想要实现的是一个非常基本的 collada 文件导入场景，不需要动画。我收到的错误如下：

未处理的 Surface 属性：format_hint
无法转换类型为lookat的Transform

XHR 输出显示 .dae 文件的 100% 负载，我可以在浏览器中浏览到存储文件的位置并将其查看为 XML。我目前在 IIS 中将 mime 类型设置为 application/xml。

这是我当前的代码。我错过了什么？：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - loaders - collada loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="scripts/three.min.js"></script>
    <script src="scripts/ColladaLoader.js"></script>
    <script src="scripts/jquery-2.1.4.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
    <h1>Box Example</h1>
    <p>This example loads an collada file</p>

    <div id="webGL-container"></div>

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

        renderer.setClearColor(0xff0000);
        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.position.x = 40;
        camera.position.y = 40;
        camera.position.z = 40;

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

        loader.load(
            // resource URL
            'models/box.dae',

            // Function when resource is loaded
            function (collada) {
                scene.add(collada.scene);
            },
            // Function called when download progresses
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            }
        );

        camera.lookAt(scene.position);

        renderer.render(scene, camera);
        $("#webGL-container").append(renderer.domElement);
    </script>
</body>
</html>

根据提供的建议，这是第 2 版：

    var scene;;
    var camera;
    var renderer;
    var loader;

    function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();


    renderer.setClearColor();
    renderer.setSize(window.innerWidth, window.innerHeight);

    camera.position.x = 40;
    camera.position.y = 40;
    camera.position.z = 40;

    // instantiate a loader
    loader = new THREE.ColladaLoader();


        loader.load(
            // resource URL
            'models/box.dae',

            // Function when resource is loaded
            function (collada) {
                scene.add(collada.scene);
            },
            // Function called when download progresses
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            }
        );

        camera.lookAt(scene.position);
        $("#webGL-container").append(renderer.domElement);

    };



    function animate() {
        requestAnimationFrame(animate);

        renderer.render(scene, camera);
    }

    init();
    animate();

更新 3：我已经能够获取要渲染的核心 .DAE 文件，但它缺少纹理（当前将框显示为全黑）：

    var scene;
    var camera;
    var renderer;
    var box;

    // instantiate a loader
    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load('models//box.dae', function (collada) {

        box = collada.scene;

        box.traverse(function (child) {

            if (child instanceof THREE.SkinnedMesh) {

                var animation = new THREE.Animation(child, child.geometry.animation);
                animation.play();

            }
        });

        box.scale.x = box.scale.y = box.scale.z = .2;
        box.updateMatrix();

        init();
        animate();
    });


    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(0xdddddd);
        renderer.setSize(window.innerWidth, window.innerHeight);

        scene.add(box);

        camera.position.x = 40;
        camera.position.y = 40;
        camera.position.z = 40;

        camera.lookAt(scene.position);
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        $("#webGL-container").append(renderer.domElement);
    }

Answer 1

您遇到了 javascript 的异步加载。当您致电renderer.render() 时，您的场景仍然是空的，因为模型尚未下载。将您拥有的代码放入 init() 函数中，然后创建一个 animate() 函数并这样调用它们：

function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

init();
animate();

变量 scene、camera、renderer 你应该设为全局变量。