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

Question

我正在尝试使用 设置拾取对象的位置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", -20.0, 20.0, 0.001).onChange( moveObject ).listen()
  gui.add(position, "z", -20.0, 20.0, 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.x, position.y, position.z)
  }

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

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

‍♂️</p>

标签： three.jsconsolepositionraycastingdat.gui