Search the Community

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();}