GraphicalWeb Advent Calendar 2012 の 25日目の記事です。 CreateJS を構成するライブラリーの一つに、TweenJS があります。TweenJS は、アニメーションのタイムラインや tween を仕込むことができる機能を有しています。 EaselJS と TweenJS の組み合わせCreateJS を構成する EaselJS と TweenJS を組み合わせてアニメーションを実現するなら、次のようなコード (抜粋) で可能です。 createjs.Tween.get( circle, { loop: true } ) .to( { x: 300 }, 1000, createjs.Ease.quadOut ) .wait( 300 ) .to( { x: 100, y: 300 }, 1000, createjs.Ease.quadOut ) .
カメラ # PerspectiveCamera以外にOrthographicCameraがあります。 # 引数: 視野角(垂直)、描画範囲の縦横比、カメラから一番近い描画点、カメラから一番離れた描画点 @camera = new THREE.PerspectiveCamera(40, document.width / document.height, 1, 10000) # カメラの位置 @camera.position.y = 300 @camera.position.z = 1000 レンダラー(sceneの描画を行うためのオブジェクト) # WebGLRenderer以外にCanvasRenderもあります。 # 引数のオプションは下記を参照 # https://github.com/mrdoob/three.js/wiki/WebGLRenderer @renderer = new
http://mohayonao.herokuapp.com/perfume1 http://mohayonao.herokuapp.com/perfume2 (Web Audio API / Audio Data API連携バージョン) http://www.perfume-global.com で、Perfumeのモーションデータが配られているので、とりあえずJavaScriptで踊らせてみた。 3Dの処理は Three.js でやっているし、GitHubのFLASHのやつをベースにJavaScriptにするだけなので、よく分かっていなくてもできる。 Three.js -> https://github.com/mrdoob/three.js/ perfume-dev -> https://github.com/perfume-dev ただ、Flashの Matrix3D.append
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く