เริ่มต้นกับ X3DOM | Getting Started with X3DOM

“Post นี้เหมาะสำหรับผู้ที่ต้องการเริ่มศึกษา/เล่นกับ X3DOM แต่ไม่รู้จะเริ่มยังไงครับ และถ้ามีพื้นฐานภาษา X3D แล้วจะติดปีกบินได้เลย ;D”

พื้นฐานและสิ่งที่คุณควรจะมี
1. Web Browser ที่รองรับ WebGL, HTML5 (Canvas) เช่น Google Chrome, Mozilla Firefox (แนะนำให้อัพเดทเป็นเวอร์ชั่นล่าสุดครับ ใครไม่เคยอัพเลยก็อัพซะนะครับ) **ล่าสุด Opera Next Version 12 ก็รองรับ WebGL แล้วนะท่าน**
2. พื้นฐานด้าน 3D เล็กๆน้อยๆพอเขี่ยๆสะกิดได้
3. ความรู้ในภาษา JavaScript สำหรับพอเล่นกับ X3DOM Runtime API ได้ (สำหรับในเชิงลึกหลังจากนี้)
4. ความรู้ในภาษา XML เพื่อให้เข้าใจภาษา X3D ได้ง่ายยิ่งขึ้น

ปัญหา
1. สำหรับคนที่มีไฟล์ VRML (.wrl) หรือ X3D (.x3d) อยู่แล้ว อยากอัพเกรดคุณภาพชีวิต เบื่อกับการใช้ Plugin ในการเปิด Web3D แล้ว อยากมาโลดแล่นบน Web Browser แบบ Unplugin โดยใช้ WebGL แทน แต่ไม่รู้จะทำไง เขียน WebGL ตรงๆก็อาจจะยากลำบากจนท้อแท้หน่ายชีวิตกัน.. จะทำยังไง?
2. มีไฟล์จาก Maya อยู่แล้ว แนะนำให้ไปอ่านโพสเก่าผม อันนี้
3. สำหรับคนที่มีไฟล์จาก 3Ds Max (.3ds) สามารถทำได้โดยการ Import ไฟล์นั้นเข้าไปที่ Blender (ต้องมี Blender ใช้ก่อนนะครับ ดาวน์โหลดและใช้ฟรีครับ) และ Export จาก Blender มาเป็น .x3d อีกที หรือใช้ BS Contact Plugin ทำการ Export ออกมาก็ย่อมได้

หลังจากมีไฟล์ X3D แล้ว สิเฮ็ดหยังต่อ?
1. ไฟล์ที่เราต้องการคือ x3dom.js
คำถาม เอามาจากไหน?
คำตอบ ดาวน์โหลดได้จาก X3DOM
2. โหลดมาแล้ว ทำไงต่อ?
คำตอบ เรียกใช้สิคร๊าบบบ

<script type="text/javascript" src="x3dom.js"></script>

ต่อจากนั้น เราก็ประกาศ ในหน้า HTML/XHTML ของเราได้เลยครับ
เช่น (เริ่มจากใน body เลยนะครับ)

<X3D xmlns="http://www.web3d.org/specifications/x3d-namespace"  showStat="false" showLog="false" x="0px" y="0px" width="400px" height="400px">
    <Scene>
        <Viewpoint position='0 0 10' />
        <Shape>
            <Appearance>
                <Material diffuseColor='0.603 0.894 0.909' />	
            </Appearance>
            <Box DEF='box'/>
        </Shape>
    </Scene>
</X3D>

อย่างเช่นโค้ดข้างบนนั้นคือ จะได้กล่องมา 1 กล่องครับ

ทั้งหมดนี้ก็เป็นพิธีกรรมในการเริ่มต้นครับ ลองเปิด Web Browser ของคุณได้เลย จะปรากฏกล่องให้คุณหมุนเล่นแล้วแหละครับ
Welcome to Web3D World ครับ : )

สำหรับตัวอย่างอื่นๆสามารถดูได้จากทาง Website ของ X3DOM ได้โดยตรงหรือดูจากหน้า X3DOM ของผมได้เหมือนกันครับ ไม่ต่างกันครับ : )

Advertisements

2 Comments Add yours

  1. Maddykit says:

    สวัสดีค่ะ ; D
    ช่วยอธิบาย http://www.bitmanagement.de/php-bin/ViewVrml.php?url=http%3A%2F%2Fwww.bitmanagement.de%2Fdemos%2FCityShowcase%2Fshowcase.wrl&fullPage=1 ตัวนี้ให้ฟังหน่อยได้ไหมค่ะว่า ตัวนี้มีหลักการ แล้วการนำเข้า plug in บนเว็บไซต์อย่างไร ?? พอจะมีเอกสารขั้นตอนที่เป็นภาษาอังกฤษ ของตัวนี้ให้ศึกษาบ้างไหมค่ะ หรือต้องศึกษาจาก เว็บไซต์ตัวไหนบ้าง ถึงจะได้ การทำงานในลักษณะ ตัวอย่างเว็บนี้บ้างง !!

    ขอบคุณล่วงหน้าค่ะ ^^”

    1. ไม่ค่อยเข้าใจคำถามอ่ะครับ นำเข้ายังไง? Install เหรอครับ? หากเป็นอย่างนั้นก็คือการนำ Plugin ไปอยู่ในตำแหน่งที่เก็บ Plugin ซึ่งแตกต่างกันไปในแต่ละ OS ครับ โดยที่ตัว Plugin จะระบุว่า ตัว Plugin นั้นมีไว้อ่านไฟล์สกุลอะไร ซึ่ง Browser เมื่อเจอไฟล์สกุลดังกล่าวก็จะเรียก Plugin ที่อ่านสกุลไฟล์นั้นๆมาใช้งานครับ ประมาณนี้รึเปล่าครับ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s