ไลบรารี JavaScript สำหรับรูปแบบไฟล์ 3 มิติ

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

วิธีที่ง่ายที่สุดในการติดตั้ง three.js คือการใช้ npm โปรดใช้คำสั่งต่อไปนี้เพื่อการติดตั้งที่ราบรื่น 

npm install --save three 

สร้างฉากโดยใช้ JavaScript

ไลบรารีโอเพ่นซอร์ส three.js ได้ให้การสนับสนุนสำหรับการสร้างฉาก 3 มิติสำหรับการหมุนลูกบาศก์ภายในแอปพลิเคชัน JavaScript ของตนเอง หากต้องการแสดงสิ่งใดด้วย three.js เราจำเป็นต้องมีฉาก กล้อง และตัวแสดงภาพ คุณสามารถใช้กล้องและคุณลักษณะต่างๆ เพื่อทำให้ฉากสมบูรณ์ได้ ถัดไป คุณสามารถใช้อินสแตนซ์ตัวแสดงภาพและกำหนดขนาดที่เราต้องการให้แสดงแอปของเรา คุณสามารถรักษาความละเอียดที่ต่ำกว่าหรือสูงกว่าได้ สุดท้าย คุณเพิ่มองค์ประกอบ renderer (<canvas>) ลงในเอกสาร HTML ของคุณ คุณสามารถสร้างลูกบาศก์ได้อย่างง่ายดายโดยใช้ BoxGeometry และใช้วัสดุเพื่อระบายสี หลังจากนั้น คุณต้องมี Mesh ที่สามารถแทรกเข้าไปในฉากและเคลื่อนย้ายได้ตามความต้องการของคุณ

The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and เรนเดอร์. You can use different cameras and their attribute to complete the scene. Next, you can use a เรนเดอร์ instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the เรนเดอร์ element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a Mesh that can be inserted into the scene and moved according to your need.

The open source library three.js has provided support for creating a 3D scene for spinning a cube inside their own JavaScript application. To display anything with three.js we require a scene, camera, and renderer. You can use different cameras and their attribute to complete the scene. Next, you can use a renderer instance and set the size at which we want it to render our app. You can keep the lower or higher resolution. Lastly, you add the renderer element (<canvas>) to your HTML document. You can easily create a cube by using BoxGeometry and using the material to color it. After that, you need a ตาข่าย that can be inserted into the scene and moved according to your need.

กำลังโหลดโมเดล 3 มิติผ่าน JavaScript

ไลบรารีโอเพ่นซอร์ส three.js ช่วยให้โปรแกรมเมอร์ซอฟต์แวร์โหลดโมเดล 3 มิติภายในแอปพลิเคชันของตนเองได้โดยใช้โค้ด JavaScript เพียงไม่กี่บรรทัด โมเดล 3 มิติมีอยู่ในรูปแบบไฟล์หลายร้อยรูปแบบ ทุกรุ่นมีจุดประสงค์ที่แตกต่างกัน คุณสมบัติเบ็ดเตล็ด และความซับซ้อนที่แตกต่างกัน ขั้นแรก คุณต้องมีตัวโหลด และหลังจากนั้น คุณจะสามารถโหลดฉากได้

วาดเส้นในไดอะแกรม

ไลบรารีโอเพ่นซอร์ส three.js ได้ให้การสนับสนุนการวาดเส้นหรือวงกลมภายในแอปพลิเคชัน JavaScript ของตนเอง ในการเริ่มต้นเราต้องตั้งค่าตัวแสดงฉากและกล้อง หลังจากนั้น คุณต้องกำหนดวัสดุและสามารถใช้ LineBasicMaterial หรือ LineDashedMaterial ได้ หลังจากวัสดุ เราจะต้องใช้เรขาคณิตที่มีจุดยอด เส้นจะถูกวาดระหว่างจุดยอดแต่ละคู่ที่ต่อเนื่องกัน