Jump to content

Loading SketchUp exported Collada in three.js


jeebee
 Share

Recommended Posts

I'm trying to load a 3D scene I created with SketchUp (a Collada .dae file) and display it in a browser. It seems like three.js and SketchUp is a good way to achieve something like that.

 

Unfortunately, I fail to get textures to show up in three.js (I tried several textures at several different places, but I could not get any texture to show up).

The example provided on the three.js website (the monster) works fine. I did select 'export texture maps' when exporting from SketchUp.

 

I'm not sure if it's the exported model or my Javascript that needs to be fixed, or how to figure out what is wrong. I'm using the below Javascript.

 

Thanks, Jeebee.

// Set up the scene, camera, and renderer as global variables.var scene, camera, renderer;init();animate();// Sets up the scene.function init(){    // Create the scene and set the scene size.    scene = new THREE.Scene();    var WIDTH = window.innerWidth,        HEIGHT = window.innerHeight;    // Create a renderer and add it to the DOM.    renderer = new THREE.WebGLRenderer({antialias:true});    renderer.setSize(WIDTH, HEIGHT);    document.body.appendChild(renderer.domElement);    // Create a camera, zoom it out from the model a bit, and add it to the scene.    camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 1000);    camera.position.set(0, 50, 100);    scene.add(camera);    // Create an event listener that resizes the renderer with the browser window.    window.addEventListener('resize', function() {        var WIDTH = window.innerWidth,            HEIGHT = window.innerHeight;        renderer.setSize(WIDTH, HEIGHT);        camera.aspect = WIDTH / HEIGHT;        camera.updateProjectionMatrix();    });    // Create a light, set its position, and add it to the scene.    var light = new THREE.PointLight(0xffffff, 1, 0);    light.position.set(50,50,50);    scene.add(light);    var loader = new THREE.ColladaLoader();    loader.options.convertUpAxis = true;    loader.load('Test.dae', function (collada)     {        var dae = collada.scene;        dae.scale.set(1.0,1.0,1.0);        scene.add(dae);    });    var axes = new THREE.AxisHelper(50);    scene.add(axes);    // Add OrbitControls so that we can pan around with the mouse.    controls = new THREE.OrbitControls(camera, renderer.domElement);    controls.target = new THREE.Vector3(0, 0, -1);}// Renders the scene and updates the render as needed.function animate(){    requestAnimationFrame(animate);    renderer.render(scene, camera);    controls.update();}
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...