IntelliJ IDEAでAway 3Dを始めよう。
とりあえずTutorialの動かしかたを備忘録として残します。
- プロジェクトを作成します。
Flash Moduleで作りましょう。
- Target platformは Web で。
Pure ActionScriptにチェックを入れる
Flex SDKを選択。
Target playerは 11以上
- サンプルコードを写す
以下のコードをコピペします。
※クラス名とかは適当に合わせて変えます。
/* * https://github.com/away3d/away3d-tutorials-fp11/blob/master/tutorials/particles/particles_beginning/src/TheBasicTutorial.as */ package { import away3d.animators.data.ParticleProperties; import away3d.animators.data.ParticlePropertiesMode; import away3d.animators.nodes.ParticlePositionNode; import away3d.animators.nodes.ParticleVelocityNode; import away3d.animators.ParticleAnimationSet; import away3d.animators.ParticleAnimator; import away3d.containers.View3D; import away3d.controllers.HoverController; import away3d.core.base.Geometry; import away3d.debug.AwayStats; import away3d.entities.Mesh; import away3d.materials.ColorMaterial; import away3d.primitives.CubeGeometry; import away3d.primitives.PlaneGeometry; import away3d.tools.helpers.ParticleGeometryHelper; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Vector3D; [SWF(backgroundColor="#000000", frameRate="60")] public class Hoge extends Sprite { private var _view:View3D; //navigation variables private var _cameraController:HoverController; private var _move:Boolean = false; private var _lastPanAngle:Number; private var _lastTiltAngle:Number; private var _lastMouseX:Number; private var _lastMouseY:Number; public function Hoge() { stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; _view = new View3D(); _view.antiAlias = 2; addChild(_view); _cameraController = new HoverController(_view.camera, null, 45, 20, 1000, 5); addChild(new AwayStats(_view)); initScene(); initParticle(); //add listeners addEventListener(Event.ENTER_FRAME, onEnterFrame); stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); stage.addEventListener(Event.RESIZE, onResize); onResize(); } private function initScene():void { var groundMaterial:ColorMaterial = new ColorMaterial(); var ground:Mesh = new Mesh(new PlaneGeometry(2000, 2000), groundMaterial); ground.y = -100; _view.scene.addChild(ground); } private function initParticle():void { //generate the particle geometry var cube:Geometry = new CubeGeometry(10, 10, 10); var geometrySet:Vector.<Geometry> = new Vector.<Geometry>; for (var i:int = 0; i < 1000; i++) { geometrySet.push(cube); } var particleGeometry:Geometry = ParticleGeometryHelper.generateGeometry(geometrySet); //create the particle animation set var animationSet:ParticleAnimationSet = new ParticleAnimationSet(true, true, true); //add behaviors to the animationSet animationSet.addAnimation(new ParticlePositionNode(ParticlePropertiesMode.LOCAL_STATIC)); animationSet.addAnimation(new ParticleVelocityNode(ParticlePropertiesMode.GLOBAL, new Vector3D(0, 50, 0))); //set the initialiser function animationSet.initParticleFunc = initParticleParam; //create material, mesh and animator var material:ColorMaterial = new ColorMaterial(0xff0000); var particleMesh:Mesh = new Mesh(particleGeometry, material); var animator:ParticleAnimator = new ParticleAnimator(animationSet); particleMesh.animator = animator; animator.start(); _view.scene.addChild(particleMesh); } /** * Initialiser function for particle properties. It's invoked for every particle. */ private function initParticleParam(prop:ParticleProperties):void { prop.startTime = prop.index * 0.005; prop.duration = 10; prop.delay = 5; //calculate the original position of every particle. var percent:Number = prop.index / prop.total; var r:Number = percent * 1000; var x:Number = r*Math.cos(percent * Math.PI * 2 * 20); var z:Number = r*Math.sin(percent * Math.PI * 2 * 20); prop[ParticlePositionNode.POSITION_VECTOR3D] = new Vector3D(x, 0, z); } private function onEnterFrame(event:Event):void { if (_move) { _cameraController.panAngle = 0.3*(stage.mouseX - _lastMouseX) + _lastPanAngle; _cameraController.tiltAngle = 0.3*(stage.mouseY - _lastMouseY) + _lastTiltAngle; } _view.render(); } private function onMouseDown(event:MouseEvent):void { _lastPanAngle = _cameraController.panAngle; _lastTiltAngle = _cameraController.tiltAngle; _lastMouseX = stage.mouseX; _lastMouseY = stage.mouseY; _move = true; stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave); } private function onMouseUp(event:MouseEvent):void { _move = false; stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave); } private function onStageMouseLeave(event:Event):void { _move = false; stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave); } private function onResize(event:Event = null):void { _view.width = stage.stageWidth; _view.height = stage.stageHeight; } } }
- Away3Dライブラリを追加
http://away3d.com/download/ から SWCファイルをダウンロードします。
ダウンロードしたswcはプロジェクトにlibフォルダみたいなのを作りそこにいれておきましょう。
[File]メニューの[Project Structure]を選択します。
[Libraries]を選択して一つ隣の上にある「+」を押下します。
プルダウンが表示されるので[ActionScript/Flex]を選びます。
Away3D のswcを選択します。
どの設定に追加するか選択します。
この時、下に「〜 is not used」ってエラーメッセージが出てると追加できてないので注意
※以下の画像のようなメッセージがでたらだめ。ちゃんと選択してOKを押す。
ここまで設定したらちゃんとコンパイルできるか確認する。
- HTMLを編集する
html-templateのindex.template.htmlを編集する。
※Flash起動時の設定を変更してGPU サポートモードにする。
params.wmode = "direct"; の追加
var params = {}; params.quality = "high"; params.bgcolor = "${bgcolor}"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; params.wmode = "direct";
ここまで設定したら準備は完了、shift + F10 を押して実行する
おわり。