Putting Collada file into HTML so it can be viewed on browser

Questions
,
1

Hi
I am trying to get a colada file in my HTML code to appear on my web browser but error message always appears rather than the collada image of a park.

I have attached my code which includes Three.js loader. Would really appreciate if someone could tell me how to improve code so image appears on the web browser.

function o(){
    var loader = new  THREE.ColladaLoader();
    scene = new THREE.Scene();
    loader.options.convertUpAxis = true;
    loader.load('quad.dae', function (collada){
        dae = Quad.dae;
        dae.scale.x = dae.scale.y = dae.scale.z = 3;
        //dae.updateMatrix();
        scene.add(quad.dae);
        //console.log(scene);
    }); 
    loader.load('quad.dae', function (collada){
        dae1 = collada.scene;
        dae1.scale.x = dae1.scale.y = dae1.scale.z = 3;
        //dae1.updateMatrix();
        //scene.add(dae1);
        //console.log(scene);
    }); 

    init();
    animate();

}
o();
function init(){
    /*creates empty scene object and renderer*/
    camera =  new THREE.PerspectiveCamera(45, 600/400, .1, 500);
    renderer = new THREE.WebGLRenderer({antialias:true});

    renderer.setClearColor(0x000000);
    renderer.setSize(600, 400);
    renderer.shadowMapEnabled= true;
    renderer.shadowMapSoft = true;

    /*add controls*/

    camera.position.x = 5;
    camera.position.y = 9;
    camera.position.z = 42; 
    camera.lookAt(scene.position);

    /*datGUI controls object*/
    guiControls = new function(){
        this.rotationX  = 0.0;
        this.rotationY  = 0.0;
        this.rotationZ  = 0.0;

        this.lightX = 19;
        this.lightY = 47;
        this.lightZ = 19;
        this.intensity = 2.5;       
        this.distance = 373;
        this.angle = 1.6;
        this.exponent = 38;
        this.shadowCameraNear = 34;
        this.shadowCameraFar = 2635;
        this.shadowCameraFov = 68;
        this.shadowCameraVisible=false;
        this.shadowMapWidth=512;
        this.shadowMapHeight=512;
        this.shadowBias=0.00;
        this.shadowDarkness=0.11;       

    }
    /*adds spot light with starting parameters*/
    spotLight = new THREE.SpotLight(0xffffff);
    spotLight.castShadow = true;
    spotLight.position.set (20, 35, 40);
    spotLight.intensity = guiControls.intensity;        
    spotLight.distance = guiControls.distance;
    spotLight.angle = guiControls.angle;
    spotLight.exponent = guiControls.exponent;
    spotLight.shadowCameraNear = guiControls.shadowCameraNear;
    spotLight.shadowCameraFar = guiControls.shadowCameraFar;
    spotLight.shadowCameraFov = guiControls.shadowCameraFov;
    spotLight.shadowCameraVisible = guiControls.shadowCameraVisible;
    spotLight.shadowBias = guiControls.shadowBias;
    spotLight.shadowDarkness = guiControls.shadowDarkness;
    scene.add(spotLight);

    /*adds controls to scene*/
2

Can you please share the error message and the DAE file in this thread?

3

Quad.dae (1.9 MB)

Here is my dae file and here is screenshot of error message

44

4

It seems the issue is not related to Collada. The 404 error indicates that your HTML file was not found under the given URL. You have to ensure to properly place your HTML, CSS and JavaScript files on a web server and use the correct URL.

BTW: It seems the three.js editor is able to load your DAE file. It internally uses ColladaLoader, too.

image

5

Ah ok I understand, I just tried that there and was able to get it running, thanks very much! Oh cool never realised my DAE file could use ColladaLoader as well