jscastro76 / threebox

A Three.js plugin for Mapbox GL JS, with support for animations and advanced 3D rendering.
Other
541 stars 144 forks source link

Removing and reloading a 3D object causes it to disconnect from the map #363

Open josh-cloudscape opened 2 years ago

josh-cloudscape commented 2 years ago

Describe the bug Removing and reloading a 3D object causes it to disconnect from the map. This only seems to occur when:

  1. Using the threebox cache (e.g. options.clone is not set to false)
  2. The glb file contains animations

Afterwards moving the map does not move the model position.

To Reproduce

const options = {
    obj: '/soldier.glb',
    type: 'gltf',
    scale: 20,
    units: 'meters',
    rotation: { x: 90, y: 0, z: 0 },
    adjustment: { x: 0, y: 0, z: 0 },
    feature,
}

let soldier;
const load = () => {
    tb.loadObj(options, function (model) {
        soldier = model.setCoords(feature.geometry.coordinates);
        tb.add(soldier);
    })
}

load();
setTimeout(() => tb.remove(soldier), 2000);
setTimeout(() => load(), 4000);

Example output

Additional context

My guess is something in the duplicate function is not quite right? I couldn't see anything obvious but might not have been looking in the right spot.

josh-cloudscape commented 1 year ago

It seems to be fixed by changing the clone method in objects.js from

let dupe = obj.clone(true)

to

// SkeletonUtils can be copied from https://github.com/mrdoob/three.js/blob/r132/examples/jsm/utils/SkeletonUtils.js
const SkeletonUtils = require("../SkeletonUtils.js");
...
let dupe = SkeletonUtils.clone(obj)