时间戳

首页 > 解决方案 > 更改立方体 WebGL 的旋转

javascript - 更改立方体 WebGL 的旋转

问题描述

我需要解决一个 tsk，要求我模拟狗尾巴的行为。这个“故事”是一个简单的立方体，我从 0° 旋转到 45°，从 45° 旋转到 0°。问题是当它到达 45° 时，它又从 0° 开始旋转。在此处输入图像描述

我需要不断的运动；不恢复初始位置并从 0° 重新开始旋转到 45°。

var theta = [0, 0, 0, 0, 0, 0, 180, 0, 180, 0, 20, 0];
var tailId = 11;
function move() {
    // TAIL
    var dir = true;
    if ( theta[tailId] < 45  ) {
        theta[tailId] +=1;
    }
    if (theta[tailId] == 45){
        while(theta[tailId] !=45 )theta[tailId]+=-1;}

标签： javascriptrotation

解决方案

您应该使用 dir 变量（已指定），但只能作为数字使用。当值超过界限时，只需反转方向。

就像是：

var theta = [0, 0, 0, 0, 0, 0, 180, 0, 180, 0, 20, 0];
var tailId = 11;
var dir = 1;

function move() {
    // TAIL
    theta[tailId] += dir;

    if ( theta[tailId] < 0  ) {
        theta[tailId] = 0;
        dir = -dir;
    } else
     if ( theta[tailId] > 45  ) {
        theta[tailId] = 45;
        dir = -dir;
    } 
}

您可以尝试使用 sinus 函数。看起来更好...

var theta = [0, 0, 0, 0, 0, 0, 180, 0, 180, 0, 20, 0];
var tailId = 11;
var phase = 0;
var step = 0.1;

function move() {
    // TAIL

    // convert from -1..1  =>  0..45
    theta[tailId] = 22.5 + (Math.sin(phase) * 22.5);
    phase += step;
}

推荐阅读