如何使用纯 webGL 而不是 three.js 执行此操作答案

【问题标题】：How can I do this operations using pure webGL and not three.js如何使用纯 webGL 而不是 three.js 执行此操作
【发布时间】：2015-07-01 08:13:10
【问题描述】：

if( keyboard.pressed("up"))
            pobjects[movementControls.translate].translateX(1);
        if( keyboard.pressed("down"))
            pobjects[movementControls.translate].translateX(-1);
        if( keyboard.pressed("left"))
            pobjects[movementControls.translate].translateZ(-1);
        if( keyboard.pressed("right"))
            pobjects[movementControls.translate].translateZ(1);
        if( keyboard.pressed("w"))
            pobjects[movementControls.translate].translateY(1);
        if( keyboard.pressed("s"))
            pobjects[movementControls.translate].translateY(-1);
        if( keyboard.pressed("x"))
            cobjects[movementControls.rotate].rotation.x+=0.1;
        if( keyboard.pressed("y"))
            cobjects[movementControls.rotate].rotation.y+=0.1;
        if( keyboard.pressed("z"))
            cobjects[movementControls.rotate].rotation.z+=0.1;

基本上我想使用纯 webGl 而不是三个.js 函数来旋转、缩放和平移对象。

【问题讨论】：

标签： javascript three.js webgl

【解决方案1】：

您可能想在learningwebgl.com 上查看本教程。

您基本上必须为“keydown”和“keyup”事件添加事件侦听器，并编写相应的函数以在事件发生时捕获事件，例如通过将按下的键作为属性添加到函数对象，例如：

var currentlyPressedKeys = { };

function onKeyDown (e) {

  currentlyPressedKeys[e.keyCode] = true;

}

function onKeyUp (e) {

  currentlyPressedKeys[e.keyCode] = false;

}

然后你需要另一个函数来定义当按下某个键时应该做什么，比如

if ( currentlyPressedKeys[38] ) { //...

例如。（代表您可以找到的键的数字here。）

因此，您可以在此处更改变量 rotationY、translationZ 等，这些变量作为参数传递给您 rotate、scale 和 的函数em>翻译代表您的对象的矩阵，然后将其与原始顶点位置数据相乘到顶点着色器上。

如果你不知道怎么做，我建议你回到链接教程的开头，或者看看webglfundamentals.org上的精彩解释。

希望，这有帮助。

【讨论】：

【解决方案2】：

有一件事你应该知道。

没有旋转、缩放和平移对象的“纯 WebGL”等价物。唯一接近它的 WebGL 功能是使用着色器实现的矩阵乘法。相反，旋转和其他转换通常由 GLMatrix 等 JavaScript 库提供。

【讨论】：