CODEWITHSUNDEEP
jquery3dthree.jsrenderingcollada
Ashley Simpson Stock
Ashley Simpson Stock

Reputation: 73

ColladaLoader Three.js not rendering anything on the canvas

I'm currently working on a project, I can see that everything is loading as it should be and I have continuously read the Three.js documentation to see what's going wrong however nothing I have tried has worked.

From checking the console I can see that the Collada file has loaded fine, and the progress shows "100% Loaded".

I can see that the canvas itself has loaded and the colour of the canvas also.

I can also see the the canvas animation is working from adding in a console.log()

Please see the code below, and hopefully you guys can shed some light on my dark situation.

jQuery(window).load(function($){
var w = jQuery('.topSection .design').width();
var h = jQuery('.topSection .design').height();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, w/h, 1, 1000);
var renderer = new THREE.WebGLRenderer();
var loader = new THREE.ColladaLoader();
var box; 

function init() {
    loader.load('definition3D.dae', function (result) {
            scene.add(result.scene);
            camera.lookAt(scene.position);
        }, function (xhr) {
            console.log( Math.ceil(xhr.loaded / xhr.total * 100) + '% loaded' );
        }
    );

    renderer.setClearColor(0xdddddd);
    renderer.setSize(w, h);

    jQuery('.topSection .design').append(renderer.domElement);
    console.log(loader);
}

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

});

Thank you in advance

Upvotes: 0

Views: 420

Answers (1)

Davide Necchi
Davide Necchi

Reputation: 796

If you don't specify the camera position and your model have a center in 0,0,0 you have both element in the same position and if collada material is not doublesided you you may not see anything.

first try to move the camera far from the model second you can use the helper BoundingBoxHelper to see the real position of the mesh (or the scale).

var bbox = new THREE.BoundingBoxHelper( result.scene, 0xff0000);
   bbox.update();
scene.add( bbox );

So you can see if your model have a wrong center or a very small size.

Upvotes: 1

Related Questions