我如何使用纯 webGL 而不是three.js来做这个操作

Question

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;

Basically I want to rotate,scale and translate objects using pure webGl and not three.js functions.

Answer 1

You might want to take a look upon this tutorial on learningwebgl.com .

You basically have to add event listener for the 'keydown' and the 'keyup' events and write corresponding functions to catch the events when they occur, for example by adding the pressed keys as attributes to a function object like:

var currentlyPressedKeys = { };

function onKeyDown (e) {

  currentlyPressedKeys[e.keyCode] = true;

}

function onKeyUp (e) {

  currentlyPressedKeys[e.keyCode] = false;

}

Then you'll need an other function where you define what should be done, when a certain key is pressed, like

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

for example. (The numbers representing the keys you can find here .)

So, this is where you change the variables rotationY , translationZ etc. that you pass as parameters to the functions where you rotate , scale and translate the matrices representing your objects and which are later multiplied with the original vertex position data onto the vertexshader.

If you don't know how to do that, I'd recommend to go back to the beginning of the linked tutorial, or as well have a look at the great explanation on webglfundamentals.org .

Hope, this helped.

Answer 2

There is one thing you should know.

There is no "pure WebGL" equivalent of rotating, scaling, and translating objects. The only WebGL functionality that comes close to it is matrix multiplication implemented using shaders. Instead, rotation and other transformations are usually provided by a JavaScript library such as GLMatrix.