hujiulong / vue-3d-model

📷 vue.js 3D model viewer component
https://vue-3d-model.netlify.app
MIT License
2.44k stars 469 forks source link

请问下,通过鼠标拖拽模型后,然后通过 rotation 属性控制他们之间是什么关系? #466

Open qingyun1029 opened 1 year ago

qingyun1029 commented 1 year ago

代码如下,分别通过拖动组件 slider 控制模型的 rotation5 x、y、z 属性,刚好分别从 三个 坐标上可以正、反旋转一周,但如果先通过鼠标做拽后,再通过组件 slider 拖动任一坐标,却是围绕着通过鼠标拖拽后为准的,说明鼠标拖拽和外部传入的 rotation 属性控制的不是同一个东西,请问他们之间是什么关系呢 ?

谢谢!

如何将这两种操作方式联系起来 ?

也就是如果只通过 slider 组件拖拽,随便怎么弄,都能够回到最原始的位置(角度)。但如果只通过鼠标直接做拽模型,拖动多次后,却很难还原到最初的位置(角度)。

<model-fbx
  :rotation="rotation5"
  src="/static/models/fbx/dancing.fbx"
>
</model-fbx>

<div>
  <el-slider v-model="rotation5.x" :step="Math.PI * 0.1" :min="-2 * Math.PI" :max="2 * Math.PI"></el-slider>
  <el-slider v-model="rotation5.y" :step="Math.PI * 0.1" :min="-2 * Math.PI" :max="2 * Math.PI"></el-slider>
  <el-slider v-model="rotation5.z" :step="Math.PI * 0.1" :min="-2 * Math.PI" :max="2 * Math.PI"></el-slider>
</div>

data() {
  return {
    rotation5: {
        x: 0,
        y: 0,
        z: 0,
      },
  }
}