Three.js 和 colladaloader答案

【问题标题】：Three.js and colladaloaderThree.js 和 colladaloader
【发布时间】：2013-02-25 15:34:20
【问题描述】：

我是 Three.JS 的新手，我正在尝试通过 ColladaLoader 将一个非常简单（单个立方体）的 Sketchup 模型加载到 Three.JS 中，我没有收到任何错误，但没有显示任何内容：

var renderer = new THREE.WebGLRenderer();
var loader = new THREE.ColladaLoader();
var scene = new THREE.Scene();
var camera = new THREE.Camera();
loader.load('Test.dae', function (result) {
  scene.add(result.scene);
});
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0, 0, 5);
scene.add(camera);
renderer.render(scene,camera);

谁能发现任何直接的错误？谢谢

【问题讨论】：

标签： javascript three.js

【解决方案1】：

已修复。虽然我已经声明了渲染器，但我没有将它附加到文档中。以下代码有效：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.set(0, 0, 4);
var loader = new THREE.ColladaLoader();
loader.load("test.dae", function (result) {
    scene.add(result.scene);
});

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

【讨论】：

【解决方案2】：

您需要在加载 collada 后重新渲染场景。类似的东西

loader.load('Test.dae', function (result) {
  scene.add(result.scene);
  renderer.render(scene,camera);
});

另外：

相机可能在您的几何体中。默认情况下，面是单面的，从背面/内部看时它们是不可见的。您可以尝试更改相机或对象位置和/或设置 material.side = THREE.DoubleSide 以便从正面和背面都可以看到面部。
模型的比例可能偏大，因此它可能太小或太大而无法显示。尝试不同的相机位置（例如 z= -1000, -100, -10, -1, 1, 10, 100, 1000）并使用 lookAt() 将其指向 0,0,0 或者，我认为 colladaloader 有现在的规模设置，不确定。
加载器默认位置为 0,0,0，即世界/场景的中心。这并不一定意味着屏幕中心，取决于相机。在某些情况下，Collada 模型本身可以使中心远离可见对象，因此当它被放置在场景中时，它可以有效地“偏离中心”。不过这不太可能。
场景中没有任何灯光。

【讨论】：

好点（忽略了异步加载）但是它仍然没有显示任何内容。我试过改变背景颜色无济于事。我需要指定渲染位置还是默认为屏幕中心？谢谢
我在原始答案中添加了一些回复。
感谢您的帮助 - 虽然它没有解决我的问题，但我在遵循您的建议时偶然发现了解决方案。

【解决方案3】：

    loader.load('test.dae', function colladaReady(collada) {

    localObject = collada.scene;

    localObject.scale.x = localObject.scale.y = localObject.scale.z = 2;
            localObject.updateMatrix();
scene.add(localObject);

我认为您需要在 collada 场景中添加对象，否则您添加的对象的缩放可能存在问题，缩放它然后更新对象的矩阵。

【讨论】：

【解决方案4】：

如果您仍然遇到问题，可能是某些版本的 IE 阻止您下载本地文件（您的 Test.dae），因此可能值得使用 firefox 或将您的代码放在服务器上进行尝试。

【讨论】：