threejs 坐标系问题

Question

问题描述

1.在场景中加入多个物体,
2.我在场景中加入了一个平面然后又加入了几个圆柱,将圆柱的位置设置在平面上
3.然后移动鼠标时,每个物体的位置会发生改变,

问题出现的环境背景及自己尝试过哪些方法

尝试过放在一个group中或者多个group中都无法改变

相关代码

粘贴代码文本（请勿用截图）

    createAGantry() {
      const threeBase = this.$refs.threeBase;
      const roadPanel = this.addRoadPanel()
      const r = 15
      const body = new THREE.Object3D()
      // 创建4个柱子
      const pillar = new THREE.Object3D()
      const geometry = new THREE.CylinderGeometry(r, r, 1000, 16);

      const material = new THREE.MeshBasicMaterial({
        color: 'rgb(0,251,255)',
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.4,
        depthTest: false,
      })
      const material2 = new THREE.MeshBasicMaterial({
        color: 'rgb(0,251,255)',
        transparent: true,
        opacity: 1,
        side: THREE.DoubleSide,
        depthTest: false,
        wireframe: true,
      });
      const cylinder = new THREE.Mesh(geometry, material);
      const cylinder2 = new THREE.Mesh(geometry, material2);

      pillar.add(cylinder);
      pillar.add(cylinder2);
      pillar.rotation.x = 0.5 * Math.PI
      pillar.position.set(-500, 60, 0);
      const pillar2 = pillar.clone();
      pillar2.position.set(-500, -60, 0);
      const pillar3 = pillar.clone();
      pillar3.position.set(900, 60, 0);
      const pillar4 = pillar.clone();
      pillar4.position.set(900, -60, 0);
      body.add(pillar);
      body.add(pillar2);
      body.add(pillar3);
      body.add(pillar4);
      // 将柱子添加到路面
      roadPanel.add(body);
      // threeBase.getScene().add(body);

      // const lights = [];
      // lights[ 0 ] = new THREE.PointLight( 0xffffff, 0.2, 0 );
      // lights[ 1 ] = new THREE.PointLight( 0xffffff, 0.2, 0 );
      // lights[ 2 ] = new THREE.PointLight( 0xffffff, 0.2, 0 );
      // lights[ 0 ].position.set( 0, 200, 0 );
      // lights[ 1 ].position.set( 100, 200, 100 );
      // lights[ 2 ].position.set( - 100, - 200, - 100 );
      // threeBase.getScene().add( lights[ 0 ] );
      // threeBase.getScene().add( lights[ 1 ] );
      // threeBase.getScene().add( lights[ 2 ] );

    },
    // 添加公路
    addRoadPanel() {

      const threeBase = this.$refs.threeBase

      // const gui = threeBase.getGui()
      // const pointTextture = THREE.ImageUtils.loadTexture(pint1Png)
      const roadW = 1200
      const roadH = 8000
      // 添加公路
      const panelG = new THREE.PlaneGeometry(roadW, roadH)
      const panelM = new THREE.Mesh(panelG, new THREE.MeshBasicMaterial({
        color: 'rgba(126,205,248,0.51)',
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.1,
        // 关闭深度可以解决相机拉远后物体闪烁的问题
        depthTest: false,
      }))
      panelM.rotation.x = -0.5 * Math.PI
      panelM.position.z = 2000
      threeBase.addObject(panelM);

      const laneSize = 5
      // 得到车道的一半
      const half = laneSize / 2
      // 计算出单个车道应该占用的宽度
      const laneX = roadW / laneSize - 50
      const laneG = new THREE.PlaneGeometry(30, roadH)
      const laneM = new THREE.Mesh(laneG, new THREE.MeshBasicMaterial({
        color: 'rgb(0,251,255)',
        // side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.4,
        depthTest: false,
      }))
      laneM.position.z = 0.14
      // 添加车道线
      for (let i = 0; i < laneSize; i++) {
        // 设置车道线的位置
        // laneM.rotation.y = -0.5 * Math.PI
        const lane = laneM.clone()
        lane.position.x = (laneX * i) - half * laneX
        // laneM.position.y =
        // console.log(lane.position.x)
        panelM.add(lane);
      }
      return panelM
      /*const roadFolder = gui.addFolder('公路')
      roadFolder.add(panelM.position, 'x', 100, 4000).name('x')
      roadFolder.add(panelM.position, 'y', 100, 4000).name('y')
      roadFolder.add(panelM.position, 'z', 100, 4000).name('z')*/


      // const container = this.$refs.threeBase.$el

      // const planeGeometry1 = new THREE.PlaneBufferGeometry(container.clientWidth * 4, container.clientWidth * 4)
      // 背景材料
      // const planeMaterial1 = new THREE.MeshBasicMaterial({
      //   map: pointTextture,
      //   side: THREE.DoubleSide,
      //   transparent: true,
      //   opacity: 1,
      //   depthWrite: !1
      // })
      // 背景网格
      // const plane1 = new THREE.Mesh(planeGeometry1, planeMaterial1)
      // plane1.position.set(0, 0, 0)
      // plane1.rotateX(Math.PI / 2)
      // threeBase.addObject(plane1);
    },

你期待的结果是什么？实际看到的错误信息又是什么？

我怕希望拖动时圆柱的位置不变
问题截图
默认位置

鼠标移动之后的位置

我尝试将
pillar.rotation.x = 0.5 * Math.PI
这个句话去掉
发现移动后位置不会改变

默认位置

移动后位置