202 lines
5.8 KiB
Plaintext
202 lines
5.8 KiB
Plaintext
## Quickstart (Flutter)
|
||
|
||
> You can find the entire project below in the [examples/flutter/quickstart](examples/flutter/quickstart) folder of the repository.
|
||
|
||
1. Switch to Flutter master channel, create a new project, then add `thermion_flutter` as a dependency
|
||
|
||
```bash
|
||
$ flutter channel master
|
||
$ flutter config --enable-native-assets
|
||
$ flutter create thermion_sample_project && cd thermion_sample_project
|
||
$ flutter pub add thermion_flutter
|
||
```
|
||
|
||
2. If running on MacOS, change the minimum deployment target to OSX 13
|
||
|
||
<Accordion title="Click to expand MacOS instructions">
|
||
|
||
In `macos/Podfile`, make sure the `platform` entry refers to `13.0`.
|
||
```
|
||
platform :osx, '13.0'
|
||
```
|
||
|
||
Then open XCode:
|
||
```
|
||
open macos/Runner.xcworkspace
|
||
```
|
||
|
||
and change the minimum deployment target to 13.0:
|
||
|
||
|
||
|
||
</Accordion>
|
||
|
||
2. Add a folder containing your assets (glTF model + skybox ktx) to your `pubspec.yaml` asset list
|
||
|
||
```yaml
|
||
...
|
||
flutter
|
||
uses-material-design: true
|
||
assets:
|
||
- assets/
|
||
```
|
||
|
||
3. Create an instance of `ThermionFlutterPlugin` in your app.
|
||
|
||
```dart
|
||
|
||
class _MyAppState extends State<MyApp> {
|
||
late ThermionFlutterPlugin _thermionFlutterPlugin;
|
||
late Future<ThermionViewer> _thermionViewer;
|
||
void initState() {
|
||
_thermionFlutterPlugin = ThermionFlutterPlugin();
|
||
_thermionViewer = _thermionFlutterPlugin.createViewer();
|
||
}
|
||
}
|
||
|
||
```
|
||
|
||
|
||
4. Add a `ThermionWidget` to your widget hierarchy
|
||
|
||
```dart
|
||
|
||
class _MyAppState extends State<MyApp> {
|
||
|
||
late ThermionFlutterPlugin _thermionFlutterPlugin;
|
||
late Future<ThermionViewer> _thermionViewer;
|
||
void initState() {
|
||
_thermionFlutterPlugin = ThermionFlutterPlugin();
|
||
_thermionViewer = _thermionFlutterPlugin.initialize();
|
||
}
|
||
|
||
Widget build(BuildContext context) {
|
||
return Stack(children:[
|
||
Positioned.fill(
|
||
child:ThermionWidget(
|
||
plugin:_thermionFlutterPlugin
|
||
)
|
||
)
|
||
]);
|
||
}
|
||
}
|
||
|
||
```
|
||
|
||
4. Add a button to load the model when pressed
|
||
|
||
```dart
|
||
|
||
...
|
||
|
||
class _MyAppState extends State<MyApp> {
|
||
|
||
...
|
||
|
||
bool _loaded = false;
|
||
|
||
Widget build(BuildContext context) {
|
||
return Stack(children:[
|
||
Positioned.fill(
|
||
child:ThermionWidget(
|
||
plugin:_thermionFlutterPlugin
|
||
)
|
||
),
|
||
if (!_loaded)
|
||
Center(
|
||
child: ElevatedButton(
|
||
child: const Text("Load"),
|
||
onPressed: () async {
|
||
// TODO
|
||
_loaded = true;
|
||
setState(() {});
|
||
}))
|
||
]);
|
||
}}
|
||
```
|
||
|
||
5. When the button is pressed, load a skybox, lighting and the glb asset
|
||
|
||
You will need to import the `dart:math` and `package:vector_math` libraries.
|
||
|
||
```dart
|
||
import 'package:vector_math/vector_math_64.dart' as v;
|
||
import 'dart:math';
|
||
|
||
...
|
||
|
||
class _MyAppState extends State<MyApp> {
|
||
|
||
...
|
||
|
||
Widget build(BuildContext context) {
|
||
return Stack(children:[
|
||
...
|
||
if(!_loaded)
|
||
Center(
|
||
child: ElevatedButton(
|
||
child: const Text("Load"),
|
||
onPressed: () async {
|
||
var viewer = await _thermionViewer;
|
||
await viewer.loadIbl("assets/default_env_ibl.ktx");
|
||
await viewer.loadSkybox("assets/default_env_skybox.ktx");
|
||
await viewer.loadGlb("assets/cube.glb");
|
||
|
||
await viewer.setCameraPosition(0, 1, 10);
|
||
await viewer.setCameraRotation(v.Quaternion.axisAngle(
|
||
v.Vector3(1, 0, 0), -30 / 180 * pi) *
|
||
v.Quaternion.axisAngle(v.Vector3(0, 1, 0), 15 / 180 * pi));
|
||
await viewer.addLight(
|
||
LightType.SUN, 7500, 50000, 0, 0, 0, 1, -1, -1);
|
||
await viewer.setRendering(true);
|
||
_loaded = true;
|
||
setState(() {});
|
||
}
|
||
)
|
||
)
|
||
]);
|
||
}
|
||
}
|
||
```
|
||
|
||
Here, we've added a skybox (the background (cube) image rendered behind all other elements in the scene), image-based lighting (where an image is used to determine the direction and intensity of a light source) and a directional light (Sun).
|
||
|
||
Anything added to the scene is referred to as an "entity" (including lights and cameras).
|
||
|
||
Entities are always added to the scene at position (0,0,0).
|
||
|
||
The default scene camera is located at (0,0,0) (and is looking at -Z, or "into" the screen), so by adding a cube at (0,0,0), the camera will now be inside the cube.
|
||
|
||
We need to move the camera outside the cube so it's visible.
|
||
|
||
6. Change the camera orientation
|
||
```dart
|
||
var viewer = await _thermionViewer;
|
||
await viewer.loadSkybox("assets/default_env_skybox.ktx");
|
||
await viewer.loadGlb("assets/cube.glb");
|
||
|
||
await viewer.setCameraPosition(0, 1, 10);
|
||
await viewer.setCameraRotation(v.Quaternion.axisAngle(
|
||
v.Vector3(1, 0, 0), -30 / 180 * pi) *
|
||
v.Quaternion.axisAngle(v.Vector3(0, 1, 0), 15 / 180 * pi));
|
||
```
|
||
|
||
The cube still won't be visible until we add a light to the scene and tell Thermion to start rendering.
|
||
|
||
7. Add a light and turn rendering on
|
||
```dart
|
||
...
|
||
await viewer.addLight(
|
||
LightType.SUN, 7500, 50000, 0, 0, 0, 1, -1, -1);
|
||
await viewer.setRendering(true);
|
||
...
|
||
````
|
||
|
||
8. Run the project
|
||
```
|
||
$ flutter run -d macos
|
||
```
|
||
|
||
|
||
|
||
Your first Thermion project is complete! |