JavaScriptBank
04-03-2010, 05:38 PM
Tám điểm tròn tự xoay theo các quĩ đạo khác nhau được qui định trước, tạo nên một hình vuông tự động quay quanh một trục cố định.... chi tiết (http://www.javascriptbank.com/3d-self-revolving-cube.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/3d/3d-self-revolving-cube.jpg (http://www.javascriptbank.com/javascript/3d/3d-self-revolving-cube/preview/vi/)
Demo: JavaScript Khối lập phương tự quay (http://www.javascriptbank.com/3d-self-revolving-cube.html/vi/)
| JavaScript 3D self-revolving cube (http://www.javascriptbank.com/3d-self-revolving-cube.html)
Cách cài đặt
Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript
<SCRIPT language=javascript>
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
<!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]
// ---------------------------------------------------------------------------
// creates cube model with name and (a simple) material
var cubeModel = new Model("cube", new Material("°"));
// defines model points.
// The model's points have to be defined before the respective code is written into the document.
cubeModel.setPoints(createCubeModelPoints());
// ---------------------------------------------------------------------------
// the matrix to transform the model with
var staticRotationMatrix = new Matrix();
staticRotationMatrix.rotateX(0.05);
staticRotationMatrix.rotateY(0.1);
// ---------------------------------------------------------------------------
function initOnLoad() {
fixNetscape();
// assign layer (only for Netscape 4.x, for all other browsers
// this is done automatically when writing the point code)
cubeModel.assignLayers();
// creates and inits matrix to initialize the model
var initMatrix = new Matrix();
initMatrix.scale(50, 50, 50);
// >> begin to work with the model etc.
// initializes model
cubeModel.transform(initMatrix);
// >> first draw of the model (recommended)
cubeModel.draw();
// starts animation
animate();
}
/*
* The main animate method. Calls itself repeatedly.
*/
function animate() {
var delay = 10;
// animates cube model ----------------------------------------
// rotates the cube
cubeModel.transform(staticRotationMatrix);
// updates display
cubeModel.draw();
// calls itself with an delay to decouple client computer speed from the animation speed.
// result: the animation is as fast as possible.
setTimeout("animate()", delay);
}
// ---------------------------------------------------------------------------
function createCubeModelPoints() {
// the cube model
return new Array(
// Point3D( x, y, z, m)
new Point3D( 1, 1, 1, 0),
new Point3D( 1, 1, -1, 0),
new Point3D( 1, -1, 1, 0),
new Point3D( 1, -1, -1, 0),
new Point3D(-1, 1, 1, 0),
new Point3D(-1, 1, -1, 0),
new Point3D(-1, -1, 1, 0),
new Point3D(-1, -1, -1, 0)
);
}
// -->
</SCRIPT>
Bước 2: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
<DIV id=fixnetscape style="POSITION: absolute; VISIBILITY: hidden"></DIV>
<SCRIPT language=JavaScript type=text/javascript>
<!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]
// MANDATORY: INSERTION OF HTML PART INTO PAGE
// creates the HTML code representing the model's points
// NB: This is written directly into the page from within the method
cubeModel.createPointCode();
// -->
</SCRIPT>
Bước 3: Tải các file bên dưới về
Files
LyrObj.js (http://www.javascriptbank.com/javascript/3d/js/LyrObj.js)
3dhtml.js (http://www.javascriptbank.com/javascript/3d/js/3dhtml.js)
ColorUtil.js (http://www.javascriptbank.com/javascript/3d/js/ColorUtil.js)
materials.js (http://www.javascriptbank.com/javascript/3d/js/materials.js)
Bạn có thể xem các mã tương tự bên dưới
- Khối lập phương các màu an toàn (http://www.javascriptbank.com/web-safe-color-cube.html/vi/)
- Khối lập phương xoay theo chuột (http://www.javascriptbank.com/examples-3drectangle.html/vi/)
Một vài nhãn tương tự: khối lập phương (http://www.javascriptbank.com/vi+tag=khối lập phương), lập phương (http://www.javascriptbank.com/vi+tag=lập phương), tự quay (http://www.javascriptbank.com/vi+tag=tự quay), quay (http://www.javascriptbank.com/vi+tag=quay), điểm tròn (http://www.javascriptbank.com/vi+tag=điểm tròn), quĩ đạo (http://www.javascriptbank.com/vi+tag=quĩ đạo), qui định (http://www.javascriptbank.com/vi+tag=qui định), hình vuông (http://www.javascriptbank.com/vi+tag=hình vuông), trục (http://www.javascriptbank.com/vi+tag=trục)
Bạn có thể xem thêm nhiều JavaScript khác về 3D (http://www.javascriptbank.com/javascript/3d/vi/)
Trình chơi nhạc giao diện iPod
(http://www.javascriptbank.com/ipod-player-using-flash.html/vi/) - JavaSript kiểm tra số điện thoại hợp lệ (http://www.javascriptbank.com/vi=kiểm tra điện thoại) -
http://www.javascriptbank.com/javascript.images/3d/3d-self-revolving-cube.jpg (http://www.javascriptbank.com/javascript/3d/3d-self-revolving-cube/preview/vi/)
Demo: JavaScript Khối lập phương tự quay (http://www.javascriptbank.com/3d-self-revolving-cube.html/vi/)
| JavaScript 3D self-revolving cube (http://www.javascriptbank.com/3d-self-revolving-cube.html)
Cách cài đặt
Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript
<SCRIPT language=javascript>
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
<!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]
// ---------------------------------------------------------------------------
// creates cube model with name and (a simple) material
var cubeModel = new Model("cube", new Material("°"));
// defines model points.
// The model's points have to be defined before the respective code is written into the document.
cubeModel.setPoints(createCubeModelPoints());
// ---------------------------------------------------------------------------
// the matrix to transform the model with
var staticRotationMatrix = new Matrix();
staticRotationMatrix.rotateX(0.05);
staticRotationMatrix.rotateY(0.1);
// ---------------------------------------------------------------------------
function initOnLoad() {
fixNetscape();
// assign layer (only for Netscape 4.x, for all other browsers
// this is done automatically when writing the point code)
cubeModel.assignLayers();
// creates and inits matrix to initialize the model
var initMatrix = new Matrix();
initMatrix.scale(50, 50, 50);
// >> begin to work with the model etc.
// initializes model
cubeModel.transform(initMatrix);
// >> first draw of the model (recommended)
cubeModel.draw();
// starts animation
animate();
}
/*
* The main animate method. Calls itself repeatedly.
*/
function animate() {
var delay = 10;
// animates cube model ----------------------------------------
// rotates the cube
cubeModel.transform(staticRotationMatrix);
// updates display
cubeModel.draw();
// calls itself with an delay to decouple client computer speed from the animation speed.
// result: the animation is as fast as possible.
setTimeout("animate()", delay);
}
// ---------------------------------------------------------------------------
function createCubeModelPoints() {
// the cube model
return new Array(
// Point3D( x, y, z, m)
new Point3D( 1, 1, 1, 0),
new Point3D( 1, 1, -1, 0),
new Point3D( 1, -1, 1, 0),
new Point3D( 1, -1, -1, 0),
new Point3D(-1, 1, 1, 0),
new Point3D(-1, 1, -1, 0),
new Point3D(-1, -1, 1, 0),
new Point3D(-1, -1, -1, 0)
);
}
// -->
</SCRIPT>
Bước 2: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
<DIV id=fixnetscape style="POSITION: absolute; VISIBILITY: hidden"></DIV>
<SCRIPT language=JavaScript type=text/javascript>
<!-- // (c) 2001 Till Nagel, [email protected] & Rene Sander, [email protected]
// MANDATORY: INSERTION OF HTML PART INTO PAGE
// creates the HTML code representing the model's points
// NB: This is written directly into the page from within the method
cubeModel.createPointCode();
// -->
</SCRIPT>
Bước 3: Tải các file bên dưới về
Files
LyrObj.js (http://www.javascriptbank.com/javascript/3d/js/LyrObj.js)
3dhtml.js (http://www.javascriptbank.com/javascript/3d/js/3dhtml.js)
ColorUtil.js (http://www.javascriptbank.com/javascript/3d/js/ColorUtil.js)
materials.js (http://www.javascriptbank.com/javascript/3d/js/materials.js)
Bạn có thể xem các mã tương tự bên dưới
- Khối lập phương các màu an toàn (http://www.javascriptbank.com/web-safe-color-cube.html/vi/)
- Khối lập phương xoay theo chuột (http://www.javascriptbank.com/examples-3drectangle.html/vi/)
Một vài nhãn tương tự: khối lập phương (http://www.javascriptbank.com/vi+tag=khối lập phương), lập phương (http://www.javascriptbank.com/vi+tag=lập phương), tự quay (http://www.javascriptbank.com/vi+tag=tự quay), quay (http://www.javascriptbank.com/vi+tag=quay), điểm tròn (http://www.javascriptbank.com/vi+tag=điểm tròn), quĩ đạo (http://www.javascriptbank.com/vi+tag=quĩ đạo), qui định (http://www.javascriptbank.com/vi+tag=qui định), hình vuông (http://www.javascriptbank.com/vi+tag=hình vuông), trục (http://www.javascriptbank.com/vi+tag=trục)
Bạn có thể xem thêm nhiều JavaScript khác về 3D (http://www.javascriptbank.com/javascript/3d/vi/)
Trình chơi nhạc giao diện iPod
(http://www.javascriptbank.com/ipod-player-using-flash.html/vi/) - JavaSript kiểm tra số điện thoại hợp lệ (http://www.javascriptbank.com/vi=kiểm tra điện thoại) -