babylonjs_tutorial（BabylonJS教程）.pdf

发布时间：2022-06-30 发布人：admin 分类：说明书资料大小：6.46M 资料格式：pdf 举报版权申诉

8a190e46-4ee1-49ed-9a8c-8c91418dd5cd.pdf-第1页.png

第1页 / 共392页

8a190e46-4ee1-49ed-9a8c-8c91418dd5cd.pdf-第2页.png

第2页 / 共392页

8a190e46-4ee1-49ed-9a8c-8c91418dd5cd.pdf-第3页.png

第3页 / 共392页

8a190e46-4ee1-49ed-9a8c-8c91418dd5cd.pdf-第4页.png

第4页 / 共392页

8a190e46-4ee1-49ed-9a8c-8c91418dd5cd.pdf-第5页.png

第5页 / 共392页

8a190e46-4ee1-49ed-9a8c-8c91418dd5cd.pdf-第6页.png

第6页 / 共392页

8a190e46-4ee1-49ed-9a8c-8c91418dd5cd.pdf-第7页.png

第7页 / 共392页

8a190e46-4ee1-49ed-9a8c-8c91418dd5cd.pdf-第8页.png

第8页 / 共392页

文本预览

BabylonJS i

BabylonJS About the Tutorial BabylonJS is a javascript framework for building 3D games with HTML5 and WEBGL.It is anopen source framework and is hosted on github.The official website of BabylonJS is www.babylonJs.com. Audience This tutorial is designed for software programmers who want to learn the basics of BabylonJS and its programming concepts in simple and easy ways. This tutorial will give you enough understanding on various functionalities of BabylonJS with suitable examples. Prerequisites Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, and Document Object Model (DOM). Copyright &Disclaimer  Copyright 2018 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at contact@tutorialspoint.com i

BabylonJS Table of Contents About the Tutorial ............................................................................................................................................ i Audience ........................................................................................................................................................... i Prerequisites ..................................................................................................................................................... i Copyright &Disclaimer ...................................................................................................................................... i Table of Contents ............................................................................................................................................ ii 1. BabylonJS — Introduction ......................................................................................................................... 1 What is WebGL? .............................................................................................................................................. 1 The TypeScript ................................................................................................................................................. 1 2. BabylonJS — Environment Setup .............................................................................................................. 2 3. BabylonJS — Overview ............................................................................................................................. 3 4. BabylonJS — Basic Elements ..................................................................................................................... 5 Sample Demo 1 ............................................................................................................................................... 5 Basic Element - Box ....................................................................................................................................... 18 Basic Element - Sphere .................................................................................................................................. 20 Basic Element - Plane .................................................................................................................................... 23 Basic Element - Disc ....................................................................................................................................... 25 Basic Element - Cylinder ................................................................................................................................ 27 Basic Element - Torus .................................................................................................................................... 31 Basic Element - Knot ...................................................................................................................................... 33 Basic Element - Line Mesh ............................................................................................................................. 35 Basic Element - DashedLines Mesh ............................................................................................................... 37 Basic Element - Ribbon .................................................................................................................................. 40 Basic Element - Tube ..................................................................................................................................... 42 Basic Element - Ground ................................................................................................................................. 45 Basic Element - Ground From HeightMap ..................................................................................................... 47 Basic Element - Tiled Ground ........................................................................................................................ 51 ii

BabylonJS Basic Element - Position, Rotation and Scaling ............................................................................................. 53 Basic Element -Rotation ................................................................................................................................ 59 Basic Element - Scaling .................................................................................................................................. 62 Basic Element - Parenting .............................................................................................................................. 64 Basic Element - Environment ........................................................................................................................ 67 5. BabylonJS — Materials ........................................................................................................................... 80 Basic Material Property - Transparency ........................................................................................................ 80 Basic Material Property - Diffuse ................................................................................................................... 84 Basic Material Property - Emissive ............................................................................................................... 92 Basic Material Property - Specular .............................................................................................................. 101 Basic Material Property - Back Face Culling ................................................................................................ 104 Basic Material Property - Wireframe ........................................................................................................... 106 Basic Material Property - FresnelParameters .............................................................................................. 108 6. BabylonJS — Animations ...................................................................................................................... 112 BabylonJS - Sprites ....................................................................................................................................... 123 BabylonJS - Particles .................................................................................................................................... 133 7. BabylonJS — Cameras ........................................................................................................................... 146 FreeCamera ................................................................................................................................................. 146 ArcRotateCamera ........................................................................................................................................ 146 TouchCamera .............................................................................................................................................. 147 GamepadCamera ......................................................................................................................................... 147 DeviceOrientationCamera ........................................................................................................................... 147 FollowCamera .............................................................................................................................................. 147 VirtualJoysticksCamera ................................................................................................................................ 148 AnaglyphCamera ......................................................................................................................................... 148 VRDeviceOrientationFreeCamera ............................................................................................................... 148 WebVRFreeCamera ..................................................................................................................................... 148 8. BabylonJS — Lights ............................................................................................................................... 150 iii

BabylonJS BabylonJS - Point Light ................................................................................................................................ 150 BabylonJS -The Directional Light ................................................................................................................. 152 BabylonJS - The Spot Light ........................................................................................................................... 154 BabylonJS - The Hemispheric Light .............................................................................................................. 156 9. BabylonJS — Parametric Shapes ........................................................................................................... 159 Ribbon ......................................................................................................................................................... 159 Line .............................................................................................................................................................. 163 Tube ............................................................................................................................................................. 166 Extrusion ...................................................................................................................................................... 170 10. BabylonJS — Mesh ................................................................................................................................ 179 MeshCylinder............................................................................................................................................... 186 Ground ......................................................................................................................................................... 189 Cone............................................................................................................................................................. 190 Plane ............................................................................................................................................................ 191 Disc .............................................................................................................................................................. 191 Torus ............................................................................................................................................................ 191 Polyhedron .................................................................................................................................................. 192 IcoSphere ..................................................................................................................................................... 193 BabylonJS – Mesh Intersection and Point .................................................................................................. 200 BabylonJS – MeshPicking Collision .............................................................................................................. 204 BabylonJS – Raycasts ................................................................................................................................... 207 BabylonJS – Mesh Shadows ......................................................................................................................... 218 BabylonJS – Advanced Textures on Meshes ................................................................................................ 221 Cube Texture ............................................................................................................................................... 221 Mirror and Bump Texture ............................................................................................................................ 227 Video Texture .............................................................................................................................................. 231 BabylonJS – MeshHightlight Layer............................................................................................................... 234 BabylonJS – Morph a Mesh ......................................................................................................................... 237 iv

BabylonJS BabylonJS – Actions to Mesh ....................................................................................................................... 245 BabylonJS – Mesh AssetsManager .............................................................................................................. 250 BabylonJS – Import Mesh ............................................................................................................................ 255 BabylonJS – Mesh Morph Targets ............................................................................................................... 261 BabylonJS – Mesh Instances ........................................................................................................................ 266 BabylonJS – Mesh LOD & Instances ............................................................................................................. 270 BabylonJS – Mesh VolumemetricLightScatteringPost-process ................................................................... 273 BabylonJS – Mesh EdgesRenderer ............................................................................................................... 276 BabylonJS – Mesh BlendModes ................................................................................................................... 278 BabylonJS – Mesh SolidParticles.................................................................................................................. 283 BabylonJS – Mesh FacetData ....................................................................................................................... 288 11. BabylonJS — VectorPosition and Rotation ............................................................................................ 292 12. BabylonJS — Decals .............................................................................................................................. 311 13. BabylonJS — Curve3 ............................................................................................................................. 317 Quadratic Bezier Curve ................................................................................................................................ 317 Cubic Bezeir Curve ....................................................................................................................................... 317 HermiteSpline Curve .................................................................................................................................... 318 Catmull-Rom Spline Curve ........................................................................................................................... 318 14. BabylonJS — Dynamic Texture .............................................................................................................. 325 15. BabylonJS — Parallax Mapping ............................................................................................................. 332 16. BabylonJS — Lens Flares ....................................................................................................................... 339 17. BabylonJS — Create ScreenShot ........................................................................................................... 343 18. BabylonJS — Reflection Probes ............................................................................................................. 351 19. BabylonJS — Standard Rendering Pipeline ............................................................................................ 355 20. BabylonJS — ShaderMaterial ................................................................................................................ 361 21. BabylonJS — Bones and Skeletons ........................................................................................................ 366 22. BabylonJS — Physics Engine .................................................................................................................. 369 Parameters for physicsImposter ................................................................................................................. 374 v

23. BabylonJS — Playing Sounds and Music ................................................................................................ 375 Parameters .................................................................................................................................................. 375 Creating a Spatial 3D Sound ........................................................................................................................ 382 BabylonJS vi

1. BabylonJS — Introduction BabylonJS Babylon.js is a javascript open-source framework which is used to develop 3D applications/ video games for the web. The official website of BabylonJS is www.babylonJs.com. Using Babylon.js framework is easy for the users. It contains all the required tools to create and manage 3D objects, special effects, and sounds, etc. Babylon.js is one of the most popular 3D game engines and is widely used by developers. Being a 3D library, it provides built-in functions. These functions help you implement common 3D functionality with efficient and accurate ways. It is developed using TypeScript language based on WebGL and javascript. What is WebGL? WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web. It is designed for the purpose of rendering 2D graphics and interactive 3D graphics. It is derived from OpenGL's ES 2.0 library which is a low-level 3D API for phones and other mobile devices. WebGL provides similar functionality of ES 2.0 (Embedded Systems) and performs well on modern 3D graphics hardware. The TypeScript By definition, “TypeScript is JavaScript for application-scale development.” TypeScript is a strongly typed, object oriented, compiled language. TypeScript is both a language and a set of tools. TypeScript is a typed superset of JavaScript compiled to JavaScript. In other words, TypeScript is JavaScript plus some additional features. The goal of TypeScript language is to improve and secure the production of JavaScript code.Since BabylonJS is developed using TypScript, it is robust and secure. 1

分享到：

赞收藏

资料库

babylonjs_tutorial（BabylonJS教程）.pdf

相关推荐

游戏开发

热门标签

最新资料