Mapbox/threebox Changing Scale On Existing 3D Object Not Working

768 Views Asked by At

First, I'm somewhat new to Mapbox. I've made some fun things work ok, but that doesn't mean I'm doing things the correct/best way. Always happy to learn how to do things better.

I'm trying to set up a page that loads a 3D model and gives you on-screen controls to manipulate the 3D model after it loads.

I've gotten x/y/z movement and rotation to work ok but scale isn't working correctly. I've tried a few different ways (detailed below) and scale just doesn't change.

I started with the standard Mapbox 3D model code example here: https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/

And I'm using jcastro76's threebox fork from here: https://github.com/jscastro76/threebox/

Note: Regardless of what the initial model var options scale is set to, the console.log/.dir shows 0.0262049 but changing that initial scale does affect the initial size of the model. That makes me think I'm reading the wrong scale, but none of the scale setting attempts visibly changed the model's scale either. And doing a console.dir(defaultModel) and looking through the properties, everything that looks scale related is also always set to 0.0262049 including matrix.elements 0/5/10, scale x/y/z,

Any thoughts/comments? Thanks in advance!

Code I'm using.... Adding the 3D object:

map.addLayer({
        id: 'custom_layer',
        type: 'custom',
        renderingMode: '3d',
        onAdd: function (map, mbxContext) {
                window.tb = new Threebox(
                        map,
                        mbxContext,
                        {
                            defaultLights: true,
                            enableSelectingObjects: true,
                            enableDraggingObjects: true,
                            enableRotatingObjects: true
                        }
                );

                var options = {
                        obj: 'model.glb',
                        type: 'gltf',
                        scale: 1,  // I get 0.0262049 later regardless of what this is set to. Models with different initial scale set here work correctly, but still can't change it later
                        units: 'meters',
                        rotation: { x: 90, y: 0, z: 0 },
                        anchor: 'center'
                }

                tb.loadObj(options, function (model) {
                        defaultModel = model.setCoords(origin);
                        defaultModel.addEventListener('ObjectDragged', onDraggedObject, false);

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

// Attempt #1, scale.set

scale  = defaultModel.scale;
console.log('Original scale:');
console.dir(scale);

x: 0.0262049 y: 0.0262049 z: 0.0262049

defaultModel.scale.set(1, 1, 1);

scale  = defaultModel.scale;
console.log('New scale:');
console.dir(scale);

x: 0.0262049 y: 0.0262049 z: 0.0262049

I also tried all of these with the same before/after results:

defaultModel.matrix.makeScale(1, 1, 1);

defaultModel.setScale(1);

defaultModel.scale.x = 1;
defaultModel.scale.y = 1;
defaultModel.scale.z = 1;

defaultModel.matrix.scale(1);

defaultModel.matrix.scale(1, 1, 1);

I saw reference to using a THREE.Vector3 object so I tried this, with the same results:

var threeV3 =  new THREE.Vector3(
                        1,
                        1,  // also tried -1 on some
                        1
                    );

defaultModel.scale.set(threeV3);
defaultModel.matrix.makeScale(threeV3);
defaultModel.setScale(threeV3);
defaultModel.matrix.scale(threeV3);
0

There are 0 best solutions below