Symbol 3D Layer

[KarimJedda]

Hi there @jscastro76, it has been a while, I hope you're doing great! :)

Is your feature request related to a problem? Please describe. I'd like to load a GeoJSON FeatureCollection of points and automatically place 3D models (instances) at each point.

Describe the solution you'd like I did some digging solution could be something in the vein of this: https://github.com/peterqliu/threebox/blob/master/docs/SymbolLayer3D.md. However after checking, this class/method seems not to be integrated in this version of threebox. Is there a way to get it included, or maybe a smarter way to achieve what I want?

Describe alternatives you've considered So far, I've been parsing the GeoJSON features on the frontend and using Threebox to simply add them one by one. However, this introduces a lot of repetition.

Additional context I'm not complaining, I'd just be very happy if this feature would be included in the library as it would make my life a bit easier. Or just knowing why it isn't integrated into this library would be great too. @peterqliu added the SymbolLayer3D changes into a separate branch that is behind the main one, maybe that's the reason, let me know if I should add it and submit a PR :)

Cheers!

[jscastro76]

I reviewed the code of SymbolLayer3D, and I think honestly, it misses the point on the flexibility that Threebox provides by itself, that’s why probably wasn’t ever merged into main. It was an effort to basically standardize the creation of a single layer similar to what Mapbox does, but the reality is that limits the options to customize it. In this layer you can only load a single 3D model, and does not applies to other 3D objects that are available in Threebox now.

Indeed, the only part that is really relevant (again, IMHO) is the way the do a lazy loading of the geojson file based on the sourcePath...

if(this.sourcePath) {
        // Load source and models
        const sourceLoader = new THREE.FileLoader();

        sourceLoader.load(this.sourcePath, data => {

            this.source = JSON.parse(data);
            // TODO: Handle invalid GeoJSON

            this._initialize();

        }, () => (null), error => {
            return console.error("Could not load SymbolLayer3D source file.")
        });
    }
    else {
        this._initialize();
    }

but for that they use THREE.FileLoader, which is not definitely the best file loader and then parses with JSON.parse, I personally have used in my projects d3 which is much better for multiple big files and has an specific single method for loading json files.

    d3.json('/Geojson/' + fl.file + '.json').then(function (featureCollection) {
        featureCollection.features.forEach(function (feature) {
        //then create the custom layer
        });
    });

Indeed I take advantage of the GeoJson properties open brownbag to create the attributes that I need to generate basically any 3D Object..

{
    "id": "key_",
    "geometry": {
        "coordinates": [
            [
                [
                    -12.13043,
                    4.645718
                ]
            ]
        ],
        "type": "Point"
    },
    "type": "Feature",
    "properties": {
        "name": "Name of the Object",
        "model": "/3D/models/model1.fbx",
        "modelType": "fbx",
        "base_height": 1,
        "height": 1,
        "userRotationZ": 90,
        "rotate": { "x": 90, "y": 0, "z": 0},
        "scale": {"x": 4, "y": 4, "z": 4},
        "camera": {
            "bearing": 0,
            "pitch": 30,
            "zoom": 3.15,
            "long": -12.13043,
            "lat": 4.645718
        },
        "zoomMin": 0,
        "zoomMax": 5.2,
        "anchor": "top",
        "wireframe": false
    }
}

As said, so far, I didn't find yet any advantage on implementing SymbolLayer3D for the current capabilities of Threebox.

[KarimJedda]

Understood, that actually makes perfect sense. Thank you for the explanation!