3D アニメーションサンプル hikatsuka Follow 2010-06-25 16:21:39 License: MIT License Fork8 Fav10 View3179 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; } <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> 3D アニメーションサンプル body { background-color: #DDDDDD; } 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; } use an iframe compat browser, deer 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 tags Tweet twitter Tags 3D animation canvas javascript,animation sample Favorite by ren_120 cuddlephish thumbelinya MyOuterWorld.. ryuichi1com arahaya cccc4: canvas laishin17: 3Danimationcanvasjavascript,animation Docfive: 3dok US428: 3Danimationsample Forked sort new page view favorite forked forked: 3D アニメーションサンプル Junzo.Matuno.. 00 53views 142/9/1 forked: 3D アニメーションサンプル y244 00 67views 142/9/1 forked: 3D アニメーションサンプル y244 00 63views 142/9/1 1 2NEXT>>