使用 dat.gui 在 Three.js 中设置对象的位置

问题描述

我正在尝试使用 dat.gui 设置拾取对象的位置，即您单击对象，然后在 GUI 中更改位置。

我能够使用光线投射选择对象并将位置加载到 GUI 中。但是当我更改 GUI 中的值时，对象会飞出屏幕。最奇怪的是，当我在控制台中手动设置对象的位置时，例如 pickedobj.set.position( ... )，使用与 GUI 相同的值，对象将占据正确的位置。

相关代码如下：

  let pickedobj = null; // this is global variable 

  let position = new THREE.Vector3()
  const gui = new GUI().addFolder("Position")
  gui.add(position,"x",-20.0,20.0,0.001).onChange( moveObject ).listen()
  gui.add(position,"y","z",0.001).onChange( moveObject ).listen()
  gui.open()

  function updateGui( obj ) {
    if ( obj ) {
      if ( obj !== pickedobj ) { // we have clicked on a new object
        position.setFromMatrixPosition( obj.matrixWorld )
        pickedobj = obj
        window.pickedobj = pickedobj
        console.log( 'copy old position',position.x,position.y,position.z)
      }
    }
  }

  function moveObject() {
    if (pickedobj) pickedobj.position.set( position )
    window.pickedobj = pickedobj
    console.log('set new position',position.z)
  }

编辑：一位朋友给了我答案！
在 moveObject() 中需要将对象的新位置设置为 position.x,position.z 而不是 position 像这样：

function moveObject() {
    if (pickedobj) {
      pickedobj.position.set( position.x,position.z )
    }
    window.pickedobj = pickedobj
    console.log('set new position',position.z)
  }

??‍♂️

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）