Three.js and colladaloader

Question

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:

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

Answer 1

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

Answer 2

You need to rerender the scene after the collada is loaded. Something like

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.

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

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.

Answer 4

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