时间戳

首页 > 解决方案 > 如何使用箭头键将立方体平滑移动到threejs中的平面边缘

javascript - 如何使用箭头键将立方体平滑移动到threejs中的平面边缘

问题描述

我有以下小提琴：https ://jsfiddle.net/mauricederegt/swh2yrct/15/

您可以使用箭头键移动立方体：

  function Keyboard() {
    var speed = 1;
    
    if( event.keyCode == 65 || event.keyCode == 37) { cube.translateX( -1 ) }// Left 
    else if( event.keyCode == 68 || event.keyCode == 39) { cube.position.x += speed }// Left } // Right d
    else if( event.keyCode == 87 || event.keyCode == 38) { cube.position.y += speed } // Up w
    else if( event.keyCode == 83 || event.keyCode == 40) { cube.position.y -= speed } // Down s

  

    fixedCubeCoordinates.map( box => {
      if (
        box.x === cube.position.x &&
        box.y === cube.position.y &&
        box.z === cube.position.z
      ) {
        cube.position.x = old.x;
        cube.position.y = old.y;
        cube.position.z = old.z;
      }
    });       
  }

如您所见，立方体移动不顺畅，它有点传送。它当时还“移动”了 1 个立方体大小。此示例中的平面（白色）可以具有不同的形状（取决于加载的坐标）。此时，您可以移动到飞机之外。

我想要的是让立方体在按下箭头键时平滑地移动/滑动到平面的边缘。因此，如果我按左键，立方体会向左移动并停在边缘。如果我向上推，它将停在中间的边缘（因为那里有一个洞）。

我是 three.js 的初学者，但我该如何完成呢？首先，立方体必须保持平稳移动，并在边缘停止。

标签： javascriptthree.js

解决方案

推荐阅读