Невозможно загрузить текстурированную Collada, выгруженную из блендера, используя Three.js

Question

Я пользуюсь Three.js, версии 71. Я использую Blender, версии 2.73.

Я создал текстурированный объект collada (файл .dae) с помощью Blender, и теперь я хочу загрузить его в свою сцену three.js. До сих пор я могу загружать только те модели, которые экспортируются из блендера, у которых нет текстур.

Вот как я создаю текстурированный объект Collada:
В блендере, я просто использовать куб по умолчанию. Используя настройки справа, я добавляю текстуру в куб. Вот текстуры я ставлю на куб (Примечание: это 2048 X 2048, так что это сила 2):

Вот изображение куба в режиме визуализации, чтобы доказать, что текстура на это:

Вот настройки экспорта, которые я использовал, когда я экспортировал куб как COLLADA из Blender:

Вот некоторые код, который я использовал, чтобы попытаться загрузить текстурированной 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); 
}); 

Здесь ошибка я получил:

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2 

Я тогда гугле, что сообщение об ошибке, и кто-то сказал, что мне нужно вычислить касательные. Вот мои попытки, что и ошибки я получил:

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]; 

    // child.children[0] will give us the THREE.Mesh of the collada 
    if (child.colladaId == "Cube") { 

     // ATTEMPT 1: Just tried computing tangets based on answer from neoRiley here: http://stackoverflow.com/questions/21200386/webgl-gl-error-gl-invalid-operation-gldrawelements-attempt-to-access-out-of 
     // child.children[0].geometry.computeTangents(); 

     // ATTEMPT 2: Got this suggestion from Popov here: http://stackoverflow.com/questions/15717468/three-lod-and-normalmap-shader-fail 
     // child.children[0].geometry[ 0 ][ 0 ].computeTangents(); 
     // child.children[0].geometry[ 1 ][ 0 ].computeTangents(); 

     // ATTEMPT 3: Tried setting some update flags based on answer from Sayris here: http://stackoverflow.com/questions/13988615/webglrenderingcontext-error-loading-texture-maps 
     // child.children[0].geometry.buffersNeedUpdate = true; 
     // child.children[0].geometry.uvsNeedUpdate = true; 
     // child.children[0].material.needsUpdate = true; 
     // child.children[0].geometry.computeTangents(); 
    } 
    }; 
    game.scene.add(localObject); 
}); 

ПОПЫТКА 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 

ПОПЫТКА 2 ОШИБКА:

Uncaught TypeError: Cannot read property '0' of undefined 

Это произошло из собственного кода , Я не думал, что геометрия THREE.Mesh двумерна, но я все равно попробовал.

ПОПЫТКА 3 ОШИБКА: (так же, как ПОПЫТКА 1 ERROR)

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 

Answer 1

Я решил использовать JSON погрузчик вместо потому что я не мог получить Collada один работать. Первое, что я сделал, это установить аддон JSON-экспортера в Blender. Я получил аддон из .zip-файла из моей загрузки three.js. Это в three.js-r71/utils/экспортеры/блендер/аддоны и его называют io_three. Вам просто нужно скопировать эту папку и вставить ее в каталог установки Blender в Blender Foundation/Blender/2.73/scripts/addons.

Затем вы должны включить его в Blender.Для этого:

1. Нажмите на Файл-> Настройки пользователя ...
2. Нажмите Дополнения
3. Тип три в поле поиска
4. Весь путь к установите флажок, чтобы включить его.
5. В левом нижнем углу нажмите Сохраните настройки пользователя, поэтому вам не нужно это делать повторно. Вы будете знать, что он работает, если вы видите Three.js (.json) при нажатии Файл-> Экспорт.

Я последовал за большинство инструкций с этого сайта, чтобы помочь мне создать и экспортировать модель: http://graphic-sim.com/B_basic_export.html

Вот шаги, которые я использовал для создания и экспорта модели (я переделаны их немного от сайт)

1. Запуск блендера.
2. Посмотрите на редактор свойств (справа).
3. Пресс-центр Всемирный Контекстная кнопка. В панели World нажмите Окружающий цвет и измените его с черного на средний серый.
4. Нажмите Материал Контекстная кнопка. На Diffuse изменение панели Интенсивность до 1.0. Сделайте то же самое на панели Specular. В Затенение панель положила чек в Shadeless коробка.
5. Нажмите Текстуры Контекстная кнопка. В верхней части в Тип выпадающий список, выберите Изображение или фильм. В панели Image перейдите к своему изображению (убедитесь, что размеры изображения имеют мощность 2).
6. Выберите УФ-редакция Раскладка экрана (выпадающее меню справа от меню справки вверху).
7. С указателем мыши в 3D-редакторе перейдите в режим редактирования (клавиша Tab).
8. Unwrap (нажмите ключ U). Выберите Умный УФ-проект. Нажмите OK, чтобы принять значения по умолчанию.
9. На экране UV редактирование, выберите изображение с помощью меню в левом нижнем углу (см скриншот)
10. Выберите Изображение-> Сохранить как изображение. Это изображение должно быть рядом с вашим файлом JSON, который вы будете экспортировать.
11. Нажмите Файл-> Экспорт-> Три.js (.json).
12. Слева выберите еще несколько параметров экспорта (см. Снимок экрана для тех, которые я использовал, которые я нашел методом проб и ошибок). Я думаю, что я только добавил Материалы для лица, Материалы и Текстуры. Затем вы можете нажать Сохранить настройки, чтобы сохранить эти настройки.
13. Поместите свой файл JSON и файл изображения, сохраненные ранее в папке проекта.

14. Используйте следующий код, чтобы загрузить его:

    var object; 
    var loader = new THREE.JSONLoader();   
    loader.load("./models/test_texture.json", function(geometry, materials) { 
        object = new THREE.Mesh(geometry, materials[0]); 
        object.scale.set(32, 32, 32); 
        game.scene.add(object); 
    });