I am currently working with Three.js, specifically using version 71. For my models, I am utilizing Blender, version 2.73.
In my recent project, I have created a collada object (.dae file) in Blender that is textured, and now I want to import it into my three.js scene. However, I seem to be encountering issues as I can only load models without textures exported from Blender.
Here's the process of creating the textured collada object:
In Blender, I start by using the default cube and proceed to add a texture to it using the settings on the right. The texture applied to the cube is sized at 2048 X 2048, ensuring it's a power of 2.
To visually confirm the presence of the texture on the cube, here is an image of the cube in render mode:
The export settings used when exporting the cube as a collada from Blender are as follows:
Below is a snippet of code I tried to load the textured collada:
var loader = new THREE.ColladaLoader();
var localObject;
loader.options.convertUpAxis = true;
loader.load( './models/test_texture.dae', function ( collada ) {
localObject = collada.scene;
localObject.scale.x = localObject.scale.y = localObject.scale.z = 32;
localObject.updateMatrix();
game.scene.add(localObject);
} );
Upon attempting to load, I encountered the following error message:
[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2
Following this error, I researched and found a suggestion indicating the need to compute tangents. Here are my attempts along with the subsequent errors received:
var loader = new THREE.ColladaLoader();
var localObject;
loader.options.convertUpAxis = true;
loader.load( './models/test_texture.dae', function ( collada ) {
localObject = collada.scene;
localObject.scale.x = localObject.scale.y = localObject.scale.z = 32;
localObject.updateMatrix();
for (var i = collada.scene.children.length - 1; i >= 0; i--) {
var child = collada.scene.children[i];
// Attempted methods for computing tangents
// Error messages follow each attempt
};
game.scene.add(localObject);
} );
Error from ATTEMPT 1:
Uncaught TypeError: Cannot read property '0' of undefined
// Stack trace
three.js:9935 handleTriangle
three.js:9974 THREE.Geometry.computeTangents
myCode.js:116 (anonymous function)
ColladaLoader.js:204 parse
ColladaLoader.js:84 request.onreadystatechange
Error from ATTEMPT 2:
Uncaught TypeError: Cannot read property '0' of undefined
This error stemmed from trying to access a two-dimensional geometry structure which was not applicable.
Error from ATTEMPT 3: (same as ATTEMPT 1)
Uncaught TypeError: Cannot read property '0' of undefined
// Stack trace
three.js:9935 handleTriangle
three.js:9974 THREE.Geometry.computeTangents
myCode.js:116 (anonymous function)
ColladaLoader.js:204 parse
ColladaLoader.js:84 request.onreadystatechange