javascript - 使用旋转和平移保持 3D 立方体在其边缘正确滚动的问题-6ren

javascript - 使用旋转和平移保持 3D 立方体在其边缘正确滚动的问题

转载作者：行者123 更新时间：2023-12-03 15:49:52

请在此处查看我的 js Fiddle:https://jsfiddle.net/mauricederegt/5ozqg9uL/3/

var xAngle = 0;
var yAngle = 0;
var xPos  = 0;
var yPos  = 0;

$('body').keydown(function(evt) {
    if(evt.keyCode == 37) 
    {
        //left
        yAngle -= 90;
        xPos -= 100;
        //rotate and translate the position of the cube
        $('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
    }
    if(evt.keyCode == 39) 
    {
        //right
        yAngle -= -90;
        xPos -= -100;
        //rotate and translate the position of the cube
        $('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
    }
    if(evt.keyCode == 38) 
    {
        //up
        xAngle -= -90;
        yPos -= 100;
        //rotate and translate the position of the cube
        $('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
    }
    if(evt.keyCode == 40) 
    {
        //down
        xAngle -= 90;
        yPos -= -100;
        //rotate and translate the position of the cube
        $('#cube')[0].style["WebkitTransform"] = "translateX("+xPos+"px) translateY("+yPos+"px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg)";
    }
});

#scene {
    padding: 10px;
    -webkit-perspective: 800;
}

#cube {
    position: relative;
    padding-top: 0;
    margin: 0 auto;
    height: 100px;
    width: 100px;
    -webkit-transition: -webkit-transform 0.4s linear;
    -webkit-transform-style: preserve-3d;

   
}

.face {
    position: absolute;
    height: 85px;
    width: 85px;
    border-style: solid;
    border-width: 5px;
    border-color: grey;
    padding: 5px;
    background-color: rgba(190, 190, 190, 0.7);
}

#cube .one  {
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

#cube .two {
    -webkit-transform: translateZ(50px);
}

#cube .three {
    -webkit-transform: rotateY(90deg) translateZ(50px);
}

#cube .four {
    -webkit-transform: rotateY(180deg) translateZ(50px);
}

#cube .five {
    -webkit-transform: rotateY(-90deg) translateZ(50px);
}

#cube .six {
    -webkit-transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html>
<body>
<div id="scene">
    Press the arrow keys...
    <div id="cube">
        <div class="face one">
            Face 1
        </div>
        <div class="face two">
            Face 2
        </div>
        <div class="face three">
            Face 3
        </div>
        <div class="face four">
            Face 4
        </div>
        <div class="face five">
            Face 5
        </div>
        <div class="face six">
            Face 6
        </div>
    </div>
</div>
</body>
</html>

如您所见，我有一个 css3 3d 立方体，您可以使用箭头键移动它。您可以将其向左、向右、向上和向下移动。为了实现这一点，我将位置和 Angular 存储在各种变量中:

var xAngle = 0;
var yAngle = 0;
var xPos  = 0;
var yPos  = 0;

立方体总是在其边缘向上或向下正确“滚动”，但对于左侧和右侧，情况并非总是如此。
示例:

在开始时按左箭头键和右箭头键任意多次。立方体行为正确

现在按下一次，然后再次向左(或向右)两次。立方体现在滚动不正确

但是，如果您再次按下向上或向下，它会再次正确滚动向上或向下

所以问题似乎只在于向左或向右。我怎样才能解决这个问题？

最佳答案

您需要考虑 3 种旋转，这意味着 3 个不同的轴，而不是像您正在做的 2 个。
这是您的代码的更新版本。请注意我如何根据其他轴更新轴的 Angular 。
仍然不是一个完美的解决方案，因为我发现了一些奇怪的 Action (可能我错过了一些边缘情况)，但是一个很好的起点。

var xAngle = 0;
var yAngle = 0;
var zAngle = 0;
var xPos = 0;
var yPos = 0;

$('body').keydown(function(evt) {
  if (evt.keyCode == 37) {
    //left
    if (xAngle % 180 == 0)
      yAngle -= 90;
    else
      zAngle -= 90;
    xPos -= 100;
  }
  if (evt.keyCode == 39) {
    //right
    if (xAngle % 180 == 0)
      yAngle -= -90;
    else
      zAngle -= -90;

    xPos -= -100;
  }
  if (evt.keyCode == 38) {
    //up
    if (yAngle % 180 == 0)
      xAngle -= -90;
    else
      zAngle -= -90;
    yPos -= 100;
  }
  if (evt.keyCode == 40) {
    //down
    if (yAngle % 180 == 0)
      xAngle -= 90;
    else
      zAngle -= 90;
    yPos -= -100;
  }
  $('#cube').css('transform', "translateX(" + xPos + "px) translateY(" + yPos + "px) rotateX(" + xAngle + "deg) rotateY(" + yAngle + "deg) rotateZ(" + zAngle + "deg)");
});

#scene {
  padding: 10px;
  perspective: 800;
}

#cube {
  position: relative;
  padding-top: 0;
  margin: 0 auto;
  height: 100px;
  width: 100px;
  transition: transform 0.4s linear;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  height: 85px;
  width: 85px;
  border-style: solid;
  border-width: 5px;
  border-color: grey;
  padding: 5px;
  background-color: rgba(190, 190, 190, 0.7);
}

#cube .one {
  transform: rotateX(90deg) translateZ(50px);
}

#cube .two {
  transform: translateZ(50px);
}

#cube .three {
  transform: rotateY(90deg) translateZ(50px);
}

#cube .four {
  transform: rotateY(180deg) translateZ(50px);
}

#cube .five {
  transform: rotateY(-90deg) translateZ(50px);
}

#cube .six {
  transform: rotateX(-90deg) translateZ(50px) rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scene">
  Press the arrow keys...
  <div id="cube">
    <div class="face one">
      Face 1
    </div>
    <div class="face two">
      Face 2
    </div>
    <div class="face three">
      Face 3
    </div>
    <div class="face four">
      Face 4
    </div>
    <div class="face five">
      Face 5
    </div>
    <div class="face six">
      Face 6
    </div>
  </div>
</div>

关于javascript - 使用旋转和平移保持 3D 立方体在其边缘正确滚动的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66808899/

文章推荐： c++ - WICConvertBitmapSource BGR 到 Gray 意外像素格式转换

文章推荐： python - 泡泡洗牌 - 加权洗牌

文章推荐： terraform - 使用 Terraform 进行分层部署

文章推荐： firebase - firestore api中的分页

zooming - Highcharts 平移
我正在尝试基于此示例实现 highcharts 平移: http://jsfiddle.net/HXUmK/5/ 但我希望能够用鼠标左键缩放并用鼠标右键平移。所以我修改了上面的代码并设法让它工作了一点
java - 平移 BufferedImage
如何删除 BufferedImage 最左边垂直列的 50px，并将其复制到与原始 BufferedImage 大小相同的新 BufferedImage 中？ class TestCopyImage
旋转前后的 OpenGL 平移
以下是关于如何绘制机器人的 ARM 和肩膀并通过一些用户输入旋转它们的代码(取自 http://www.glprogramming.com/red/chapter03.html ): glPushMa
ios - 平移 - 平移之前图像的初始位置
我正在使用 Swift/SpriteKit 并在 SKScene 上创建了 map 的宽图像。我正在用代码完成这一切，并希望让用户拖动手指来平移这张超宽的 map 。可以将其想象为幻想世界的老式 RP
c++ - 如何使用棋盘找到两个摄像机之间的旋转/平移
我正在将 opencv 与 C 一起使用，我正在尝试获取 2 个摄像头之间的外部参数(旋转和平移)。有人告诉我可以使用棋盘格图案进行校准，但我找不到任何好的样本。我该怎么做？编辑给出的建议是用棋
android - 画廊内的图像缩放/平移
我正在尝试在 android 图库小部件中缩放/平移图像。图像覆盖整个屏幕。虽然我可以缩放/平移图库中的图像，但我无法滑动到下一张/上一张图像。单个图像的缩放和平移效果很好。我从 Hello And
JavaFX:如何仅在中间按钮上制作 ScrollPane 平移？
当允许平移时，所有鼠标事件上的 JavaFX ScrollPane Pane : scrollPane.setPannable(true); 如何限制 ScrollPane 仅在鼠标中间事件上平移，
paperjs - 如何使用 paperjs 平移
我一直试图弄清楚如何在 paperjs 中使用 onMouseDrag 和 onMouseDown 进行平移/缩放。我看到的唯一引用是在 coffescript 中，并且不使用 paperjs 工具
d3.js - 平移/缩放顺序比例？
我正在使用 d3 来渲染简化的甘特图，并使用 d3.behavior.zoom 进行平移和缩放。 x 比例是一个时间比例(稍微修改为以列为中心的日历天等)并且工作得很好，但是我在决定如何缩放/平移 y
safari - CSS旋转，平移，缩放动画错误
我已经使用关键帧为HTML/CSS3创建了动画。动画是一个图标，该图标应该围绕其中心点旋转和缩放。该动画可在Chrome中运行，但在Safari中，直到动画结束，它才能正确转换。这是-定位到 s
javascript - 如何在某些事件后加载 Angular 平移
我有一个在登录事件后调用的 TranslationService，在这个服务中我想初始化 $translateProvider.translation 但这个对象似乎无法在 app.config(..
user-interface - 平移，精确定义
滚动和平移有什么区别？平移是否被识别为拖动图像/背景的 Action ，而滚动仅在您使用滚动条时？而且，拖动和平移有什么区别？当我拖动google maps的 map 时，哪个术语合适，拖动还是
Javascript Canvas 平移 Canvas
当用户按下鼠标并移动它时，我试图平移 Canvas ，但由于某种我看不到的原因，它似乎不起作用。有什么想法吗？ canvas.addEventListener('mousedown', onM
audio - Pyglet:控制音频平衡(平移)
我正在拼命寻找一种用 Pyglet 控制声音(左右)平衡的方法。我知道 3D 定位系统，但我真正想要的只是控制平移(类似于 -1:left 1:right)，而 3D 系统在这种情况下会适得其反(
python - 当这些点集包含噪声时如何对齐两组点(平移+旋转)？
考虑以下两组点。我想找到最佳的 2D 平移和旋转，以对齐数据集蓝色和数据集橙色之间的最大数量的点，如果到另一个数据集中最近邻居的距离小于阈值，则认为该点对齐。我知道这与“迭代最近点”算法有关，但在这
d3.js - 凸包不适用于缩放/平移
我正在尝试包含 @bumbeishvili 的 Convex Hull 实现( https://bl.ocks.org/bumbeishvili/f027f1b6664d048e894d19e54fe
svg - D3 平移+缩放约束
我正在尝试在平移和缩放时使可缩放/拖动矩形不超出 svg 边界。我尝试基于此 example 来实现它，但我似乎无法让它工作。我创建了 this jsfiddle只有可缩放和可拖动的矩形。再一次，我试
ios - 约束 UIScrollView 平移？
UIScrollView 有一个内置的行为“directionLockEnabled”。启用后，平移将尝试锁定到水平或垂直方向。但是当用户积极尝试对角滚动时 - 它仍然允许对角滚动。我想删除对角滚
java - 平移/旋转/移动图形对象而不弄乱整个屏幕
我正在编写一个 GUI，它将执行一些图形平移/旋转等操作。我的问题是，当我尝试翻译我的图形时， (a) 整个屏幕都会平移，而不是我的一小块绘制区域 (b) 旧油漆留在那里，留下一个大油漆 Blob
java - LibGDX - Scene2D 平移
我最近一直在做一个项目，作为我的作业。好吧，言归正传，我有一个 Scene2D 的 Screen 实现，我遇到的问题是我在小部件上的触摸事件不会在小部件上停止。我的意思是，如果我弹出一个窗口，并尝

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用旋转和平移保持 3D 立方体在其边缘正确滚动的问题