papervision 3d library เมพๆ บน flash/flex
posted on 22 Sep 2009 09:21 by studiooo in mahnสวัสดีครับพี่น้อง
ขณะนี้กำลังเรียน stat อยู่แล้วเกิดเบื่อโลกแตกขึ้นมาเลย มานั่งเขียน entry เล่นๆ
วันนี้ข้าพเจ้าจะขอนำเสนอพี่น้องทั้งหลายเรื่อง Papervision ครับ
สินค้าที่นำมาเสนอวันนี้เป็นของแรง ที่ความจริงมันก้อแรงมานานแล้วอ่ะนะ ถ้าครัยรู็จัก ก้อลองมาดูกันว่ามันทำหยังได้มั่ง
papervision เป็น library บน flash/flex/actionscript มีอายุมาหลายขวบปีแล้ว พอตัว สิ้งที่มันทำได้คือ ช่วยให้สามารถ เขียน object 3d บน actionscript ได้อย่างงดงาม
วันนี้จะนำเสนอ ตัวปัญญาอ่อนๆให้ดูสักตัว
อย่างแรกที่คนเขียนโปรแกรมในโลก 3d ก้อคือ viewport ครับ viewport คือ...เรียกว่า canvas ละกัน มันเป็น canvas ที่เอาไว้ render ตัว 3d ลงไปนั่นเอง
ทีนี้ ใน papervision ก้อมี สิ่งนี้เช่นกัน
วิธีการใช้ library นั้นง่ายด๊ายๆ
อย่างแรกเราสร้าง Class extends BasicView ขึ้นมาก่อน อันนี้จะเป็นเหมือน กับ stage ของเราใน flash นะครับ
แต่ว่า stage ที่สามารถยัดของ 3 มิติทั้งหลายแหล่ลงไปได้อ่ะ
พอสร้าง basicview object เสร็จเราก้อ สามารถ เอา ไอ้นี่ไปยัดใน mxml / main class ของ action script / ของ flash ยังไงก้อได้อ่ะ
มาดู BasicView ก่อนนิดเนิง ตัว BasicView นี้จะมี ตัวแปร ที่สำคัญ อยู่สองสามตัว
1. camera - กล้อง...แหม่ ตรงตัวไปมั้ย แต่มันเป็นแค่นั้นจริงๆครับ โดยปกติแล้วกล้อง คือ object ที่แทนตัว เราอยุ๋ใน 3d space, มันมีความสามารถ ในการ ตั้งค่าว่าจะไปมองที่แห่งหนใด บน space นั้นๆ (ฟังก์ชั่น camera.lookAt(object_to_look_at))
2. scene - ฉาก .. แหม่ ตรงตัวอีกอ่ะแหละ scene ก้อคือ ฉากเลยครับๆ ฉากๆๆๆ คือ อยากมีอะไรก้อใส่ๆ เข้าไป เพราะฉะนั้นเวลาอยากให้มี object อะไรใน ฉาก เราก้อ call scene.addChild(new Cone()); อะไรอย่างงี้ มันก้อจะเอา cone ไปยัดให้ใน ฉาก ง่าย! แหล่ม! แจ่มสุด!!
3. viewport - อันนี้ เหมือน เลนส์ในตา เรานะครับ เราสามารถ apply filter ใส่ตาเราได้ (ใส่แว่น) อะไรอย่างงั้น นอกจากนั้น viewport เป็นส่วนที่กำหนดขนาด ของ viewing space ของเราด้วย
ลองมาดู code ง่ายๆ ไม่ปวดไต ปวดตับกันหน่อย
อันนี้เขียน view ให้มัน มี พื้นระนาบ อ่ะ
ขโมยมาจาก
http://tutorials.osbo.com/papervision3d/basicview/ (คิเกียจเขียนเอง .. จะอัพบล๊อกยังจะคิเกียจอีก ฮ่าๆๆ)
package
{
import flash.events.Event;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
public class Papervision3DBasicViewExtension extends BasicView
{
private var material :ColorMaterial;
private var object :Plane;
public function Papervision3DBasicViewExtension()
{
super(640, 480, true, true, "Target");
material = new ColorMaterial(0x000000);
material.doubleSided = true;
material.interactive = true;
object = new Plane(material);
scene.addChild(object);
object.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, handleObjectOver);
object.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, handleObjectOut);
object.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, handleObjectPress);
startRendering();
//or
//addEventListener(Event.ENTER_FRAME, handleEnterFrame);
}
override protected function onRenderTick(e:Event=null):void
//or
//private function handleEnterFrame(e:Event):void
{
object.yaw(1);
super.onRenderTick(e);
//or
//singleRender();
//or
//renderer.renderScene(scene, camera, viewport);
}
private function handleObjectOver(e:InteractiveScene3DEvent):void
{
viewport.containerSprite.buttonMode = true;
}
private function handleObjectOut(e:InteractiveScene3DEvent):void
{
viewport.containerSprite.buttonMode = false;
}
private function handleObjectPress(e:InteractiveScene3DEvent):void
{
material.fillColor = Math.random() * 0xFFFFFF;
}
}
}
พอจบ BasicView แล้ว เราก้อจะเอา class ไปยัด ตรงไหนก้อด่ะ ตามสบาย
โจบบ!
ทีนี้ อันที่เพิ่งจบไป เป็นโลกของมนุดเดินดินเค้าเขียนกัน
อยากดูของที่ พวกเทพเค้าเขียนกันมั้ย..
http://www.adobe.com/jp/events/cs3_web_edition_tour/page6.html
(ชาบูๆ พวกเมิงเป็นคนป่ะเนี้ยยยย)
