diff --git a/examples/src/examples/graphics/asset-viewer.tsx b/examples/src/examples/graphics/asset-viewer.tsx
index 86b0af84269..18648ff0efc 100644
--- a/examples/src/examples/graphics/asset-viewer.tsx
+++ b/examples/src/examples/graphics/asset-viewer.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 
 import * as pc from '../../../../';
-import { BindingTwoWay } from '@playcanvas/pcui';
-import { LabelGroup, SelectInput } from '@playcanvas/pcui/react';
+import { Panel, Button } from '@playcanvas/pcui/react';
 import { Observer } from '@playcanvas/observer';
 
 class AssetViewerExample {
@@ -11,16 +10,10 @@ class AssetViewerExample {
 
     controls(data: Observer) {
         return <>
-            <LabelGroup text='Asset'>
-                <SelectInput binding={new BindingTwoWay()} link={{ observer: data, path: 'selection.focusEntity' }} type='number' options={[
-                    { v: 0, t: 'lamp off' },
-                    { v: 1, t: 'lamp on' },
-                    { v: 2, t: 'dish' },
-                    { v: 3, t: 'mosquito' },
-                    { v: 4, t: 'sheen chair peacock' },
-                    { v: 5, t: 'sheen chair mango' }
-                ]} />
-            </LabelGroup>
+            <Panel headerText='Asset'>
+                <Button text='Previous' onClick={() => data.emit('previous')}/>
+                <Button text='Next' onClick={() => data.emit('next')}/>
+            </Panel>
         </>;
     }
 
@@ -60,79 +53,77 @@ class AssetViewerExample {
             app.scene.layers.remove(depthLayer);
             app.scene.layers.insertOpaque(depthLayer, 2);
 
-            app.scene.ambientLight = new pc.Color(0.0, 0.0, 0.0);
-
-
-
-            const createText = function (fontAsset: pc.Asset, message: string, x: number, y: number, z: number, rotx: number, roty: number) {
+            const createText = function (fontAsset: pc.Asset, message: string, x: number, z: number) {
                 // Create a text element-based entity
                 const text = new pc.Entity();
                 text.addComponent("element", {
                     anchor: [0.5, 0.5, 0.5, 0.5],
                     fontAsset: fontAsset,
-                    fontSize: 0.3,
+                    fontSize: 0.2,
                     pivot: [0.5, 0.5],
                     text: message,
                     type: pc.ELEMENTTYPE_TEXT
                 });
-                text.setLocalPosition(x, y, z);
-                text.setLocalEulerAngles(rotx, roty, 0);
+                text.setLocalPosition(x, -0.9, z);
+                text.setLocalEulerAngles(-90, 0, 0);
                 app.root.addChild(text);
             };
 
             app.start();
+            let currentAssetIndex = 0;
 
             const mosquito = assets.mosquito.resource.instantiateRenderEntity({
                 castShadows: true
             });
-            mosquito.setLocalScale(new pc.Vec3(15, 15, 15));
+            mosquito.setLocalScale(new pc.Vec3(25, 25, 25));
+            mosquito.setLocalPosition(0, 0.5, 0);
             app.root.addChild(mosquito);
-            createText(assets.font, "KHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission", 0, 3, 0, 0, 0);
+            createText(assets.font, "KHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission", 0, 2);
 
             // create an entity with render assets
             const dish = assets.dish.resource.instantiateRenderEntity({
                 castShadows: true
             });
-            dish.setLocalScale(new pc.Vec3(6, 6, 6));
+            dish.setLocalScale(new pc.Vec3(9, 9, 9));
             dish.setLocalPosition(-4, -0.5, 0);
             app.root.addChild(dish);
-            createText(assets.font, "KHR_materials_specular\nKHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission", -4, 3, 0, 0, 0);
+            createText(assets.font, "KHR_materials_specular\nKHR_materials_volume\nKHR_materials_ior\nKHR_materials_transmission", -4, 2);
 
             const sheen1 = assets.sheen.resource.instantiateRenderEntity({
                 castShadows: true
             });
-            sheen1.setLocalScale(new pc.Vec3(3, 3, 3));
-            sheen1.setLocalPosition(7, -1.0, 0);
+            sheen1.setLocalScale(new pc.Vec3(4, 4, 4));
+            sheen1.setLocalPosition(8, -1.0, 0);
             app.root.addChild(sheen1);
-            createText(assets.font, "Mango Velvet", 7, 0.5, 0, 0, 0);
+            createText(assets.font, "Mango Velvet", 8, 1);
 
             const sheen2 = assets.sheen.resource.instantiateRenderEntity({
                 castShadows: true
             });
-            sheen2.setLocalScale(new pc.Vec3(3, 3, 3));
+            sheen2.setLocalScale(new pc.Vec3(4, 4, 4));
             sheen2.setLocalPosition(4, -1.0, 0);
             assets.sheen.resource.applyMaterialVariant(sheen2, "Peacock Velvet");
             app.root.addChild(sheen2);
-            createText(assets.font, "KHR_materials_sheen\nKHR_materials_variants", 5, 3, 0, 0, 0);
-            createText(assets.font, "Peacock Velvet", 4, 0.5, 0, 0, 0);
+            createText(assets.font, "KHR_materials_sheen\nKHR_materials_variants", 5.5, 2);
+            createText(assets.font, "Peacock Velvet", 4, 1);
 
             const lamp = assets.lamp.resource.instantiateRenderEntity({
                 castShadows: true
             });
-            lamp.setLocalScale(new pc.Vec3(3, 3, 3));
+            lamp.setLocalScale(new pc.Vec3(5, 5, 5));
             lamp.setLocalPosition(-8, -1.0, 0);
-            createText(assets.font, "Lamp on", -8, 1.5, 0, 0, 0);
+            createText(assets.font, "Lamp on", -8, 1);
             app.root.addChild(lamp);
 
             const lamp2 = assets.lamp.resource.instantiateRenderEntity({
                 castShadows: true
             });
-            lamp2.setLocalScale(new pc.Vec3(3, 3, 3));
-            lamp2.setLocalPosition(-10, -1.0, 0);
+            lamp2.setLocalScale(new pc.Vec3(5, 5, 5));
+            lamp2.setLocalPosition(-11, -1.0, 0);
             assets.lamp.resource.applyMaterialVariant(lamp2, "Lamp off");
             app.root.addChild(lamp2);
-            createText(assets.font, "Lamp off", -10, 1.5, 0, 0, 0);
-            createText(assets.font, "KHR_materials_transmission\nKHR_materials_ior\nKHR_materials_volume\nKHR_materials_variants\nKHR_materials_clearcoat", -9, 3, 0, 0, 0);
+            createText(assets.font, "Lamp off", -11, 1);
+            createText(assets.font, "KHR_materials_transmission\nKHR_materials_ior\nKHR_materials_volume\nKHR_materials_variants\nKHR_materials_clearcoat", -9.5, 2);
 
             const assetList = [
                 lamp2, lamp, dish, mosquito, sheen2, sheen1
@@ -140,48 +131,42 @@ class AssetViewerExample {
 
             const material = new pc.StandardMaterial();
             material.diffuseMap = assets.checkerboard.resource;
-            material.diffuseMapTiling = new pc.Vec2(64, 64);
+            material.diffuseMapTiling = new pc.Vec2(16, 6);
             material.update();
             const plane = new pc.Entity();
             plane.addComponent('model', {
                 type: 'plane',
                 material: material
             });
-            plane.setLocalScale(new pc.Vec3(100, 0, 100));
+            plane.setLocalScale(new pc.Vec3(25, 0, 10));
             plane.setLocalPosition(0, -1.0, 0);
             app.root.addChild(plane);
 
             // Create an Entity with a camera component
             const camera = new pc.Entity();
             camera.addComponent("camera", {
-                clearColor: new pc.Color(0.4, 0.45, 0.5)
             });
-            camera.setLocalPosition(0, 5, 30);
+            camera.setLocalPosition(0, 55, 160);
 
             camera.camera.requestSceneColorMap(true);
             camera.addComponent("script");
             camera.script.create("orbitCamera", {
                 attributes: {
                     inertiaFactor: 0.2,
-                    focusEntity: assetList[3],
-                    distanceMin: 1,
-                    distanceMax: 400,
-                    frameOnStart: false
+                    distanceMin: 8,
+                    distanceMax: 50
                 }
             });
             camera.script.create("orbitCameraInputMouse");
             camera.script.create("orbitCameraInputTouch");
             app.root.addChild(camera);
 
-            // @ts-ignore engine-tsd
-            camera.script.orbitCamera.distance = 15.0;
-
             const directionalLight = new pc.Entity();
             directionalLight.addComponent("light", {
                 type: "directional",
                 color: pc.Color.WHITE,
                 castShadows: true,
-                intensity: 2,
+                intensity: 1,
                 shadowBias: 0.2,
                 normalOffsetBias: 0.05,
                 shadowResolution: 2048
@@ -189,10 +174,11 @@ class AssetViewerExample {
             directionalLight.setEulerAngles(45, 180, 0);
             app.root.addChild(directionalLight);
 
-
             app.scene.setSkybox(assets.helipad.resources);
             app.scene.toneMapping = pc.TONEMAP_ACES;
             app.scene.skyboxMip = 1;
+            app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, 70, 0);
+            app.scene.skyboxIntensity = 1.5;
 
             window.addEventListener("touchstart", (event) => {
                 const touch = event.touches[0];
@@ -208,19 +194,33 @@ class AssetViewerExample {
                 }
             }, false);
 
-            // handle HUD changes - update properties on the light
-            data.on('selection.focusEntity:set', (value: any) => {
-                const pos = assetList[value].getLocalPosition();
-                const newPos = new pc.Vec3(0, 2.0, 6.0).add(pos);
+            function jumpToAsset(offset: number) {
 
-                // @ts-ignore engine-tsd
+                // wrap around
+                const count = assetList.length - 1;
+                currentAssetIndex += offset;
+                if (currentAssetIndex < 0) currentAssetIndex = count;
+                if (currentAssetIndex > count) currentAssetIndex = 0;
+
+                const pos = assetList[currentAssetIndex].getLocalPosition();
+                const newPos = new pc.Vec3(0, 2.0, 6.0).add(pos);
                 camera.setLocalPosition(newPos);
 
                 // @ts-ignore engine-tsd
-                camera.script.orbitCamera.focusEntity = assetList[value];
+                camera.script.orbitCamera.focusEntity = assetList[currentAssetIndex];
+            }
+
+            // focus on mosquito
+            jumpToAsset(3);
+
+            data.on('previous', function () {
+                jumpToAsset(-1);
             });
 
-            data.set('selection.focusEntity', 3);
+            // remove light button handler
+            data.on('next', function () {
+                jumpToAsset(1);
+            });
         });
     }
 }