สอน Three.js

Textures พื้นผิว กับ React Three Fiber ข้อกำหนดเบื้องต้น ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ การดีบัก UI แบบเรียลไทม์โดยใช้ LEVA  มาก่อน แก้ไขไฟล์ App.tsx เริ่มต้นด้วยโค้ดดังนี้ ติดตั้ง @react-three/drei สร้างฟังค์ชัน Terrain เพิ่มส่นประกอบ <Terrain /> สร้างโฟลเดอร์ textures ภายในโฟลเดอร์ public แล้วก๊อปปี้ไฟล์ aerial_rocks_02_diff_4k.jpg…

ดีบัก UI แบบเรียลไทม์โดยใช้ LEVA ข้อกำหนดเบื้องต้น ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ โปรแกรมแรก React Three Fiber กับ TypeScript  มาก่อน แก้ไขไฟล์ App.tsx เริ่มต้นด้วยโค้ดดังนี้ ติดตั้ง leva สร้างกล่องที่เราจะปรับแต่ง ฟังค์ชัน TweakableBox เพิ่มส่วนประกอบ <TweakableBox /> สามารถใช้ Hooks ในการควบคุมโดยตรง เพื่อสร้างคุณสมบัติที่ปรับแต่งได้ เลื่อนเพื่อเพิ่มลดขนาดกล่อง โค้ดทั้งหมด ผลลัพธ์การทำงาน ดูผ่านเว็บไซต์ได้ที่…

Camera กล้อง กับ React Three Fiber มีกล้องหลายประเภทใน Threejs ในบทความนี้ เราทดลองกับกล้อง Perspective และ Orthographic การฉายภาพเปอร์สเปคทีฟ (Perspective) ออกแบบมาเพื่อเลียนแบบวิธีที่สายตามนุษย์มองเห็น เป็นโหมดการฉายภาพที่ใช้กันทั่วไปในการแสดงฉาก 3 มิติ Canvas Canvas ของ React Three Fiber จะสร้างกล้องให้เราโดยอัตโนมัติ และตั้งกล้องค่าเริ่มต้นเป็นเปอร์สเปคทีฟ (Perspective) และค่ามาตรฐานเบื้องต้นไว้ให้เราอยู่แล้ว การฉายภาพเปอร์สเปคทีฟ…

Geometries เรขาคณิต กับ React Three Fiber เรขาคณิตถูกใช้เพื่อสร้างและกำหนดรูปร่างใน Three.js เรขาคณิตเป็นตัวอย่างของคลาส Three.Geometry รูปร่างถูกกำหนดโดย 1. Faces (หน้า) 2. Edges (ขอบ) 3. Vertices (จุดยอด) ตัวอย่างเช่น ลูกบาศก์มีจุดยอด vertices (ขอบ) หกจุดและหน้าหกด้าน ในการวาดลูกบาศก์บนเส้นตาราง เราต้องแมปตำแหน่งของจุดยอดทั้งหกก่อนแล้วต่อด้วยเส้น สิ่งนี้จะสร้างพื้นผิวของลูกบาศก์และกำหนดรูปร่าง/เรขาคณิต คุณสามารถสร้างรูปทรงอื่นๆ ได้ทุกประเภท…

โปรแกรมแรก React Three Fiber กับ TypeScript สร้างเว็บไซต์ 3 มิติของคุณเองโดยใช้ @react-three/fiber (r3f), React, TypeScript, Vite และ TailwindCSS ข้อกำหนดเบื้องต้น ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ  ฉากแรกของคุณ กับ @react-three/fiber  มาก่อน สร้างโปรเจค react-ts Vite เป็น framework library ที่ให้เราสามารถสร้างเว็บไซต์ได้ด้วย…

Shaders ด้วย @react-three/fiber Shader มันเป็น ระบบ คำนวน โทนของสี โทนของแสง ระดับของสี ในส่วนของ Shader จะรวมไปด้วย Texture(พื้นผิว) Specular(มีอีกชื่อ ว่า ไฮไลท์หรือจุด ตกกระทบของแสง ที่ กระทำต่อวัตถุ) ข้อกำหนดเบื้องต้น ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ โปรแกรมแรก React กับ Three.js มาก่อน สร้างโปรเจค React ติดตั้งโปรแกรม Visual Studio…

การทำงานกับโมเดล GLB ไฟล์ GLB คืออะไร GLB เป็นรูปแบบไฟล์ไบนารีหรือที่เรียกว่า JPEG สำหรับ 3D (JPEG for 3D, ) ซึ่งเป็นฉาก 3 มิติสำหรับรูปแบบเว็บ ดังนั้น GLB จึงเป็นตัวแทนของโมเดล 3 มิติที่บันทึกไว้ในรูปแบบการส่งข้อมูล GL (GL Transmission Format) รวมถึงรายละเอียด #d เช่น กล้อง…

การทำงานกับโมเดล GLTF ไฟล์ GLTF สามารถใช้ในการบันทึกและแบ่งปันเนื้อหาดิจิทัลระหว่างเครื่องมือสร้างแบบจำลอง 3 มิติที่แตกต่างกัน และยังได้รับการปรับปรุงให้ดีที่สุดสำหรับความเร็วในการดาวน์โหลดและเวลาโหลดที่รันไทม์ซึ่งทำให้ง่ายต่อการใช้งานในโปรแกรมสร้างแบบจำลอง 3 มิติบนมือถือและบนเว็บ ข้อกำหนดเบื้องต้น ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ Three.js ด้วย @react-three/fiber มาก่อน สร้างโปรเจค React ติดตั้งโปรแกรม Visual Studio Code และ node.js และเราจะเริ่มต้นเขียน React ด้วยการสร้างโปรเจค React ด้วยการเปิด Terminal ขึ้นมา ตั้งชื่อ App…

Three.js ด้วย @react-three/fiber pmndrs / react-three-fiber นี่คือหน้า GitHub สำหรับ Reactor Reviver, Kim Dotcom Slash P.M. และ D-R s slash reactor และ Fiber ข้อกำหนดเบื้องต้น ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ โปรแกรมแรก React กับ Three.js มาก่อน สร้างโปรเจค React ติดตั้งโปรแกรม Visual…

บทความนี้จะช่วยคุณตั้งค่า scene หรือ ฉากแรกของคุณ กับ @react-three/fiber และแนะนำแนวคิดหลักให้กับคุณ ข้อกำหนดเบื้องต้น ข้อกำหนดสำหรับบทความนี้คือ คุณควรได้ทำตามบทความ โปรแกรมแรก React กับ Three.js มาก่อน สร้างโปรเจค React ติดตั้งโปรแกรม Visual Studio Code และ node.js และเราจะเริ่มต้นเขียน React ด้วยการสร้างโปรเจค React ด้วยการเปิด Terminal ขึ้นมา ตั้งชื่อ App ให้มันว่า basic-three โดยใช้คำสั่ง ติดตั้ง…