three.js - Mapbox/threebox 在现有 3D 对象上更改比例不起作用

Question

首先，我对 Mapbox 有点陌生。我已经让一些有趣的事情正常工作，但这并不意味着我正在以正确/最好的方式做事。总是乐于学习如何把事情做得更好。

我正在尝试设置一个加载 3D 模型的页面，并在加载后为您提供屏幕控制以操纵 3D 模型。

我已经让 x/y/z 移动和旋转工作正常，但比例无法正常工作。我尝试了几种不同的方法（详见下文）并且规模没有改变。

我从这里的标准 Mapbox 3D 模型代码示例开始： https ://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/

我从这里使用 jcastro76 的三盒叉： https ://github.com/jscastro76/threebox/

注意：无论初始模型var options比例设置为多少，console.log/.dir 都会显示 0.0262049，但更改初始比例确实会影响模型的初始大小。这让我觉得我读错了比例，但没有任何比例设置尝试明显改变模型的比例。做一个 console.dir(defaultModel) 并查看属性，所有看起来与比例相关的东西也总是设置为 0.0262049，包括 matrix.elements 0/5/10，比例 x/y/z，

有什么想法/意见吗？提前致谢！

我正在使用的代码.... 添加 3D 对象：

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();
        }
});

// 尝试 #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

我还以相同的前后结果尝试了所有这些：

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);

我看到了使用 THREE.Vector3 对象的参考，所以我尝试了这个，结果相同：

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);

标签： three.jsmapboxthreebox