Importing GLTF 3D Scenes with Camera positions and animating them in cables.gl
2.7 هزار بار بازدید -
3 سال پیش
-
GLTF files are a common
GLTF files are a common 3D scene format that allow you to translate information from your 3D packages like Blender, Cinama4D, Maya and the like.
In this tutorial, We take a look at how to export Cameras that you setup in Blender with your GLTF scene and how to reference and play around with that information inside a WebGL scene that we create in Cables.gl.
0:00 - intro
0:44 - overview of GLTF camera example
2:02 - example of camera transition animation
3:03 - rebuilding the scene from scratch
3:30 - setting up cameras in Blender
3:50 - using viewport to adjust camera position in Blender
4:54 - selecting 2nd camera for viewport positioning in Blender
5:18 - exporting GLTF scene with camera for WebGL/Cables.gl from Blender
6:05 - uploading GLTF scene to Cables.gl project
6:14 - setting up a GLTF scene in Cables.gl
6:36 - GLTF Scene operator Show Structure View
7:20 - GLTF Scene operator camera selection dropdown
7:32 - adjusting Field of View in Cables.gl to match Blender scene
9:16 - Basic setup finished
9:40 - using GLTF Camera View Matrix operator for animation
11:30 - using Multiply View Matrix operator to change camera view
12:21 - creating a camera switcher with Switch String op
13:16 - using a Trigger Counter Loop and mouse click to switch cameras
14:10 - AnimMatrix operator for animating camera switch
15:02 - animated camera setup finished
Documentation and example files for main operators covered in the tutorial:
GLTF Scene - https://cables.gl/op/Ops.Gl.GLTF.Gltf...
GLTF Camera View Matrix - https://cables.gl/op/Ops.Gl.GLTF.Gltf...
check out our other GLTF / 3D import tutorials from earlier:
3D models and cables
Download the "Maz Diorama" 3D model by biegnoncy here:
https://sketchfab.com/3d-models/maz-d...
more of Rafał Szewczyk's work:
https://www.artstation.com/biegnoncy
In this tutorial, We take a look at how to export Cameras that you setup in Blender with your GLTF scene and how to reference and play around with that information inside a WebGL scene that we create in Cables.gl.
0:00 - intro
0:44 - overview of GLTF camera example
2:02 - example of camera transition animation
3:03 - rebuilding the scene from scratch
3:30 - setting up cameras in Blender
3:50 - using viewport to adjust camera position in Blender
4:54 - selecting 2nd camera for viewport positioning in Blender
5:18 - exporting GLTF scene with camera for WebGL/Cables.gl from Blender
6:05 - uploading GLTF scene to Cables.gl project
6:14 - setting up a GLTF scene in Cables.gl
6:36 - GLTF Scene operator Show Structure View
7:20 - GLTF Scene operator camera selection dropdown
7:32 - adjusting Field of View in Cables.gl to match Blender scene
9:16 - Basic setup finished
9:40 - using GLTF Camera View Matrix operator for animation
11:30 - using Multiply View Matrix operator to change camera view
12:21 - creating a camera switcher with Switch String op
13:16 - using a Trigger Counter Loop and mouse click to switch cameras
14:10 - AnimMatrix operator for animating camera switch
15:02 - animated camera setup finished
Documentation and example files for main operators covered in the tutorial:
GLTF Scene - https://cables.gl/op/Ops.Gl.GLTF.Gltf...
GLTF Camera View Matrix - https://cables.gl/op/Ops.Gl.GLTF.Gltf...
check out our other GLTF / 3D import tutorials from earlier:
3D models and cables
Download the "Maz Diorama" 3D model by biegnoncy here:
https://sketchfab.com/3d-models/maz-d...
more of Rafał Szewczyk's work:
https://www.artstation.com/biegnoncy
3 سال پیش
در تاریخ 1400/06/19 منتشر شده
است.
2,793
بـار بازدید شده