JeelizFaceFilter и THREEJS выпускают с моделями gltf и текстуры - PullRequest
Новая
       113

JeelizFaceFilter и THREEJS выпускают с моделями gltf и текстуры

2 голосов
/ 13 октября 2019

Цель

Со вчерашнего дня я застрял с проблемой изменения примера JeelizFilterFace. Моя цель - создать свои собственные фильтры, поэтому я запустил учебник по шляпам Луффи, который объясняет, что: https://jeeliz.com/blog/creating-a-snapchat-like-filter-with-jeelizs-facefilter-api-part-1-creating-your-first-filter/

Краткое описание проблемы

Моя проблемапрост: у меня не может быть примера glTF, работающего с моделями glTF. Это всегда показывает мне черную форму, без текстуры.

Подробная информация о проблеме

В руководстве объясняется, что модель должна быть сгенерирована с помощью расширений экспортера Blender, чтобы создать файл json, который является моделью. Но экспортер Blender больше не поддерживается. Вот почему я пытаюсь использовать ThreeJS с загрузчиком GLTF (что является лучшим решением по всем учебникам). Моя проблема в том, что я не вижу текстуру ни на одной из моих моделей, когда загружаю ее с помощью JeelizFaceFilter / Threejs. У меня есть только черная форма.

Вот что я сделал:

  1. Сначала я прошел весь урок, чтобы убедиться, что могу запустить инструмент FilterFace, за исключением экспорта модели изБлендерная часть. Итак, я просто скопировал экспортированные ресурсы из репозитория Jeeliz. FilterFace работает хорошо: шляпа видимая, с текстурой, и я могу играть с параметрами THREEJS.
  2. Поскольку я не мог экспортировать JSON из blender, я хотел попробовать использовать модель GLTF 2.0, я попробовал эту модель, которая работает в инструменте gltf-viewer (см. Рисунок ниже): https://s3.eu -west-3.amazonaws.com / com.julianlecalvez / LuffysHat.zip

enter image description here

Пока все выглядит нормально, но когда я пытаюсь использовать этот пример загрузчика glTF в демонстрационных программах glTF (https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/gltf_fullScreen),, он отображает мою шляпу в черном цвете. У меня хорошая форма, но нет текстуры (или нет света)?). Я просто заменил URL модели в этом файле. И я даже не уверен, что модель по умолчанию (шлем) отображает какую-либо текстуру. Я попытался с моделью из SketchFab, и у меня естьто же самое: черная фигура, без текстуры.

Я поместил здесь код для инициализации представления, когда пытался повторить его вне демонстрационного файла: 

let init_view = function(spec) {
    const threeStuffs = THREE.JeelizHelper.init(spec, null);

    const SETTINGS = {
        gltfModelURL: 'objects/luffys_hat_gltf/luffys_hat.gltf',
        offsetYZ: [1,0], 
        scale: 2.2 
    };

    // const loader = new THREE.GLTFLoader();
    const gltfLoader = new THREE.GLTFLoader();
    gltfLoader.load( SETTINGS.gltfModelURL, function ( gltf ) {
        gltf.scene.frustumCulled = false;

        // center and scale the object:
        const bbox = new THREE.Box3().expandByObject(gltf.scene);

        // center the model:
        const centerBBox = bbox.getCenter(new THREE.Vector3());
        gltf.scene.position.add(centerBBox.multiplyScalar(-1));
        gltf.scene.position.add(new THREE.Vector3(0,SETTINGS.offsetYZ[0], SETTINGS.offsetYZ[1]));

        // scale the model according to its width:
        const sizeX = bbox.getSize(new THREE.Vector3()).x;
        gltf.scene.scale.multiplyScalar(SETTINGS.scale / sizeX);

        // dispatch the model:
        threeStuffs.faceObject.add(gltf.scene);
    });

    // CREATE THE CAMERA
    THREECAMERA = THREE.JeelizHelper.create_camera();
}
...