ในบางครั้ง เราอยากจะสร้างรูปทรง 360 องศาขึ้นมา แต่เราจะทำได้อย่างไร ในเมื่อเราใช้โปรแกรมทำ 3d ไม่เป็น? ปัญหานี้มีทางออกครับ เพราะเราสามารถนำความรู้เกี่ยวกับการใช้ CSS และ Javascript มาประยุกต์เพื่อสร้างรูปทรงที่สามารถดูได้ 360 องศา ขึ้นมาได้ ลองมาดูวิธีทำกันเลยดีกว่าครับ
หลักการของการสร้างรูปทรง 360 องศา
หลักการของมันก็ง่ายๆ ครับ คือเราจะต้องเตรียม “ภาพ” ของวัตถุที่เราต้องการทำให้มันมี “มิติ” มาครับ สมมติว่าเราเตรียมรูปมารูปเดียว เราก็จะเห็นมุมมองของวัตถุนั้นๆ เพียงมุมมองเดียวใช่มั้ยล่ะครับ แต่ถ้าเราเตรียมมา 360 รูป แทนมุมมองของวัตถุนั้นๆ สำหรับ 360 องศาเลย เมื่อนำรูปทั้ง 360 รูปนั้น มาดูต่อเนื่องกัน ตามลำดับ เราก็จะเห็นภาพคล้ายวัตถุนั้น หมุนได้ 360 องศาครับ
บางคนอาจบ่นว่า ต้องทำตั้ง 360 รูป เลยหรือ? จริงๆ แล้วไม่จำเป็นครับ เพียงแต่ว่า ยิ่งเราทำรูปสำหรับมุมมองต่างๆ มากเท่าไร การเคลื่อนไหวของวัตถุจะยิ่งดูเนียนตามากขึ้นเท่านั้นครับ
Workshop – สร้างรูปทรง 360 องศา ด้วย jQuery
ขั้นตอนแรกให้เราดาวน์โหลดพระเอกของเรามาก่อนครับ Download j360 ซึ่งเป็น plugin ของ jQuery ที่จะทำหน้าที่สร้างรูปทรง 360 องศา ขึ้นมาจากรูปภาพที่เราได้เตรียมไว้นั่นเอง เมื่อดาวน์โหลดมาแล้ว ให้เราใส่โค้ด 2 บรรทัดนี้เข้าไปครับ
1 2 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/j360.js"></script> |
จากนั้น ให้เราสร้าง container ขึ้นมาสักอันหนึ่ง แล้วใส่รูปภาพที่เราเตรียมไว้ลงไปทั้งหมด โดยเราจะต้องเรียงลำดับของรูปให้ถูกต้องตามองศาด้วยนะครับ
1 2 3 4 5 6 | <div id="product" style="width: 640px; height: 300px; overflow: hidden;"> <img src="images/degree_0.jpg"> <img src="images/degree_90.jpg"> <img src="images/degree_180.jpg"> <img src="images/degree_270.jpg"> </div> |
ขั้นตอนสุดท้าย ให้เราเรียกใช้ j360 ที่ container #product ซึ่งเราได้ใส่รูปเอาไว้ครับ
1 2 3 4 5 | <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#product').j360(); }); </script> |
เพียงเท่านี้ เราก็ได้รูปทรง 360 องศา แบบง่ายๆ มาแล้วล่ะครับ วิธีเล่นคือ ให้เราคลิ๊กที่รูปทรงแล้วลองหมุนดู เราจะพบว่ารูปทรงจะเปลี่ยนไป ซึ่งมันก็คือรูปที่เราได้เตรียมเอาไว้นั่นเองครับ ยิ่งเราเตรียมไว้มากเท่าไร การเคลื่อนไหวก็จะดูสมจริงมากขึ้นเท่านั้นครับ
จริงๆ แล้ว ยังมี plugin ของ jQuery ที่ทำหน้าที่คล้ายๆ กับ j360 อยู่มากมายเลยล่ะครับ สำหรับรายละเอียดเพิ่มเติมของ j360 เพื่อนๆ สามารถเข้าไปอ่านได้ที่ 360 degrees product view