closes #496

Context

This PR deals with "attached objects", e.g., materials, geometries.

These objects can't be add()ed via THREE's Object3D.add(value). Instead, they are "attached" as values as in someObject[someField] = value.

Compared to add()ing, "attach"ing requires extra implementation steps and logic in order to support Vue's declarative paradigm transparently for users.

This PR is another in a series to prepare for a rework of Tres' <primitive />. Issue: #701

Playground

http://localhost:5173/advanced/material-array

Problem

Fields with attached objects don't revert back their original values when unmounted. As a result, an unmounted material will continue to affect its parent.

Solution

When attaching, save the previous value to a variable and restore it when detaching.

Problem

The current implementation of :attach doesn't allow for array indices. This means e.g., it's not possible to attach multiple materials, even though THREE allows this. #496

Solution

Add "attach" logic to traverse arrays.

Problem

:attach is a prop but isn't reactive, as users might expect.

Solution

Implement reactivity for :attach.

Problem

:attach prop value can't be a "pierced prop", i.e., it can only replace values directly on the parent – parent[field]. It can't be used to "drill down" into parent[object][field].

Solution

Implement "pierced" logic for :attach – see resolve in src/utils/index.ts and tests in src/utils/index.test.ts.

Refactor

THREE does not define the attach field. Tres defines it. Most Tres data is stored in object.__tres. attach is stored directly on object as object.attach.

Refactor and store :attach value in object.__tres.attach.

Refactor

Move src/utils/nodeOpsUtils.ts to src/utils/index.ts.