SketchUp -> Canvas

Question

I've been searching for a while for how to get a 3d model we built in SketchUp to be shown on a web page. I found three.js and saw that I could export it to a .dae and use the ColladaLoader to load it. Unfortunately I haven't been able to get anything to show up on my black canvas yet. (Using the latest three.js from the master branch, latest Chrome, latest OS X.)

Here's the gist of my code (inspired by http://jsfiddle.net/f17Lz5ux/):

  var camera, scene, renderer, my_model;

  init();

  function init() {
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    scene = new THREE.Scene();

    var loader = new ColladaLoader2();
    //var loader = new THREE.ColladaLoader();

    loader.load('3d-model.dae', function(result) {
      my_model = result.scene;
      scene.add(prequel);
      animate();
    });

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    jQuery("#canvas").append(renderer.domElement);
    //document.body.appendChild(renderer.domElement);
  }

  function animate() {
    requestAnimationFrame(animate);

    my_model.rotation.x += 0.01;
    my_model.rotation.y += 0.02;

    renderer.render(scene, camera);
  }

Here's what shows up in the console when using the ColladaLoader from the three.js repo:

https://s3.amazonaws.com/screenshots.equityeats.com/rh1zz.png (the dev tools freeze up so I couldn't copy/paste)

I searched the open issues for three.js and found https://github.com/rmx/threejs-collada, but that doesn't work either. Here's what shows up in the console when using that collada loader:

ColladaLoader2 WARNING: Skipped element <asset>/<contributor>. Element is legal, but not handled by this loader.
ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped element <asset>/<created>. Element is legal, but not handled by this loader.
ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped element <asset>/<modified>. Element is legal, but not handled by this loader.
8ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped unknown element <library_visual_scenes>/<visual_scene>/<node>/<node>/<node>/<instance_node>.
76ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped unknown element <library_visual_scenes>/<visual_scene>/<node>/<node>/<instance_node>.
1112ColladaLoader.js?body=1:7138 ColladaLoader2 ERROR: Geometry primitive type lines not supported.
ColladaLoader.js?body=1:7138 ColladaLoader2 WARNING: Skipped unknown element <library_nodes>.
ColladaLoader.js?body=1:6103 Uncaught TypeError: undefined is not a function

Any help/direction is much appreciated.

Answer 1

Have you considered uploading your model to the 3D warehouse and then use the Embed function to show it on your own web page?

It offers both a Thumbnail view and a 3D viewer with zoom, pan and rotate options.