我拖动1号滑动块可以实现2号滑动块同时变化，这两个都可以实现调整透明度，但如何实现拖动2号滑动块实现1号滑动块也发生变化呢

Question

我拖动1号滑动块可以实现2号滑动块同时变化，这两个都可以实现调整透明度，但如何实现拖动2号滑动块实现1号滑动块也发生变化呢？
2号滑动块是jsroot原生的，1号是我将它从中拉取出来的。vue3技术

Answer 1

引自免费微信小程序：皆我百晓生

要使两个滑动块（1号和2号）在拖动时都能同步改变透明度，你需要在Material对象上设置一个回调函数。这个回调函数将在每次改变透明度时调用，确保它们能同步更新。

首先，让我们创建一个新的Material实例，并添加一个透明度属性。然后，在Material类的原型链上定义一个方法onUpdateOpacity，当透明度改变时调用它。

以下是修改后的代码示例：

<script>
import { ref, onMounted } from "vue";

function changeOpacity(opacity) {
  return opacity * 0.5;
}

export default {
  setup(props) {
    const material = new THREE.MeshBasicMaterial({ color: props.color });
    const opacity = ref(1);

    function onUpdateOpacity() {
      if (material.opacity !== opacity.value) {
        material.opacity = changeOpacity(opacity.value);
      }
    }

    // 更新操作
    onMounted(() => {
      material.onUpdateOpacity = () => {
        opacity.value = changeOpacity(opacity.value);
      };
    });

    return {
      material,
      opacity,
    };
  },
};
</script>

<style scoped>
.material-1 {
  width: 100px;
}
</style>

在这个例子中，我们创建了一个名为changeOpacity的函数，用于计算新的透明度值。然后我们在Material类的原型链上调用了onUpdateOpacity方法。这使得当我们更改opacity值时，material.opacity也会相应地更新。

此外，我们还在组件的setup函数中设置了监听器，以便在渲染完成后调用material.onUpdateOpacity方法。

这样，当用户拖动1号滑动块时，其透明度会自动随2号滑动块的透明度变化而变化。