材质对象不应进入响应式系统，应使用 shallowref 持有；仅需响应式更新 .value 赋值，内部属性（如 color、uniforms）直接操作；参数状态用 reactive 管理，通过 watch 同步至材质。
材质对象本身不该进响应式系统
Three.js 的 Material 实例（比如 MeshStandardMaterial 或自定义 ShaderMaterial）内部包含大量 WebGL 资源引用、着色器程序、uniform 缓存等。一旦用 ref 包裹，Vue 会尝试深度代理其所有属性——这不仅毫无必要，还会导致 this 绑定错乱、uniform 更新失效，甚至触发 WebGL 上下文丢失错误。
用 shallowRef 持有材质实例更安全
shallowRef 只让 .value 这一层的赋值具有响应性，内部属性保持原样。这对材质管理非常合适：
- 你只需要在切换材质时重新赋值
materialRef.value = new MeshPhongMaterial(...)，这个动作会触发视图更新 - 材质自身的颜色、粗糙度等属性可直接修改：
materialRef.value.color.set(0xff0000)，无需响应式追踪 - 避免了
ref对material.uniforms等深层对象做无意义代理，内存和性能都更可控
配合材质系统做状态同步
在工业级编辑器（如 ES-3DEditor）中，材质常由 ShaderMaterialManager 统一注册和更新。这时推荐这样组织：
- 用
shallowRef存储当前激活的材质实例，供渲染循环读取 - 用普通
reactive管理材质参数表单状态（如{ roughness: 0.7, metalness: 0.3 }） - 通过
watch监听参数变化，再手动调用materialRef.value.needsUpdate = true或更新对应 uniform
别把材质放进 reactive 或 ref 嵌套结构里
常见错误是把材质塞进一个响应式对象中，例如：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
const sceneState = reactive({ mesh: ..., material: new MeshBasicMaterial(...) })
这样会导致整个 sceneState 被深度代理，材质对象被污染。正确做法是分离关注点：
const materialRef = shallowRef(null)<br>const materialParams = reactive({ color: 0xffffff, emissive: 0x000000 })前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
