Line2 transformations vs Line transformations

Questions
1

I have a Group object that I load in from a gltf. Initially it was a group of Mesh and Line objects that I would animate/transform at the group level.

Recently I switched the Line objects to Line2 objects. For now I just iterate through the object after it is loaded and just switch the Lines to Line2s in the scene graph like so:

partGroup.traverse((child) => {
            if (child.isMesh || child.isLine) {
                if (child.isLine && child.parent) {
                    const linePosition = child.geometry.getAttribute('position');
                    const lineGeometry = new LineGeometry();
                    lineGeometry.setPositions(linePosition.array);
                    
                    const lineMaterial = new LineMaterial({
                        color: child.material.color ? child.material.color.getHex() : 0xffffff,
                        linewidth: 10,
                        vertexColors: child.material.vertexColors || false,
                    });
                    
                    const line2 = new Line2(lineGeometry, lineMaterial);
                    line2.name = child.name;
                    line2.holeId = child.holeId;
                    line2.position.copy(child.position);
                    line2.rotation.copy(child.rotation);
                    line2.scale.copy(child.scale);
                    line2.userData = child.userData;

                    const index = child.parent.children.indexOf(child);
                    if (index !== -1) {
                        child.parent.children[index] = line2;
                    }

                    line2.geometry.translate(
                        -props.context.partCenter.x,
                        -props.context.partCenter.y,
                        -props.context.partCenter.z,
                    );

                    child = line2;
                } else {
                    child.geometry.translate(
                        -props.context.partCenter.x,
                        -props.context.partCenter.y,
                        -props.context.partCenter.z,
                    );
                }
            }
        });
        partGroup.updateMatrix();

Since I have done this, animations and transformations no longer work on the lines. I have an animateModel function that looks like this:

function animateModel(
    currentTime: number,
    startTime: number,
    duration: number,
    object: THREE.Group,
    camera: THREE.OrthographicCamera,
    controls: OrbitControls,
    modelEndState: ModelTransform,
    cameraEndState: CameraState,
): boolean {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / duration, 1);

    object.position.lerpVectors(
        object.position,
        modelEndState.position,
        progress,
    );
    object.quaternion.slerpQuaternions(
        object.quaternion,
        modelEndState.quaternion,
        progress,
    );
    object.scale.lerpVectors(object.scale, modelEndState.scale, progress);
    object.updateMatrix();

    camera.position.lerpVectors(
        camera.position,
        cameraEndState.position,
        progress,
    );
    camera.zoom = THREE.MathUtils.lerp(
        camera.zoom,
        cameraEndState.zoom,
        progress,
    );
    camera.updateProjectionMatrix();

    controls.target.lerpVectors(
        controls.target,
        modelEndState.position,
        progress,
    );
    controls.update();

    return progress >= 1;
}

I use this animateModel function to present meshes in an isometric view. It still works with the Mesh objects in the partGroup, but not the Line2 objects:

image
image1374×1304 22.5 KB

So I am assuming that Line2 transformations must be treated differently? I cannot find much documentation on it though. Any clues would be appreciated!

2

Figure it out. For future reference, updating the scene graph like:

child.parent.children[index] = line2;

will not work. Ended up getting it to work by using the add/remove methods on the parent Group:

line.parent.add(line2);
line.parent.remove(line);