在 WebGL 模式下，围绕 x 轴旋转坐标系。
参数 angle 是旋转的角度。例如，调用 rotateX(1) 会使坐标系围绕 x 轴旋转 1 弧度。rotateX() 根据当前的 angleMode() 解释角度值。
默认情况下，转换会累积。例如，连续调用两次 rotateX(1) 与调用一次 rotateX(2) 效果相同。可以使用 push() 和 pop() 函数将转换隔离到不同的绘图组中。
注意：转换会在绘制循环的开始处重置。在 draw() 函数中调用 rotateX(1) 不会导致形状旋转。
示例
// Click and drag the mouse to view the scene from different angles.
function setup() {
createCanvas(100, 100, WEBGL);
describe('A white cube on a gray background.');
}
function draw() {
background(200);
// Enable orbiting with the mouse.
orbitControl();
// Rotate the coordinate system 1/8 turn.
rotateX(QUARTER_PI);
// Draw a box.
box();
}
// Click and drag the mouse to view the scene from different angles.
function setup() {
createCanvas(100, 100, WEBGL);
describe('A white cube on a gray background.');
}
function draw() {
background(200);
// Enable orbiting with the mouse.
orbitControl();
// Rotate the coordinate system 1/16 turn.
rotateX(QUARTER_PI / 2);
// Rotate the coordinate system 1/16 turn.
rotateX(QUARTER_PI / 2);
// Draw a box.
box();
}
// Click and drag the mouse to view the scene from different angles.
function setup() {
createCanvas(100, 100, WEBGL);
// Use degrees.
angleMode(DEGREES);
describe('A white cube on a gray background.');
}
function draw() {
background(200);
// Enable orbiting with the mouse.
orbitControl();
// Rotate the coordinate system 1/8 turn.
rotateX(45);
// Draw a box.
box();
}
// Click and drag the mouse to view the scene from different angles.
function setup() {
createCanvas(100, 100, WEBGL);
describe('A white cube rotates slowly against a gray background.');
}
function draw() {
background(200);
// Enable orbiting with the mouse.
orbitControl();
// Rotate the coordinate system a little more each frame.
let angle = frameCount * 0.01;
rotateX(angle);
// Draw a box.
box();
}
语法
rotateX(angle)参数
angle
数字:
当前 angleMode() 中的旋转角度。
Notice any errors or typos? Please let us know. Please feel free to edit src/core/transform.js and open a pull request!