3D アニメーションサンプル

hikatsuka

2010-06-25 16:21:39

License: MIT License

Fork: 8

Fav: 10

View: 3179

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 141 lines
HTML 9 lines
CSS 1 lines

3D アニメーションサンプル

var canvas;  //キャンバス
var ctx;  //キャンバスコンテキスト
var timerDrawID;  //描画タイマーID
var cW = 450;  //キャンバス横サイズ
var cH = 420;  //キャンバス縦サイズ
var cX_3d = cW / 2;  //3D軸の中心点のX座標
var cY_3d = cH / 2;  //3D軸の中心点のY座標
var zMax_3d = 500;  //Z軸の視点側の最大距離
var objArr = new Array();  //オブジェクト情報配列
var mouseX = 0;  //マウスのX座標
var mouseY = 0;  //マウスのY座標
var animeFrame = 30;  //アニメーションのフレーム数
var nowForm = 0;  //現在の形状パターン
var allRX = 0;  //全体のX角度
var allRY = 0;  //全体のY角度
var afterimage = 0.2;  //残像
window.onload = function() {
  init();
};
function init(){
  //キャンバスの初期処理
  canvas = document.getElementById('testCanvas');
  if ( ! canvas || ! canvas.getContext ) return false;
  //2Dコンテキスト
  ctx = canvas.getContext('2d');
  //イベント
  canvas.addEventListener("mousedown", mouseDownListner, false);
  canvas.addEventListener("mousemove", mouseMoveListner, false);
  //オブジェクト生成
  initObj();
  //デフォルト形状
  changeForm(0);
  //タイマー開始
  setTimerDraw();
  //デフォルトラジオボタン
  var rb = document.getElementById('rb0');
  rb.checked = true;
}
function initObj(){
  for (i = 0; i < 27; i++) {
    var obj = new Object();
    obj.x = 0;
    obj.y = 0;
    obj.z = 0;
    obj.rx = 0;
    obj.ry = 0;
    obj.rz = 0;
    objArr.push(obj);
  }
}
function setTimerDraw(){
  clearInterval(timerDrawID);
  timerDrawID = setInterval("draw()", 50);
}
function draw() {
  //背景
  ctx.beginPath();
  ctx.fillStyle = "#000000";
  ctx.globalAlpha = afterimage;
  ctx.fillRect(0, 0, cW, cH);  //塗りつぶした矩形を描画
  //角度調整
  allRX += (mouseX - cW / 2) / 20;
  allRY += (mouseY - cH / 2) / 20;
  //各オブジェクトを描画
  for (i = 0; i < objArr.length; i++) {
    //座標計算
    objArr[i].rx = allRX;
    objArr[i].ry = allRY;
    var rX = objArr[i].rx * Math.PI / 180;
    var rY = objArr[i].ry * Math.PI / 180;
    var rZ = objArr[i].rz * Math.PI / 180;
    var cX = objArr[i].x;
    var cY = objArr[i].y;
    var cZ = objArr[i].z;
    //X軸についての回転
    var nX;
    var nY;
    var nZ;
    nX = cX;
    nZ = cZ;
    cX = nX * Math.cos(rX) - nZ * Math.sin(rX);
    cZ = nZ * Math.cos(rX) + nX * Math.sin(rX);
    //Y軸についての回転
    nZ = cZ;
    nY = cY
    cZ = nZ * Math.cos(rY) - nY * Math.sin(rY);
    cY = nY * Math.cos(rY) + nZ * Math.sin(rY);
    //Z軸についての回転
    nX = cX;
    nY = cY;
    cX = nX * Math.cos(rZ) - nY * Math.sin(rZ);
    cY = nX * Math.sin(rZ) + nY * Math.cos(rZ);
    //実座標(X/Y/Scale)に置き換え
    nZ = zMax_3d / (zMax_3d - cZ); //奥行きの係数を求める
    nZ = nZ > 0 ? nZ : 0; //負の値は無し
    var X = cX * nZ + cX_3d; //X軸計算
    var Y = cY * nZ + cY_3d; //Y軸計算
    var S = 10 * nZ; //Z軸計算
    //円を描く
    ctx.beginPath();
    ctx.fillStyle = "#FF6600";
    ctx.globalAlpha = 1;
    ctx.arc(X, Y, S, 0, Math.PI * 2, false);
    ctx.fill();
  }
}
function changeForm(n){
  for (j = 0; j < objArr.length; j++) {
    var r = 360 / objArr.length * j;
    if (n == 0) {
      objArr[j].x = Math.cos(r * Math.PI / 180) * 150;
      objArr[j].y = 0;
      objArr[j].z = Math.sin(r * Math.PI / 180) * 150;
    } else if (n == 1) {
      objArr[j].x = Math.cos(r * 3 * Math.PI / 180) * 50;
      objArr[j].y = Math.sin(r * 3 * Math.PI / 180) * 50;
      objArr[j].z = j * 10 - 150;
    } else if (n == 2) {
      objArr[j].x = (Math.floor(j / 3) - Math.floor(j / 9) * 3) * 100 - 100;
      objArr[j].x += 10;
      objArr[j].y = j % 3 * 100 - 100;
      objArr[j].y += 10;
      objArr[j].z = Math.floor(j / 9) * 100 - 100;
    }
  }
}
function mouseDownListner(e) {
  nowForm++;
  if (nowForm >= 3) nowForm = 0;
  changeForm(nowForm);
}
function mouseMoveListner(e) {
  var rect = e.target.getBoundingClientRect();
  mouseX = e.clientX - rect.left;
  mouseY = e.clientY - rect.top;
}
//残像
function changeAI(n) {
  afterimage = n;
}

3D アニメーションサンプル

var canvas; //キャンバス var ctx; //キャンバスコンテキスト var timerDrawID; //描画タイマーID var cW = 450; //キャンバス横サイズ var cH = 420; //キャンバス縦サイズ var cX_3d = cW / 2; //3D軸の中心点のX座標 var cY_3d = cH / 2; //3D軸の中心点のY座標 var zMax_3d = 500; //Z軸の視点側の最大距離 var objArr = new Array(); //オブジェクト情報配列 var mouseX = 0; //マウスのX座標 var mouseY = 0; //マウスのY座標 var animeFrame = 30; //アニメーションのフレーム数 var nowForm = 0; //現在の形状パターン var allRX = 0; //全体のX角度 var allRY = 0; //全体のY角度 var afterimage = 0.2; //残像 window.onload = function() { init(); }; function init(){ //キャンバスの初期処理 canvas = document.getElementById('testCanvas'); if ( ! canvas || ! canvas.getContext ) return false; //2Dコンテキスト ctx = canvas.getContext('2d'); //イベント canvas.addEventListener("mousedown", mouseDownListner, false); canvas.addEventListener("mousemove", mouseMoveListner, false); //オブジェクト生成 initObj(); //デフォルト形状 changeForm(0); //タイマー開始 setTimerDraw(); //デフォルトラジオボタン var rb = document.getElementById('rb0'); rb.checked = true; } function initObj(){ for (i = 0; i < 27; i++) { var obj = new Object(); obj.x = 0; obj.y = 0; obj.z = 0; obj.rx = 0; obj.ry = 0; obj.rz = 0; objArr.push(obj); } } function setTimerDraw(){ clearInterval(timerDrawID); timerDrawID = setInterval("draw()", 50); } function draw() { //背景 ctx.beginPath(); ctx.fillStyle = "#000000"; ctx.globalAlpha = afterimage; ctx.fillRect(0, 0, cW, cH); //塗りつぶした矩形を描画 //角度調整 allRX += (mouseX - cW / 2) / 20; allRY += (mouseY - cH / 2) / 20; //各オブジェクトを描画 for (i = 0; i < objArr.length; i++) { //座標計算 objArr[i].rx = allRX; objArr[i].ry = allRY; var rX = objArr[i].rx * Math.PI / 180; var rY = objArr[i].ry * Math.PI / 180; var rZ = objArr[i].rz * Math.PI / 180; var cX = objArr[i].x; var cY = objArr[i].y; var cZ = objArr[i].z; //X軸についての回転 var nX; var nY; var nZ; nX = cX; nZ = cZ; cX = nX * Math.cos(rX) - nZ * Math.sin(rX); cZ = nZ * Math.cos(rX) + nX * Math.sin(rX); //Y軸についての回転 nZ = cZ; nY = cY cZ = nZ * Math.cos(rY) - nY * Math.sin(rY); cY = nY * Math.cos(rY) + nZ * Math.sin(rY); //Z軸についての回転 nX = cX; nY = cY; cX = nX * Math.cos(rZ) - nY * Math.sin(rZ); cY = nX * Math.sin(rZ) + nY * Math.cos(rZ); //実座標(X/Y/Scale)に置き換え nZ = zMax_3d / (zMax_3d - cZ); //奥行きの係数を求める nZ = nZ > 0 ? nZ : 0; //負の値は無し var X = cX * nZ + cX_3d; //X軸計算 var Y = cY * nZ + cY_3d; //Y軸計算 var S = 10 * nZ; //Z軸計算 //円を描く ctx.beginPath(); ctx.fillStyle = "#FF6600"; ctx.globalAlpha = 1; ctx.arc(X, Y, S, 0, Math.PI * 2, false); ctx.fill(); } } function changeForm(n){ for (j = 0; j < objArr.length; j++) { var r = 360 / objArr.length * j; if (n == 0) { objArr[j].x = Math.cos(r * Math.PI / 180) * 150; objArr[j].y = 0; objArr[j].z = Math.sin(r * Math.PI / 180) * 150; } else if (n == 1) { objArr[j].x = Math.cos(r * 3 * Math.PI / 180) * 50; objArr[j].y = Math.sin(r * 3 * Math.PI / 180) * 50; objArr[j].z = j * 10 - 150; } else if (n == 2) { objArr[j].x = (Math.floor(j / 3) - Math.floor(j / 9) * 3) * 100 - 100; objArr[j].x += 10; objArr[j].y = j % 3 * 100 - 100; objArr[j].y += 10; objArr[j].z = Math.floor(j / 9) * 100 - 100; } } } function mouseDownListner(e) { nowForm++; if (nowForm >= 3) nowForm = 0; changeForm(nowForm); } function mouseMoveListner(e) { var rect = e.target.getBoundingClientRect(); mouseX = e.clientX - rect.left; mouseY = e.clientY - rect.top; } //残像 function changeAI(n) { afterimage = n; } <canvas id="testCanvas" width="450" height="420" style="border:1px solid #CCC;"></canvas> <div style="text-align:center;font-size:12px;"> <input name="mode" type="radio" value="10" id="rb0" onClick="changeAI(0.15)" /><label for="rb0">残像：強</label>　 <input name="mode" type="radio" value="20" id="rb1" onClick="changeAI(0.5)" /><label for="rb1">残像：弱</label>　 <input name="mode" type="radio" value="30" id="rb2" onClick="changeAI(1)" /><label for="rb2">残像：無</label> </div> body { background-color: #DDDDDD; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/xh7d/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/hikatsuka/xh7d" title="3D アニメーションサンプル">3D アニメーションサンプル - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip