3

Goal

I'm stuck since yesterday with an issue on modifying a JeelizFilterFace example. My goal is to create my own filters, so I started the the luffy's hat tutorial, which explains that : https://jeeliz.com/blog/creating-a-snapchat-like-filter-with-jeelizs-facefilter-api-part-1-creating-your-first-filter/

Quick description of the problem

My problem is simple : I can't have the glTF example working with glTF models. It always show me a black shape, without the texture.

Details of the problem

The tutorial explains that the model have to be generated with a Blender exporter addons, in order to create the json file which is the model. But the Blender exporter is not supported anymore. This is why I try to use ThreeJS with the GLTF loader (which is the best solution according to all the tutorials). My problem is that I can't see any texture on any of my models, when I load it with JeelizFaceFilter/Threejs. I only have the black shape.

Here is what I did :

  1. First, I did all the tutorial to be sure I can run the FilterFace tool, except for the exporting model from Blender part. So, I just copied the exported resources from the Jeeliz repo. The FilterFace works well : the hat is visible, with the texture and I can play with the THREEJS params.
  2. Because I couldn't export the JSON from blender, i wanted to try to use the GLTF 2.0 model, I tried this model, which is working in the gltf-viewer tool (see picture below) : https://s3.eu-west-3.amazonaws.com/com.julianlecalvez/LuffysHat.zip

enter image description here

  1. So far everything seems ok, but when I try to use this glTF loader example in the glTF demos (https://github.com/jeeliz/jeelizFaceFilter/tree/master/demos/threejs/gltf_fullScreen), it displays my hat in black. I have the good shape, but no texture (or no light?). I just replaced the model URL in this file. And I'm not even sure that the default model (the helmet) is displaying any texture.
  2. I tried with a model from SketchFab, and I have the same : Black shape, no texture.

I put here the code to init the view, when I was trying to redo it outside of the demo file :

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();
}
Julian Le Calvez
  • 453
  • 7
  • 27
  • I also tried to download a glTF model from SketchFab. I have the same no texture problem. I tried this one : https://sketchfab.com/3d-models/mustache-e710efe4757c49089760d9a84d32fd7e – Julian Le Calvez Oct 15 '19 at 08:55
  • 1
    Have you tried exporting the texture separately from Blender, and then using `THREE.TextureLoader()` to assign it to the `material.map` property? – M - Oct 17 '19 at 02:02
  • Thank a lot you for your answer. I helped me to progress. I tried it and it worked when I load it with a MeshBasicMaterial. Then i figured out that the problem with the hat was the light, because if I add a simple THREE.AmbientLight(0xffffff, 0.8) to the scene, it works without forcing the THREE.TextureLoader(). But this works only for the luffy's hat example :( If the texture in the glTF model is not a image, I can't make it work... – Julian Le Calvez Oct 22 '19 at 09:48

0 Answers0