21e Landspeeder project - three.js & cannon.js: episode 4
Learn how to make a ramp body. Learn how to make a contact material to control friction and restitution (bounciness) when materials touch. Learn how to download a free 3d GLTF model, load it into three.js using the GLTFLoader, adjust its scale, position, and rotation to a physics body, and constantly update its position and rotation to a physics body. Learn how to add a directional light.
Timestamps:
00:00 Intro/demo
00:17 Create a ramp body cannon-es.js
01:53 Create a contact material for when the player touches the ground & ramp cannon-es.js
03:11 Download free GLTF 3d model for landspeeder from sketchfab.com
04:17 Get & put GLTFLoader.js module into code editor directory
05:26 How to load a 3d GLTF model into three.js
06:58 Adjust GLTF model scale, position, and rotation three.js
07:49 Constantly update mesh position & rotation to body position & rotation three.js, cannon-es.js
08:59 Adjust body size to mesh size three.js cannon-es.js
09:48 Add directional light three.js
Resources:
Free 3d landspeeder model:
https://sketchfab.com/3d-models/star-...
GLTFLoader.js module for three.js:
https://github.com/mrdoob/three.js/bl...
Credits:
Landspeeder model:
This work is based on "Star Wars X-34 Landspeeder [FREE]" (https://sketchfab.com/3d-models/star-...) by Don42 (https://sketchfab.com/Don42) licensed under CC-BY-NC-SA-4.0 (http://creativecommons.org/licenses/b...)
Millennium Falcon model:
This work is based on "Millennium Falcon" (https://sketchfab.com/3d-models/mille...) by Johnson Martin (https://sketchfab.com/Johnson-Martin) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/b...)
