Three.js中的基本Collada加载

Question

Three.js中的基本Collada加载

javascriptthree.js

4

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

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

XHR输出显示已经加载了100%的.dae文件，我可以在浏览器中浏览存储文件的位置并查看其为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>

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

根据所提供的建议，这是第二个版本:

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);
}

- Kode

1

文件在 http://threejs.org/editor/ 中加载了吗？ - gaitat

它可以加载，就像“Monster”Collada 3D示例一样，但我需要一个更基本的加载示例。 - Kode

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gaitat · Accepted Answer

您正在遇到JavaScript的异步加载问题。当您调用renderer.render（）时，场景仍然为空，因为模型尚未下载完毕。请将您的代码放在一个init（）函数中，然后创建一个animate()函数，并按如下方式调用它们：

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

init();
animate();

变量scene、camera和renderer应该全局化。