NEWS

2016.09.02 「Photoshopとpapervision3dでテクスチャ付3Dを作成する(4)」を更新しました。

  • Web creators

操作

Photoshopとpapervision3dでテクスチャ付3Dを作成する(4)

概要

"papervision3d"で3D描画するために必要な「Collada(DAE)」を第二回でPhotoshopから書き出したのでそのdaeファイルをFlashに読み込み3D再生します。

サンプル解説

Flashがブラウザに表示されると3Dの立方体が表示され、回転します。

Adobe Flash Player を取得

作成法

1.ActionScriptの指定
ActionScriptを設置したシンボルではなくタイムラインの1コマ目に次のように記述します。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18

19
20
21
22
23
24
25
26
27
28
29
30
31
import org.papervision3d.materials.*;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.parsers.DAE;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.view.*;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;

var viewport:Viewport3D = new Viewport3D( 350, 250, true, true );
addChild( viewport );

var renderer:BasicRenderEngine = new BasicRenderEngine();
var scene:Scene3D = new Scene3D();

var camera:Camera3D = new Camera3D();

var materials:MaterialsList = new MaterialsList
( { all:new WireframeMaterial( 0xFF0000 ) } );

var object:DAE = new DAE ();
object.load( "01.dae", materials );

scene.addChild( object );

addEventListener( Event.ENTER_FRAME, 
 function():void {
  object.pitch(1);
  object.yaw(1);
  renderer.renderScene( scene , camera, viewport );
 }
);

解説

ActionScriptの1行目から8行目で"papervision3d"のクラスを呼み込んでいます。
3D描画するためには「scene」「camera,」「viewport」の3つの要素が必要となります。
今回はPhotoshopで指定したテクスチャは適用せず、形状を確認するために18行目のようにテクスチャは白色で指定しています。
21行目にPhotoshopから書き出したdaeファイルを指定しています。インターネット上で公開する場合にはこのswfファイルの他にdaeファイルもアップロードしなければなりません。

ページ上部へ