imkopkap

ครั้งแรกกับ Three.js มาทำ 3D ง่ายๆกันเถอะ

ใช้เวลา 20 นาที 20/01/2017

บทความนี้จะเป็นบทความเกี่ยวกับการสร้าง 3D Element (Three.js) บนหน้าเว็บไซต์ของเราด้วย Three.js มีตัวอย่างด้านล่างซึ่งสามารถใช้เมาส์ในการเลื่อนดู 3D Texture ได้ครับ (ถ้าไม่แสดง Element ต้อง Enable WebGL ก่อน เลื่อนดูหัวข้อต่อไปได้เลยครับ)
 

 

ตั้งค่า Browser เพื่อให้แสดงผล WebGL

เนื่องจากว่า Three.js จำเป็นต้องใช้ WebGL ในการ render ทุกสิ่งทุกอย่างที่เราได้สร้างเป็น 3D ขึ้นมาเพื่อทำการแสดงผล
 
Error เป็นเหตุ: ถ้าเราเปิด debugger ของ Browser จะพบในช่อง console ดังข้างล่าง แสดงว่าเราต้องไปทำการตั้งค่าบางอย่างให้กับ Browser

Error creating WebGL context.

แก้ปัญหาแบบนี้ได้ที่ How can I enable WebGL?
 

เตรียมเครื่องให้พร้อม

 

  1. ดาวน์โหลดไฟล์ three.js มาไว้ในเครื่อง
  2. สร้าง Project ใน localhost (มีการโหลด AJAX)
  3. ดาวน์โหลด โค้ดทั้งหมด
โครงสร้าง Project

เริ่มการเขียนโค้ด

ในบทความนี้จะเป็นการเขียนโค้ดแบบจากบนลงล่าง เมื่ออ่านเจอโค้ดสามารถเขียนเพิ่มต่อลงล่างบรรทัดถัดไปได้เลย
 
เตรียมไฟล์ที่ได้ดาวน์โหลด ให้ copy ลง Project ของเรา

  • three.js อยู่ใน [threejs/build/three.js]
  • ไฟล์ OrbitControls.js [threejs/examples/js/controls/OrbitControls.js]  ตัวนี้จะทำให้สามารถใช้เมาส์เลื่อน Element ของเราได้

Copy ทั้งสองไฟล์ไปไว้ใน Folder ที่ชื่อว่า js ใน project ของเรา
 
ลุยโค้ดกันเลย

...

<body>

<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>

<script>
   // พื้นที่เขียนโค้ด
</scipt>

</body>

...

เราจะสร้าง 3 ตัวแปรซึ่งทำให้เป็นสิ่งที่จำเป็นต่อการเขียน three.js นะครับ

  • scene สร้างขอบเขตของการแสดง Element
  • camera ใน browser ของเราจะมีแสดง Element หลายๆมุม
  • renderer คือการทำให้ scene และ camera เริ่มการแสดงในหน้าเว็บ

เราสร้างฟังก์ชัน init เพื่อให้โค้ดของเรา setting และ config กันในฟังก์ชันนี้

var WIDTH = window.innerWidth,
var HEIGHT = window.innerHeight;
var scene, camera, height;

init();

function init() {
  ...
}

สร้าง Scene

เราสามารถเรียกใช้ new THREE.Scene() ได้เลยเพื่อบอกว่า เรามี scene ที่พร้อมจะให้เราสามารถนำ Element ต่างๆ มาเพิ่มในฉากหน้าเว็บแล้วนะ

scene = new THREE.Scene();

สร้าง Camera

เราจะต้องกำหนดมุมมองตำแหน่งของ cameara เพื่อให้เราสามารถเห็นรูปร่าง Element ได้

  • PerspectiveCamera จะรับค่า parameter อยู่ 4 ตัวคือ field of view,  aspect radio, near, far
  • กำหนด position ของกล้อง
  • เพิ่มกล้องใน scene
รูปภาพจากวิดีโอ: คอร์ส Three.js ของ Udaciy
camera = new THREE.PerspectiveCamera(20, WIDTH / HEIGHT, 1, 20000);
camera.position.set(0, 0, 50);
scene.add(camera);

สร้าง Render

เพื่อให้โค้ดที่เราเขียนแสดงในหน้าเว็บในแบบที่เราต้องการ

  • เรียกใช้ WebGLRenderer
  • ต้องมีการ setSize
  • เมื่อ render เสร็จจะได้ <canvas> และเราก็ให้มันไปเพิ่มใน <body>
renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);

สร้างฟังก์ชัน resize

เราอาจจะใช้ฟังก์ชันนี้หรือไม่ก็ได้ เนื่องจากเราบางทีเราจำเป็นต้องขยายหรือย่อหน้าจอ browser ของเรา เราต้องให้ camera และ renderer ทำการอัปเดตทุกครั้ง

  • รับค่า width และ height ใหม่
  • setSize ให้กับตัว renderer ใหม่
  • กำหนดอัตราส่วน (aspect) ให้กับ camera
  • อัปเดต scene และ camera ด้วยฟังก์ชัน updateProjectionMatrix
window.addEventListener('resize', function () {
     WIDTH  = window.innerWidth,
     HEIGHT = window.innerHeight;
     renderer.setSize(WIDTH,HEIGHT);
     camera.aspect = WIDTH / HEIGHT;
     camera.updateProjectionMatrix();
});

กำหนดสีให้กับพื้นหลัง

renderer.setClearColor(0xECF0F1, 1);

สร้างไฟให้เกิดความสว่าง

เราสร้างไฟเพื่อให้ตัว Element ของเราสามารถมองเห็นข้างหน้าเป็นสีสว่างและข้างหลังเป็นสีทึบ

  • กำหนดไฟสีขาวโดยเรียก method ชื่อว่า PointLight
  • กำหนดจุดที่ไฟอยู่ด้วย set(x,y,z)
  • เพิ่มไฟใน scene
var light = new THREE.PointLight(0xffffff);
light.position.set(0,100,100);
scene.add(light);

เรียก Element มาแสดงบนหน้าเว็บ

เราจะเรียก Element ที่ได้ Export มาจากโปรแกรม blender แสดงบนหน้าเว็บโดย

  • เรียกไฟล์ Element ผ่าน JSONLoader ของ three.js
  • ต้องสร้าง material เพื่อนำไปรวมกับ geometry จะได้เป็น Mesh
  • ช่วง Material เราสามารถกำหนดสีอะไรได้ตามใจชอบ
  • ตัว Mesh คือ Object ที่เราต้องแสดงบนหน้าเว็บ
  • เพิ่ม mesh ใน scene
var loader = new THREE.JSONLoader();
loader.load('model/kopkap.json', function(geometry) {
     var material = new THREE.MeshLambertMaterial({color: 0xC0392B});
     mesh = new THREE.Mesh(geometry, material);
     scene.add(mesh);
});

ทำให้เราใช้เมาส์เลื่อนมุมกล้องได้

controls = new THREE.OrbitControls(camera, renderer.domElement);

สร้างฟังก์ชัน animate ทำการแสดงผลออกหน้าเว็บไซต์

เราใช้ requestAnimationFrame ทำให้หน้าเว็บของเราเล่น animation  ได้อยากไหลลื่นมากขึ้น ซึ่งฟังก์ชัน animate จะโหลดใหม่ทุกๆครั้ง (24 Fps)

function animate () {
     requestAnimationFrame(animate);

     renderer.render(scene,  camera);
     controls.update();
}

หน้าเว็บของเราก็จะปรากฎ​ Element และยังสามารถใช้เมาส์เลื่อนมุมกล้องดูรอบๆตัว Element ได้ โหลด Full Code
 
เนื้อหาเพิ่มเติม: Tutorial of Three.js, Interactive 3D Graphics

บันทึกแนะนำ