Node ES6 / React example

[KarimJedda]

Hi jscastro76 and happy new year,

Is there a way to add an example using node ES6 to the examples folder?

I am currently using Svelte to build the app I am working on and somehow I can't get the same example from here https://github.com/jscastro76/threebox/blob/master/examples/06-object3d.html to work. I copied all the code into my component like this:

import { Threebox } from 'threebox-plugin';
[...]
    mapRef = new mapboxgl.Map({
        container: 'map',
        style: '../data/osm-liberty.json',
        attributionControl: true,
        hash: true,
        center: [11.4017, 48.7771, ],
        zoom: 14,
        pitch: 60, // pitch in degrees
        bearing: -60, // bearing in degrees
    });
[..]
    window.tb = new Threebox(
        mapRef,
			mapRef.getCanvas().getContext('webgl'),
			{
				defaultLights: true,
			}
        );
    tb = window.tb

mapRef.on('load', function() {
 [...]

     mapRef.addLayer({
            id: 'custom_layer',
            type: 'custom',
            renderingMode: '3d',
            onAdd: function (map, mbxContext) {

                // import soldier from an external glb file, scaling up its size 20x
                // IMPORTANT: .glb is not a standard MIME TYPE, you'll have to add it to your web server config,
                // otherwise you'll receive a 404 error
                var options = {
                    obj: 'models/soldier.glb',
                    type: 'gltf',
                    scale: 1000,
                    units: 'meters',
                    rotation: { x: 90, y: 0, z: 0 }, //default rotation
                    anchor: 'center'
                }

                tb.loadObj(options, function (model) {
                    let soldier = model.setCoords(origin);
                    tb.add(soldier);
                })

            },

            render: function (gl, matrix) {
                tb.update();
            }
        });
}

And when running it I get:

Uncaught (in promise) TypeError: can't access property "loaded", this is undefined

So I must be doing something wrong I just don't know what it is. Of course the 'models/soldier.glb' file is in the right folder and reachable.

Would be great, I am blocked with this since last night :'D

[jscastro76]

Only with this I have no idea what is going wrong, if I’m not wrong I have not used any property called loaded. It seems loaded is a Mapbox property.

Do you have a GitHub repo to check it out? Are you able to debug it in runtime to know where it breaks? Is your style osm-liberty.json loading properly? Does the map load without the custom layer?

[KarimJedda]

It was referring to this piece of code here:

https://github.com/jscastro76/threebox/blob/master/src/objects/loadObj.js#L22

When replacing "this" with "self" it solved that error but another issue popped up.

But I managed to solve the problem. Instead of
import { Threebox } from 'threebox-plugin';
I had to do
import '../node_modules/threebox-plugin/dist/threebox' and it worked.

I do not understand why since they should be exactly the same. But again, I am by no measure an expert at Svelte or npm so maybe I am doing it wrong.
In any case, here is a repository with the working example in Svelte https://github.com/KarimJedda/threebox-mapboxgl-svelte-example, is how I use it correct?

Thanks a lot!

[KarimJedda]

And to answer your questions:

Is your style osm-liberty.json loading properly? Yes, it is actually the same I am using with the vanilla-js implementation.
Does the map load without the custom layer? Yes the map loads without the custom layer.

[jscastro76]

It was referring to this piece of code here:

https://github.com/jscastro76/threebox/blob/master/src/objects/loadObj.js#L22

When replacing "this" with "self" it solved that error but another issue popped up.

That's old code from the original version, not used anymore, indeed the const modelComplete is not anymore referenced anywhere. It would be better to remove it so you'll be able to reference the module with your original syntax.
Thanks for the clue.

[jscastro76]

TODO: remove this.loaded and const modelComplete code
https://github.com/jscastro76/threebox/blob/master/src/objects/loadObj.js#L22

[KarimJedda]

You are welcome, I am glad to be of help.

[jscastro76]

@KarimJedda, changed and available to download so you don't have to modify your code. Please check if it works

[KarimJedda]

I will check later tonight and if it works I'll send you a PR for a Svelte example (should be the same for React/Vue.js) to add in the examples folder :)