Flash( papervision3d ) jQuery( rotate.js ) html5 それぞれにおける3D作成方法

この記事は6年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは!

ちょっとネタとしては古いとは思うのですが。

前に下記3つの方法で3Dを作り比べました。
・Flash( papervision3d )
・jQuery( rotate.js )
・html5
せっかくなので書いておきますね。

どれも簡単なので一回挑戦してみても面白いと思います♪

Flash( papervision3d )



package
{
import flash.display.*;
import flash.events.*;
import flash.text.*;
import org.papervision3d.cameras.*;
import org.papervision3d.materials.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.materials.WireframeMaterial;
public class Main extends MovieClip
{
static private const PARTICLE_ROUND :int = 1000;
static private const PARTICLE_AMOUNT :int = 100;
private var camera:Camera3D;
private var vp:Viewport3D;
private var render:BasicRenderEngine
private var scene:Scene3D;
private var contaiber:DisplayObject3D;
public function Main()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.quality = StageQuality.LOW;
camera = new Camera3D();
scene = new Scene3D();
vp = new Viewport3D(0, 0, true, false);
addChild(vp);
render = new BasicRenderEngine();
camera.focus = 500;
camera.zoom = 1;
camera.z = 500;
contaiber = new DisplayObject3D();
scene.addChild(contaiber);
for (var i:int = 0; i < PARTICLE_AMOUNT; i++)
{
var material:MovieMaterial = new MovieMaterial(createParticle(), true);
material.doubleSided = true;
var plane:Plane = new Plane(material, 100, 100, 2, 2);
plane.x = Math.random() * PARTICLE_ROUND – PARTICLE_ROUND / 2;
plane.y = Math.random() * PARTICLE_ROUND – PARTICLE_ROUND / 2;
plane.z = Math.random() * PARTICLE_ROUND – PARTICLE_ROUND / 2;
plane.rotationY = 0;

contaiber.addChild(plane);
}
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
private function enterFrameHandler(event:Event):void{contaiber.yaw(1);render.renderScene(scene, camera, vp);}
private function createParticle():MovieClip
{
var MC:MovieClip = new MovieClip();
var fmt:TextFormat=new TextFormat();
fmt.size = 60;
fmt.align = TextFormatAlign.LEFT;
fmt.color = 0xffffff;
var datas:Array = [”,’Letter, inc.’,’Creative’,’Webdesign’,’Design’,’Art’,’Event’,’Noma’,’Toshikura’,’Daikuhatra’,’ZUMI’];
var tf:TextField = new TextField();
tf.antiAliasType = AntiAliasType.ADVANCED;
tf.defaultTextFormat = fmt;
tf.width = 600;
tf.text = datas[Math.floor(Math.random()* 10)];
tf.selectable = true;
tf.x = tf.textWidth;
tf.y = tf.textHeight;
MC.addChild(tf);
MC.scaleX =0;
MC.scaleY =0;
return MC;
}
}
}


papervision3dはFlashの3Dレンダリングでは一番手軽な方法だと思います。
利用方法の詳細はコチラ

Flash DEMO

jQuery( rotate.js )



<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/rotator.js" type="text/javascript"></script>
<style type="text/css">
*{padding:0px; margin:0px;}
html {overflow: hidden;}
body {background: #222;width:100%;height:100%;margin:0px;padding:0px;}
#x_axis {width:100%;height:1px;position:absolute;top:50%;}
#y_axis {height:100%;width:1px;position:absolute;left:50%;}
#y_axis_line{height:100%;width:1px;position:absolute;left:50%;top:0px;}
#links a {z-index:100;position:absolute;width:100%;height:100%;}
a {text-decoration: none;color:#fff;}
img {border:none;}
</style>
</head>
<body>
<div id="x_axis">
<div id="y_axis">
<div id="links">
<script type="text/javascript">
for (var i = 1; i <= 20; i++) {document.write(‘<a title="x=’+(i*30*((Math.random()*2)-1))+’&amp;y=’+(i*30*((Math.random()*2)-1))+’&amp;z=’+(i*30*((Math.random()*2)-1))+’"> TEXT’+ i +'</a>’);};
</script>
</div>
</div>
</div>

rotate.jsというライブラリを使っています。
これが一番簡単なんですが…jQueryの最新バージョンが使えません。残念。。

jQuery DEMO

html5



<script type="text/javascript">
$(document).ready(function(){
$("#canv").attr({height:$("body").height()});
$("#canv").attr({width:$("body").width()});
});

$(window).resize(function(){
$("#canv").attr({height:$("body").height()});
$("#canv").attr({width:$("body").width()});
});
function init(){
var canvas = document.getElementById(‘canv’);
var ctx = canvas.getContext(‘2d’); /* 2Dコンテキスト */
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var angle = 0;
var R = 25;
var cX = WIDTH/2;
var cY = HEIGHT/3;
var radiusx = WIDTH/4;
var radiusy = 180;
var by = .05;
var posX1 ,posY1 ,posX2 ,posY2 ,posX3 ,posY3 ,posX4 ,posY4;
setInterval(draw, 30);
function draw(){
ctx.clearRect(0,0,WIDTH,HEIGHT);
posX1 = cX + Math.sin(angle) * radiusx * -1;
posY1 = cY + Math.cos(angle) * radiusy * -1;
posX2 = cX + Math.cos(angle) * radiusx * -1;
posY2 = cY + Math.sin(angle) * radiusy;
posX3 = cX + Math.sin(angle) * radiusx;
posY3 = cY + Math.cos(angle) * radiusy;
posX4 = cX + Math.cos(angle) * radiusx;
posY4 = cY + Math.sin(angle) * radiusy * -1;
angle += by;
ctx.fillStyle = ‘rgba(42,64,88)’;

ctx.beginPath();
ctx.arc(posX1, posY1, R, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(posX2, posY2, R, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(posX3, posY3, R, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(posX4, posY4, R, 0, Math.PI*2, false);
ctx.fill();

ctx.arc(posX1, posY1 + cY, R, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(posX2, posY2 + cY, R, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(posX3, posY3 + cY, R, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(posX4, posY4 + cY, R, 0, Math.PI*2, false);
ctx.fill();
}
}
</script>
</head>
<style type="text/css">
body,html{height:100%; width:100%; overflow: hidden;}
*{padding:0px; margin:0px;}
canvas{background:#ccc;}
</style>
<body onload="init();">
<canvas id="canv" width="1000" height="1000"></canvas>
</body>

html5 DEMO

以上です♪