I've been trying to figure out how to display a 3D model created in SketchUp on a web page. After discovering three.js and exporting the model to a .dae file for use with ColladaLoader, I still can't get it to appear on my canvas. (I'm using the latest versions of three.js, Chrome, and OS X.)
Below is an overview of my code (based on 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();
loader.load('3d-model.dae', function(result) {
my_model = result.scene;
scene.add(my_model);
animate();
});
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
jQuery("#canvas").append(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
my_model.rotation.x += 0.01;
my_model.rotation.y += 0.02;
renderer.render(scene, camera);
}
When using the ColladaLoader from the three.js repository, here's what appears in the console:
(unable to copy/paste due to dev tools freezing)
After searching through open issues on three.js, I came across https://github.com/rmx/threejs-collada, but that also didn't solve the issue. Here's the console output when using that collada loader:
ColladaLoader2 WARNING: Skipped elements like <asset>/<contributor>, <asset>/<created>, etc.
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 guidance or assistance would be greatly appreciated.