forked from pmndrs/drei
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ScreenSpace.stories.tsx
39 lines (34 loc) 路 917 Bytes
/
ScreenSpace.stories.tsx
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
import * as React from 'react'
import { Box, OrbitControls, Html, ScreenSpace } from '../../src'
import { Vector3 } from 'three'
import { Setup } from '../Setup'
export default {
title: 'Abstractions/ScreenSpace',
component: ScreenSpace,
decorators: [
(storyFn) => (
<Setup controls={false} cameraPosition={new Vector3(0, 0, 10)}>
{storyFn()}
</Setup>
),
],
}
export const ScreenSpaceStory = ({ depth }) => (
<>
<Box args={[1, 1, 1]}>
<meshPhysicalMaterial />
</Box>
<ScreenSpace depth={depth}>
<Box args={[0.1, 0.1, 0.1]} position={[0.5, 0.1, 0]}>
<meshPhysicalMaterial color={'blue'} />
<Html center sprite>
<div style={{ color: 'hotpink' }}>Hi i'm in screen space</div>
</Html>
</Box>
</ScreenSpace>
<OrbitControls enablePan={true} zoomSpeed={0.5} />
</>
)
ScreenSpaceStory.args = {
depth: 1,
}