ThreeJS, текстура 3D-объекта не работает только онлайн

Я использую three.js для приложения AR, чтобы показать 3D-объект (экспортированный из Maya с помощью Maya Exporter в threejs) на маркере, обнаруженном с помощью JSARToolKit.

Все это отлично работает на локальном хосте (я вижу текстуру), но когда я загружаю его онлайн (github), я вижу, что объект предварительного просмотра выглядит черным без текстуры (например, если я удалю свет).

// load the model
var loader = new THREE.JSONLoader;
var object;
//var geometry = new THREE.BoxGeometry(1, 1, 1);
loader.load('js/object3d.js', function(geometry, materials){
var material = new THREE.MeshFaceMaterial(materials);
object = new THREE.Mesh(geometry, material);

container.add(object);
});

var ambLight = new THREE.AmbientLight( 0x909090, 2.0 );
container.add( ambLight );

Любые идеи?


json three.js 3d textures maya
person Vig    schedule 13.05.2016    source источник
comment
в хроме нажмите f12 и проверьте наличие ошибок в разделе консоли. если его нет, перейдите на вкладку «Сеть» и перезагрузите игру, чтобы увидеть, какие активы загружаются, а какие нет.   -  person Nika Kasradze    schedule 13.05.2016
comment
Ошибок в консоли нет. Все загружается.   -  person Vig    schedule 14.05.2016
comment
@Vig Можете ли вы опубликовать ссылку на свою демонстрацию?   -  person user01    schedule 14.05.2016

Ответы (1)


arrow_upward
2
arrow_downward

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

Метод загрузки JSONLoader принимает четыре аргумента (url, onLoad, onProgress, onError), как вы можете видеть здесь, в классе, в строке 40.

Попробуйте установить обработчик ошибок (метод обратного вызова onError) и посмотрите, что получится. Например:

var onload = function(geometry, materials){
    var material = new THREE.MeshFaceMaterial(materials);
    object = new THREE.Mesh(geometry, material);
    container.add(object);
});
var onProgress = function(){
    // your optional on progress logic
}
var onError = function(error){
    console.log( error );
}

var loader = new THREE.JSONLoader;
loader.load('js/object3d.js', onLoad, onProgress, onError);
person Wilt    schedule 16.05.2016
comment
Спасибо за предложение! На самом деле я получил эту ошибку в консоли: htmlpreview.github.io/:1 [.CommandBufferContext]GL ERROR :GL_INVALID_OPERATION : glGenerateMipmap: Can not generate mips ________________________________________________ (255)htmlpreview.github.io/:1 [.CommandBufferContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. ________________________________________________ htmlpreview.github.io/:1 WebGL: too many errors, no more errors will be reported to the console for this context. - person Vig; 17.05.2016
comment
@Vig сообщение об ошибке дает некоторые подсказки о том, что может быть причиной проблемы. Размер вашей текстуры равен степени 2 (например, 64x64, 128x128, 256x256 и т. д.). - person Wilt; 17.05.2016
comment
Да, это была не степень двойки, но сейчас я это исправил, реэкспортировал объект из майя, но все равно получаю те же ошибки в консоли. - person Vig; 17.05.2016
comment
Прочтите здесь: вы получаете эту ошибку, вероятно, потому, что текстура используется до загрузки. Кроме того, вам следует дождаться обратного вызова loadTexture перед использованием текстуры? - person Wilt; 17.05.2016
comment
@Vig Проверьте также этот ответ от WestLangley - person Wilt; 17.05.2016
comment
Почему это работает на локальном хосте? Текстура загружается на вкладке «Источники» в консоли Chrome. Мне интересно, может ли это быть проблемой github, но для доступа к веб-камере мне нужен https, и я не нашел ничего бесплатного. - person Vig; 17.05.2016
comment
@Vig Я не знаю, могу придумать несколько причин. Вы должны попытаться отладить и выяснить. Возможно, он так быстро загружается на локальном хосте, что изображение загружается до первого вызова рендеринга. В этом случае он работает так, как ожидалось. Вы можете имитировать медленное соединение на локальном хосте в Chrome. Узнайте здесь, как это сделать. Вы должны очистить кеш, потому что, если изображение все еще находится в кеше, оно также будет загружаться быстро. - person Wilt; 17.05.2016