javascript Three.js 和 colladaloader
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15321971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js and colladaloader
提问by Sidebp
I am new to Three.JS and am trying to load a load a very simple (single cube) Sketchup model into Three.JS via the ColladaLoader, I get no errors but nothing is displayed:
我是 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);
Can anyone spot any immediate errors? Thanks
任何人都可以发现任何直接错误吗？谢谢
回答by Sidebp
Fixed. Whilst I had declared the renderer, I hadn't attached it to the document. The following code works:
固定的。虽然我已经声明了渲染器，但我没有将它附加到文档中。以下代码有效：
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();
回答by yaku
You need to rerender the scene after the collada is loaded. Something like
您需要在加载 collada 后重新渲染场景。就像是
loader.load('Test.dae', function (result) {
scene.add(result.scene);
renderer.render(scene,camera);
});
Additionally:
此外：
- The camera might be inside your geometry. Faces are one-sided by default, they are invisible when looking from back/inside. You could try changing the camera or object location and/or set material.side = THREE.DoubleSide so the faces are visible from both front and back.
- The scale of the model can be way off, so it can be too small or large to show. Try different camera positions (eg. z= -1000, -100, -10, -1, 1, 10, 100, 1000) and use lookAt() to point it to 0,0,0 or, I think colladaloader has a scale setting nowadays, not sure.
- Loader defaults to position 0,0,0, so center of the world/scene. That doesn't necessarily mean center of screen, depends on camera. In some cases the Collada model itself can be such that the center is away from visible objects, so when it's placed on the scene it can be effectively "off-center". That's quite unlikely though.
- You dont have any lights in the scene.
- 相机可能在您的几何体内部。默认情况下，人脸是一侧的，从背面/内部看时它们是不可见的。您可以尝试更改相机或对象位置和/或设置 material.side = THREE.DoubleSide，以便从正面和背面都可以看到面部。
- 模型的比例可能相差很远，因此它可能太小或太大而无法显示。尝试不同的相机位置（例如 z= -1000, -100, -10, -1, 1, 10, 100, 1000）并使用 lookAt() 将其指向 0,0,0 或者，我认为 colladaloader 有现在的比例设置，不确定。
- 加载器默认位置为 0,0,0，因此是世界/场景的中心。这并不一定意味着屏幕中心，取决于相机。在某些情况下，Collada 模型本身可以使中心远离可见对象，因此当它被放置在场景中时，它可以有效地“偏离中心”。不过这不太可能。
- 场景中没有任何灯光。
回答by Najam-us-Saqib
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);
I think you need to add the object in the collada scene, or there might be problem with the scaling of the object that you are adding, scale it and than update the matrix of the object.
我认为您需要在 collada 场景中添加对象，或者您正在添加的对象的缩放可能存在问题，缩放它而不是更新对象的矩阵。
回答by andrew pate
If your still having trouble it may be that some versions of IE stop you downloading local files (your Test.dae) so it may be worth trying it using firefox or putting your code up on a server.
如果您仍然遇到问题，则可能是某些版本的 IE 阻止您下载本地文件（您的 Test.dae），因此可能值得尝试使用 Firefox 或将您的代码放在服务器上。
