JS SSE：如何使用 Three.JS 控制 3D 立方体的移动？

如何解决JS SSE：如何使用 Three.JS 控制 3D 立方体的移动？

关注此线程：JS SSE: Cannot access event.data outside of onMsg callback function?

我有一个用 Three.JS 编写的 3D 立方体，它使用 Server-sent-event 从远程服务器接收数据。 3D 从使 3D 立方体相应移动的加速度计 X 获取数据。问题是该值可能非常高，导致 3D 模型过冲并超出屏幕边界。

以下是来自加速度计X的值：

我尝试重新调整每个传入的值，如下所示：

(sensorValue / 16384)*500
((sensorValue / 16384)*1000)/(height)

但运动变得或大或小，使人眼无法看到。

代码如下：

let sensorValue = 0;
  let sensorAddr = 0;

  StartRetrieveLiveData();

  function main() {

    const canvas = document.querySelector('#canvas');
    const accelPanel = document.querySelector('#accelPanel');
    const renderer = new THREE.Webglrenderer({ canvas });
    var context = canvas.getContext("2d");
    var width = window.innerWidth;
    var height = window.innerHeight;

    const fov = 70;
    const aspect = 2;
    const near = 20;
    const far = 500;
    const camera = new THREE.PerspectiveCamera(fov,aspect,near,far);

    camera.position.set(0,50,1.5);
    camera.up.set(0,1);
    camera.lookAt(0,0);

    const scene = new THREE.Scene();
    {
      const color = 0xFFFFFF;
      const intensity = 1;
      const light = new THREE.PointLight(color,intensity);
      scene.add(light);
    }
    // an array of objects who's rotation to update
    const objects = [];
    const radius = 3;
    const widthSegments = 3;
    const heightSegments = 3;
    const sphereGeometry = new THREE.BoxGeometry(radius,widthSegments,heightSegments);
    const sunMaterial = new THREE.MeshBasicMaterial({ color: "green",wireframe: false });
    const object = new THREE.Mesh(sphereGeometry,sunMaterial);

    var cubeAxis = new THREE.AxesHelper(10);
    object.add(cubeAxis);

    object.scale.set(2,2,2);
    scene.add(object);
    objects.push(object);

    function resizeRendererTodisplaySize(renderer) {
      const canvas = renderer.domElement;
      const width = canvas.clientWidth;
      const height = canvas.clientHeight;
      const needResize = canvas.width !== width || canvas.height !== height;
      if (needResize) {
        renderer.setSize(width,height,false);
      }
      return needResize;
    }

    function render() {

      if (resizeRendererTodisplaySize(renderer)) {
        const canvas = renderer.domElement;
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
      }

      objects.forEach((obj) => {

        // Here I take accelerometerX and pass them to the 3D cube
        if (sensorAddr === 1) {
          sensorValueIndex = ((sensorValue / 16384)*1000)/(height);
          obj.position.z = sensorValueIndex;
          console.log(sensorValueIndex);
        }
        
      });

      renderer.render(scene,camera);
      requestAnimationFrame(render);
    }
    requestAnimationFrame(render);
  }

  function onMsg(event) {
    // console.log(`[message] Data received from server: ${event.data}`);
    // console.log("event.data = " + JSON.parse(event.data));

    var received_msg = event.data;
    var obj = JSON.parse(JSON.parse(received_msg));

    if (obj !== null) {

      if (
        obj.hasOwnProperty("DataMapChangedobjectsAddressValue") &&
        obj["DataMapChangedobjectsAddressValue"][0]["DataMapAddress"] !==
        undefined
      ) {
        sensorAddr =
          obj["DataMapChangedobjectsAddressValue"][0]["DataMapAddress"];
        sensorValue =
          obj["DataMapChangedobjectsAddressValue"][0]["Value"];

        // if (sensorAddr === 1) {
        //   sensorValueIndex = (sensorValue / 16384) * 500;
        // }
      }
    }
  }

基本上，立方体应该上下移动并且仍然在视野内。