5017
261
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tuần 9: vẽ 3D</title>
<script src="../asets/glsim.js"></script> <!-- load the OpenGL 1.1 simulation code -->
<script>
let frameNumber = 0, camera;
function drawShpere(radius, slices, stacks) {
var i, j;
for (j = 0; j < stacks; j++) {
var latitude1 = (Math.PI / stacks) * j - Math.PI / 2;
var latitude2 = (Math.PI / stacks) * (j + 1) - Math.PI / 2;
var sinLat1 = Math.sin(latitude1);
var cosLat1 = Math.cos(latitude1);
var sinLat2 = Math.sin(latitude2);
var cosLat2 = Math.cos(latitude2);
glBegin(GL_QUAD_STRIP);
for (i = 0; i <= slices; i++) {
var longitude = (2 * Math.PI / slices) * i;
var sinLong = Math.sin(longitude);
var cosLong = Math.cos(longitude);
var x1 = cosLong * cosLat1;
var y1 = sinLong * cosLat1;
var z1 = sinLat1;
var x2 = cosLong * cosLat2;
var y2 = sinLong * cosLat2;
var z2 = sinLat2;
glNormal3d(x2, y2, z2);
glVertex3d(radius * x2, radius * y2, radius * z2);
glNormal3d(x1, y1, z1);
glVertex3d(radius * x1, radius * y1, radius * z1);
}
glEnd();
}
}
function transform() {
frameNumber += 1;
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
camera.apply();
glPushMatrix();
glRotatef(frameNumber,0,0,1);
glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, [0.8, 0.3, 0, 1]);
drawShpere(3,32,16); //Vẽ mặt trời
glRotatef(-2*frameNumber,0,0,1);
glTranslatef(8,0,0);
glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, [0, 0, 0.5, 1]);
drawShpere(2,32,16); //Vẽ trái đất
glRotatef(-2*frameNumber,0,0,1);
glTranslatef(4,0,0);
glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, [0.3, 0.3, 0.3, 1]);
drawShpere(1,32,16); //Vẽ mặt trăng
glPopMatrix();
}
function draw() {
setInterval(transform, 1000 / 24)
}
function initGL() {
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
glEnable(GL_NORMALIZE);
glEnable(GL_DEPTH_TEST);
glClearColor(0, 0, 0, 1);
glColor3f(0, 0, 0);
glMaterialfv(GL_FRONT_AND_BACK, GL_AMBIENT_AND_DIFFUSE, [0, 0, 0.5, 1]);
glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, [0.2, 0.2, 0.2, 1]);
glMateriali(GL_FRONT_AND_BACK, GL_SHININESS, 16);
glLightfv(GL_LIGHT0, GL_SPECULAR, [1, 1, 1, 1]); // Light-0 với ánh sáng trắng
glLightModelfv(GL_LIGHT_MODEL_AMBIENT, [0.2, 0.2, 0.2, 1]); // mức sáng ở phía rìa
glPolygonOffset(1, 1);
}
function init() { // Called by <body onload="init()">, when the page has loaded.
try {
glsimUse("glcanvas"); // OpenGL will draw to the canvas with id="glcanvas".
}
catch (e) {
document.getElementById("canvas-holder").innerHTML =
"Sorry, an error occured:<br>" + e;
return;
}
initGL();
camera = new Camera();
camera.setScale(10);
camera.installTrackball(transform);
draw();
}
window.onload = init;
</script>
</head>
<body>
<h3>Tuần 9: vẽ 3D </h3>
<noscript>
<p><b>Sorry, this page requires JavaScript!</b></p>
</noscript>
<div id="canvas-holder">
<canvas id="glcanvas" width="600" height="500" style="border: solid 1px gray;"></canvas>
</div>
</body>
</html>
