เริ่มต้นใช้งาน Three.js

เกริ่นนำ

ผมได้ใช้ Three.js สำหรับการทดสอบบางส่วน และวิธีนี้ช่วยขจัดความยุ่งยากในการใช้งาน 3 มิติในเบราว์เซอร์ได้เป็นอย่างดี คุณสามารถใช้เครื่องมือดังกล่าวสร้างกล้อง วัตถุ แสง วัสดุ และอื่นๆ อีกมากมาย คุณมีตัวเลือกโหมดแสดงภาพซึ่งสามารถตัดสินใจได้ว่าต้องการให้วาดฉากโดยใช้ Canvas, WebGL หรือ SVG ของ HTML 5 หรือไม่ และเนื่องจากโปรแกรมนี้ เป็นโอเพนซอร์ส คุณจึงมีส่วนร่วมกับโครงการนี้ได้ แต่ตอนนี้ ฉันจะขอเน้นสิ่งที่ได้เรียนรู้โดยการเล่นใช้เป็นเครื่องมือ และพูดถึง ข้อมูลเบื้องต้นบางอย่างให้คุณฟัง

สำหรับความยอดเยี่ยมทั้งหมดของ Three.js บางครั้งคุณอาจพบปัญหา โดยปกติแล้วคุณจะต้องใช้เวลาค่อนข้างมากกับตัวอย่าง การทำวิศวกรรมย้อนกลับ และ (ในกรณีของฉันแน่นอน) ไปกับการค้นหาฟังก์ชันการทำงานเฉพาะและถามคำถามผ่าน GitHub เป็นครั้งคราว ในกรณีที่คุณมีข้อสงสัย ผมพบว่า Mr. doob และ AlteredQualia มีประโยชน์มากจริงๆ

1. ข้อมูลพื้นฐาน

ผมจะถือว่าคุณมีความรู้ ด้าน 3 มิติเป็นอย่างน้อย และมีความเชี่ยวชาญด้าน JavaScript ในระดับสมเหตุสมผล อย่างไรก็ดี การเรียนรู้เพียงเล็กน้อยก่อนที่จะลอง ลองเล่นกับสิ่งเหล่านี้ เพราะอาจทำให้เกิดความสับสนได้เล็กน้อย

ในโลก 3 มิติของเรา เราจะมีสิ่งต่างๆ ต่อไปนี้ ซึ่งจะแนะนำ ขั้นตอนการสร้าง

  1. ฉาก
  2. โหมดแสดงภาพ
  3. กล้อง
  4. 1 หรือ 2 (มีวัสดุ)

แน่นอนว่าคุณสามารถทำอะไรเจ๋งๆ ได้ เราหวังว่าคุณจะ ทำสิ่งนั้นและเริ่มทดลองใช้ 3 มิติในเบราว์เซอร์ของคุณ

2. การสนับสนุน

ข้อมูลเบื้องต้นเกี่ยวกับการสนับสนุนในเบราว์เซอร์ จากประสบการณ์ของผม เบราว์เซอร์ Chrome ของ Google เป็นเบราว์เซอร์ที่ดีที่สุดในแง่ของการรองรับโหมดแสดงภาพและความเร็วของเครื่องมือ JavaScript ที่ใช้งานอยู่ Chrome รองรับ Canvas, WebGL และ SVG ซึ่งเร็วมาก Firefox กลายเป็นเครื่องมือที่ 2 ที่มาพร้อมกับ การถือกำเนิดของเวอร์ชัน 4 ดูเหมือนว่าเครื่องมือ JavaScript ของ Chrome จะทำงานช้ากว่า Chrome แต่การสนับสนุนเทคโนโลยีการแสดงผลก็ยอดเยี่ยมเช่นกัน Opera และ Safari กำลังอยู่ในขั้นตอนการเพิ่มการรองรับ WebGL แต่เวอร์ชันปัจจุบันรองรับเฉพาะ Canvas เท่านั้น Internet Explorer (เวอร์ชัน 9+) รองรับการแสดงผลใน Canvas เท่านั้น และฉันไม่รู้ว่า Microsoft มีแผนจะเพิ่มความสามารถของ WebGL หรือเปล่า

3. สร้างบรรยากาศ

สมมติว่าคุณได้เลือกเบราว์เซอร์ที่รองรับเทคโนโลยีการแสดงผลทั้งหมด และคุณต้องการแสดงผลด้วย Canvas หรือ WebGL เนื่องจากเป็นตัวเลือกมาตรฐาน มากกว่า Canvas ได้รับการรองรับอย่างแพร่หลายมากกว่า WebGL แต่ควรทราบว่า WebGL ทำงานบน GPU ของการ์ดแสดงผล ซึ่งหมายความว่า CPU สามารถมุ่งเน้นไปที่งานอื่นๆ ที่ไม่มีการแสดงผลได้ เช่น ฟิสิกส์หรือการโต้ตอบของผู้ใช้ที่คุณพยายามทำ

ไม่ว่าคุณจะเลือกตัวแสดงผลแบบใด โปรดทราบว่า JavaScript จะต้องเพิ่มประสิทธิภาพ เบราว์เซอร์ 3 มิติไม่ใช่งานเบาๆ (และเป็นเรื่องที่ยอดเยี่ยมที่ทำได้ด้วยซ้ำ) ดังนั้น โปรดเข้าใจว่ามีจุดคอขวดอยู่ที่ส่วนใดในโค้ดของคุณ และนำออกหากทำได้!

และจากสมมติฐานที่ว่าคุณดาวน์โหลดและรวม 3.js ไว้ในไฟล์ HTML คุณจะใช้วิธีการสร้างฉากอย่างไร ดังนี้

// set the scene size
var WIDTH = 400,
HEIGHT = 300;

// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
                VIEW_ANGLE,
                ASPECT,
                NEAR,
                FAR );

var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

ไม่ยากเกินไปหรอกนะ

4. กำลังทำตาข่าย

เรามีฉาก กล้อง และโหมดแสดงภาพ (ผมเลือกใช้ WebGL ในโค้ดตัวอย่าง) แต่เราไม่มีอะไรให้วาด จริงๆ แล้ว Three.js จะรองรับการโหลดไฟล์มาตรฐานที่แตกต่างกัน 2-3 ประเภท ซึ่งจะดีมากหากคุณสร้างเอาต์พุตโมเดลจาก Blender, Maya, Cinema4D หรืออื่นๆ เพื่อให้ทุกอย่างง่าย (นี่แหละคือเริ่มต้นใช้งาน!) ฉันจะพูดถึงพื้นฐาน ดึกดำบรรพ์เป็นตาข่ายทรงเรขาคณิต รูปทรงพื้นฐานที่ค่อนข้างพื้นฐาน เช่น ทรงกลม เครื่องบิน ลูกบาศก์ และทรงกระบอก Three.js จะช่วยให้คุณสร้างพื้นฐานประเภทต่อไปนี้ได้อย่างง่ายดาย

// set up the sphere vars
var radius = 50, segments = 16, rings = 16;

// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),

sphereMaterial);

// add the sphere to the scene
scene.add(sphere);

โอเค แล้ววัสดุสำหรับทรงกลมล่ะ เราใช้ตัวแปร sphereMaterial ในโค้ด แต่เรายังไม่ได้กำหนดตัวแปร ก่อนอื่น เราต้องพูดถึง วัสดุอย่างละเอียดกันก่อน

5. วัสดุ

ไม่ต้องสงสัยเลยว่านี่เป็นหนึ่งในส่วนที่มีประโยชน์ที่สุดของ Three.js โดยมีวัสดุทั่วไป (และมีประโยชน์มาก) มากมายที่นำไปใช้กับ Mesh ได้ ดังนี้

  1. "พื้นฐาน" ซึ่งหมายความว่าจะแสดงเป็น "ไม่มีไฟ"
  2. แลมเบิร์ต
  3. ฟง

ยังมีอีกมากกว่านั้น แต่เพราะความเรียบง่าย เราอยากให้คุณค้นพบสิ่งเหล่านั้นด้วยตัวคุณเอง ในกรณีของ WebGL โดยเฉพาะวัสดุเหล่านี้ อาจช่วยชีวิตคุณได้ เหตุผล เพราะใน WebGL คุณต้องเขียนตัวปรับแสงเงาสำหรับทุกอย่างที่กำลังแสดงผล ตัวเฉดสีถือเป็นหัวข้อใหญ่ในตัวเอง แต่พูดสั้นๆ ก็คือเขียนด้วย GLSL (OpenGL Shader Language) ซึ่งจะบอก GPU ว่าควรมีหน้าตาเป็นอย่างไร ซึ่งหมายความว่าคุณต้องเลียนแบบการคำนวณของแสง การสะท้อน และอื่นๆ ซึ่งอาจมีความซับซ้อนอย่างรวดเร็ว ด้วย Three.js คุณไม่จําเป็นต้องทําเช่นนี้หากไม่ต้องการ เนื่องจากจะตัดปัญหาให้คุณไปได้ แต่หากต้องการเขียนเครื่องมือให้เฉดสี คุณก็ทำได้ด้วย MeshShaderMaterial ซึ่งเป็นการตั้งค่าที่ยืดหยุ่น

อย่างไรก็ตาม ตอนนี้เราจะใช้วัสดุแลมเบิร์ตกับทรงกลม

// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});

นอกจากนี้ ยังมีคุณสมบัติอื่นๆ ที่สามารถระบุได้เมื่อคุณสร้างวัสดุนอกเหนือจากสี เช่น การทำให้เรียบหรือแผนที่สภาพแวดล้อม คุณควรดูหน้า Wiki เพื่อดูคุณสมบัติต่างๆ ที่ตั้งค่าให้กับวัสดุได้ รวมถึงวัตถุใดก็ตามที่เครื่องมือจัดหาให้คุณ นอกจากนี้ threejs.org เพิ่งเปิดตัวเมื่อไม่นานมานี้ ซึ่งนำเสนอมุมมองของ API นี้ที่น่าสนใจมากขึ้น

6. ไฟพร้อม

หากคุณกำลังแสดงผลฉากในตอนนี้ คุณจะเห็นวงกลมสีแดง ถึงแม้ว่าเราจะใช้วัสดุ Lambert ก็มักจะไม่มีแสงในฉาก ดังนั้น Three.js จะเปลี่ยนกลับเป็นแสงแวดล้อมแบบเต็มซึ่งเหมือนกับการใช้แสงสีแบน ลองแก้ไขด้วยจุดแสงง่ายๆ กัน

// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

// add to the scene
scene.add(pointLight);

7. แสดงภาพ

ตอนนี้เราได้จัดเตรียมทุกอย่างให้แสดงผลแล้ว แต่จริงๆ แล้ว เราต้องให้คุณทำแบบนั้น

// draw!
renderer.render(scene, camera);

แต่คุณอาจต้องการแสดงผลมากกว่า 1 ครั้ง ดังนั้น หากคุณต้องการสร้างลูป คุณควรใช้ requestAnimationFrame ซึ่งเป็นวิธีที่ฉลาดที่สุดในการจัดการภาพเคลื่อนไหวในเบราว์เซอร์ เนื่องจากโปรแกรมยังไม่รองรับอย่างสมบูรณ์ ฉันจึงขอแนะนำให้คุณไปดู Paul Ireland's shim แทน

8. คุณสมบัติของออบเจ็กต์ทั่วไป

หากคุณใช้เวลาดูโค้ดสำหรับ Three.js คุณจะเห็นออบเจ็กต์จำนวนมาก "รับค่า" จาก Object3D นี่คือออบเจ็กต์ฐานซึ่งมีพร็อพเพอร์ตี้ที่มีประโยชน์มาก เช่น ข้อมูลตำแหน่ง การหมุน และการปรับขนาด กล่าวอย่างเจาะจงคือ 360 คือ Mesh ที่สืบทอดมาจาก Object3D โดยจะเพิ่มคุณสมบัติของตัวเองเข้าไปด้วย ซึ่งก็คือเรขาคณิตและวัสดุ เหตุใดฉันจึงพูดถึงหัวข้อเหล่านี้ คุณคงไม่อยากมีลูกกลมๆ บนหน้าจอที่ไม่มีสิ่งใดเลย และที่พักเหล่านี้ก็คุ้มค่าที่จะตรวจสอบ เนื่องจากจะช่วยให้คุณจัดการรายละเอียดที่อยู่เบื้องหลังของตาข่ายและวัสดุได้ในทันที

// sphere geometry
sphere.geometry

// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array

// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same

9. ความลับเล็กๆ น้อยๆ

เราอยากจะชี้ให้เห็นถึงเรื่องด่วนเกี่ยวกับ Getcha สำหรับ Three.js ซึ่ง ถ้าคุณแก้ไขจุดยอดมุมของตาข่าย คุณจะเห็นว่าในลูปการแสดงผล ไม่มีการเปลี่ยนแปลงใดๆ เหตุผล เพราะ Three.js (เท่าที่ผมบอกได้) จะแคชข้อมูลสำหรับ Mesh ไว้เป็นการเพิ่มประสิทธิภาพ สิ่งที่คุณต้องทำจริงๆ คือการแจ้งไปยัง Three.js ว่า มีบางอย่างเปลี่ยนแปลง เพื่อให้คำนวณข้อมูลที่ต้องใช้อีกครั้ง คุณจะดำเนินการต่อไปนี้ได้

// changes to the vertices
sphere.geometry.__dirtyVertices = true;

// changes to the normals
sphere.geometry.__dirtyNormals = true;

ยังมีอีกนะ แต่ 2 อย่างที่ฉันเห็นมีประโยชน์ที่สุด คุณควรแจ้งเฉพาะสิ่งที่มีการเปลี่ยนแปลงอย่างชัดเจนเท่านั้น เพื่อหลีกเลี่ยงการคำนวณที่ไม่จำเป็น

บทสรุป

เราหวังว่าคุณจะได้รับประโยชน์เบื้องต้นจาก Three.js ไม่มีอะไรที่จะทำให้มือของคุณสกปรกและลองทำอะไรสักอย่าง และฉันแนะนำได้ไม่มากนัก การเรียกใช้ 3D ในเบราว์เซอร์ นั้นสนุกมาก และการใช้เครื่องมืออย่าง Three.js ช่วยขจัดความยุ่งยากให้คุณและให้คุณได้สร้างสรรค์เรื่องเจ๋งๆ ขึ้นมา เราได้สรุปซอร์สโค้ดในบทความของห้องทดลองนี้แล้วเพื่อเป็นข้อมูลอ้างอิงให้คุณ ถ้าชอบข้อความไหน อย่าลืมบอกฉันทาง Twitter จะดีกว่านี้ก็ดีนะ