Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | import React from 'react';
import { action } from '@storybook/addon-actions';
import { Story } from '@storybook/react';
import { AnnotationProps } from '../components/VirtualWalkthrough/Annotation';
import Application from '../components/VirtualWalkthrough/Application';
import { SplatControlsStrings } from '../components/VirtualWalkthrough/SplatControls';
import VirtualWalkthroughViewer, {
VirtualWalkthroughViewerProps,
} from '../components/VirtualWalkthrough/VirtualWalkthroughViewer';
export default {
title: 'VirtualWalkthroughViewer',
component: VirtualWalkthroughViewer,
argTypes: {
// Exposed as an editable control so a splat can be loaded live without
// rebuilding. Defaults to a remote hosted .sog/.ply URL; paste your own to
// swap scenes.
splatSrc: { control: 'text' },
},
};
// Remote hosted Gaussian-splat scene. No splat asset is bundled in this repo,
// so the viewer fetches one over the network at story-view time.
const DEFAULT_SPLAT_SRC =
'https://dl.dropboxusercontent.com/scl/fi/qc98eudfcnsdvmfgtjryf/7154.sog?rlkey=170i5e1hdwi7iu3i0cnm0afbu&st=9bqpkpph&raw=1';
const sampleStrings: SplatControlsStrings = {
addAnnotation: 'Add annotation',
deselectAnnotation: 'Deselect annotation',
deleteAnnotation: 'Delete annotation',
ar: 'AR',
vr: 'VR',
edit: 'Edit',
freeFly: 'Free fly',
boundedFly: 'Bounded fly',
cancel: 'Cancel',
save: 'Save',
controlsInfoPane: {
controls: 'Controls',
annotations: 'Annotations',
autoRotate: 'Auto rotate',
orbit: 'Orbit',
leftMouse: 'Left mouse',
touchDrag: 'Touch drag',
pan: 'Pan',
middleMouse: 'Middle mouse',
swipe: 'Swipe',
look: 'Look',
rightMouse: 'Right mouse',
zoom: 'Zoom',
mouseWheel: 'Mouse wheel',
pinch: 'Pinch',
fly: 'Fly',
arrowKeys: 'Arrow keys',
flyFaster: 'Fly faster',
shift: 'Shift',
flySlower: 'Fly slower',
ctrl: 'Ctrl',
resetCamera: 'Reset camera',
},
cameraInfo: {
cameraInfo: 'Camera info',
cameraPosition: 'Position',
cameraFocusPoint: 'Focus point',
},
annotationEditPane: {
editAnnotation: 'Edit annotation',
title: 'Title',
titleTooltip: 'A short name for this annotation',
description: 'Description',
descriptionTooltip: 'Details shown when the annotation is opened',
label: 'Label',
labelTooltip: 'Optional short label shown on the hotspot',
},
};
const sampleAnnotations: AnnotationProps[] = [
{
position: [0.1, 0.05, 0],
title: 'Mangrove nursery',
bodyText:
'Seedlings raised here are transplanted along the coastline to restore the mangrove belt that protects the village from storm surge.',
},
{
position: [-0.4, 0.1, -0.3],
title: 'Monitoring station',
bodyText: 'Sensors here track soil moisture and canopy growth over time.',
},
];
// The viewer renders PlayCanvas scene-graph elements and calls useApp(), so it
// must be mounted inside the PlayCanvas <Application> (which provides the WebGL
// canvas). The story runs in Storybook's real browser, so WebGL works as it
// does in the consuming app.
const Template: Story<Partial<VirtualWalkthroughViewerProps>> = (args) => (
<div style={{ position: 'relative', width: '95%', height: '100%', overflow: 'hidden', borderRadius: 8 }}>
<Application style={{ width: '100%', height: '100%' }}>
<VirtualWalkthroughViewer
splatSrc={DEFAULT_SPLAT_SRC}
annotations={sampleAnnotations}
onSaveAnnotations={action('onSaveAnnotations')}
strings={sampleStrings}
editable
showFreeFly
skyColor={'#4286DC'}
groundColor={'#98932E'}
groundPlane={[
[-0.15, -0.1, 0],
[0.8, -0.1, -0.1],
[-0.3, -0.1, -1],
]}
sceneBounds={{ x: 0, y: -0.1, z: -0.1, m: 1 }}
averageCameraHeight={0.2}
scaleFactor={15}
{...args}
/>
</Application>
</div>
);
export const Default = Template.bind({});
Default.args = {
splatSrc: DEFAULT_SPLAT_SRC,
};
|