From 05cc43434a7d958f92f7a6b5444235df3fb1e83a Mon Sep 17 00:00:00 2001
From: Nick Fisher <nick.fisher@avinium.com>
Date: Mon, 17 Jun 2024 10:14:36 +0800
Subject: [PATCH] doc update

---
 docs/quickstart.mdx | 42 +++++++++++++++++++++++++++++++++---------
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/docs/quickstart.mdx b/docs/quickstart.mdx
index ae69e303..635dd0fc 100644
--- a/docs/quickstart.mdx
+++ b/docs/quickstart.mdx
@@ -93,6 +93,8 @@ class _MyAppState extends State<MyApp> {
         _thermionFlutterPlugin = ThermionFlutterPlugin();
         _thermionViewer = _thermionFlutterPlugin.createViewer();
     }    
+    
+    bool _loaded = false;
 
     Widget build(BuildContext context) {
         return Stack(children:[
@@ -101,20 +103,42 @@ class _MyAppState extends State<MyApp> {
                     plugin:_thermionFlutterPlugin
                 ) 
             ), 
-            Center(child:ElevatedButton(child:Text("Load"), onPressed:() { 
-                // TODO
-            }))
+            if (_loaded)
+                Center(
+                    child: ElevatedButton(
+                        child: const Text("Load"),
+                        onPressed: () async {
+                            // TODO 
+                            _loaded = true;
+                            setState(() {});
+                        }))
         ]);  
 }}
 ```
 
-5. Load a skybox and the glb asset
+5. When the button is pressed, load a skybox and the glb asset
 ```dart
-  Center(child:ElevatedButton(child:Text("Load"), onPressed:() { 
-               var viewer = await _thermionViewer;
-               await viewer.loadSkybox("assets/default_env_skybox.ktx");
-               await viewer.loadGlb("assets/cube.glb");
-    }))
+  if(_loaded)
+      Center(
+          child: ElevatedButton(
+              child: const Text("Load"),
+              onPressed: () async {
+                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));
+                await viewer.addLight(
+                    LightType.SUN, 7500, 50000, 0, 0, 0, 1, -1, -1);
+                await viewer.setRendering(true);
+                _loaded = true;
+                setState(() {});
+            }
+        )
+    )
 ```            
 
 (Note - "skybox" refers to the background (cube) image rendered behind all other elements in the scene).