3

I am trying export Blender models to threejs.org as DAE model but have problem with models with texture.

To make things simpler, here are the steps I perform (and fail) to add texture to simple "Startup file" which contains a cube, camera, and light:

  1. Select the cube
  2. In the Materials panel, make sure the default Material for the cube is selected.
  3. In the Texture panel, make sure "Tex" (the default texture for the material) is selected.
  4. For this texture, set Type to "Image or Movie"
  5. In the Image section of panel, open a grass1.jpg (a 512x512 image) as the texture.
  6. In the Mapping section, change the Coordinates to UV.
  7. Export the model as Collada model, checking "Include UV Textures", "Include Material Textures", and "Copy" checkboxes.

You can download blend, dae, and texture file mentioned in these steps.

Then I use the following code to load the DAE model, but I get this error and the cube is not shown:

256 [.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2 WebGL: too many errors, no more errors will be reported to the console for this context.

enter image description here

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/ColladaLoader.js"></script>
<script>
    var scene, camera, renderer;
    init();
    animate();

    function init() {
        scene = new THREE.Scene();
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(WIDTH, HEIGHT);
        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 10000);
        camera.position.set(10,10,10);
        scene.add(camera);

        window.addEventListener('resize', function() {
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;
            renderer.setSize(WIDTH, HEIGHT);
            camera.aspect = WIDTH / HEIGHT;
            camera.updateProjectionMatrix();
        });  

        var loader = new THREE.ColladaLoader();

        loader.load( 'models/untitled.dae', function(geometry) {
            dae = geometry.scene;
            scene.add(dae);
            var gridXZ = new THREE.GridHelper(100, 10);
            gridXZ.setColors( new THREE.Color(0x8f8f8f), new THREE.Color(0x8f8f8f) );
            gridXZ.position.set(0,0,0);
            scene.add(gridXZ);
        });

        controls = new THREE.OrbitControls(camera, renderer.domElement);
    }

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
      controls.update();
    }
</script>

And here is the screenshot of Blender after mentioned 7 steps:

enter image description here

Update: Exporting as js file using JSON exporter for Blender doesn't work either.

stacker
  • 38,549
  • 31
  • 141
  • 243
Isaac
  • 131
  • 1
  • 5
  • What formats does three.js accept? Have you tried exporting to a different format? – Justin Jul 20 '14 at 23:51
  • 1
    Also, you might try asking this question on either gamedev.stackexchange.com or stackoverflow.com. This isn't really a Blender question, but a three.js question. – Justin Jul 21 '14 at 05:01
  • http://solutiondesign.com/webgl-and-three-js-texture-mapping/ describes how to setup the uv map programmatically you could use this with http://blender.stackexchange.com/questions/6403/how-do-we-access-vert-norm-and-uv-data-then-print-to-a-text-file-using-blender – stacker Jul 21 '14 at 05:57
  • @Justin: I exported the model as a JSON file, got the exactly same error. And while I agree that this question is not directly about Blender, I thought people over here have more knowledge about the textures and decided to give it a try. – Isaac Jul 21 '14 at 06:40
  • @stacker: Thanks but I am trying to avoid modifying the model in the code and do all the model design inside Blender. – Isaac Jul 21 '14 at 06:44
  • 5
    This question appears to be off-topic because it is about an error with a three.js script. – David Jul 21 '14 at 13:52
  • @David: I thought this issue is caused by Blender during exporting the model. I've asked the question on gamedev too and remove this one if didn't get anywhere. – Isaac Jul 21 '14 at 14:10
  • It does not sound like a DAE export issue, but to check import the exported dae back in to blender. If it looks ok, then it probably is a problem with the three.js script. – David Jul 21 '14 at 14:53
  • I asked this question on SO (http://stackoverflow.com/questions/24866748) and the guys there suggested to "unwrap" my model to generate its UV coordinates. I guess this question can be closed here. – Isaac Jul 23 '14 at 18:21

0 Answers0