-
Notifications
You must be signed in to change notification settings - Fork 720
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into fix/stats-gl-props
- Loading branch information
Showing
11 changed files
with
295 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import * as THREE from 'three' | ||
| import * as React from 'react' | ||
| import { Suspense } from 'react' | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
|
|
||
| import { Setup } from '../Setup' | ||
|
|
||
| import { Plane, ScreenVideoTexture } from '../../src' | ||
|
|
||
| export default { | ||
| title: 'Misc/ScreenVideoTexture', | ||
| component: ScreenVideoTexture, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <Setup> | ||
| <Story /> | ||
| </Setup> | ||
| ), | ||
| ], | ||
| } satisfies Meta<typeof ScreenVideoTexture> | ||
|
|
||
| type Story = StoryObj<typeof ScreenVideoTexture> | ||
|
|
||
| function ScreenVideoTextureScene(props: React.ComponentProps<typeof ScreenVideoTexture>) { | ||
| return ( | ||
| <Plane args={[4, 2.25]}> | ||
| <Suspense fallback={<meshBasicMaterial color="gray" />}> | ||
| <ScreenVideoTexture {...props}> | ||
| {(texture) => <meshBasicMaterial side={THREE.DoubleSide} map={texture} toneMapped={false} />} | ||
| </ScreenVideoTexture> | ||
| </Suspense> | ||
| </Plane> | ||
| ) | ||
| } | ||
|
|
||
| export const ScreenVideoTextureSt = { | ||
| render: (args) => <ScreenVideoTextureScene {...args} />, | ||
| name: 'Default', | ||
| } satisfies Story |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import * as THREE from 'three' | ||
| import * as React from 'react' | ||
| import { Suspense } from 'react' | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
|
|
||
| import { Setup } from '../Setup' | ||
|
|
||
| import { Plane, WebcamVideoTexture } from '../../src' | ||
|
|
||
| export default { | ||
| title: 'Misc/WebcamVideoTexture', | ||
| component: WebcamVideoTexture, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <Setup> | ||
| <Story /> | ||
| </Setup> | ||
| ), | ||
| ], | ||
| } satisfies Meta<typeof WebcamVideoTexture> | ||
|
|
||
| type Story = StoryObj<typeof WebcamVideoTexture> | ||
|
|
||
| function WebcamVideoTextureScene(props: React.ComponentProps<typeof WebcamVideoTexture>) { | ||
| return ( | ||
| <Plane args={[4, 2.25]}> | ||
| <Suspense fallback={<meshBasicMaterial color="gray" />}> | ||
| <WebcamVideoTexture {...props}> | ||
| {(texture) => <meshBasicMaterial side={THREE.DoubleSide} map={texture} toneMapped={false} />} | ||
| </WebcamVideoTexture> | ||
| </Suspense> | ||
| </Plane> | ||
| ) | ||
| } | ||
|
|
||
| export const WebcamVideoTextureSt = { | ||
| render: (args) => <WebcamVideoTextureScene {...args} />, | ||
| name: 'Default', | ||
| } satisfies Story |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| --- | ||
| title: ScreenVideoTexture | ||
| sourcecode: src/web/ScreenVideoTexture.tsx | ||
| --- | ||
|
|
||
| [](https://drei.pmnd.rs/?path=/story/misc-screenvideotexture)  | ||
|
|
||
| <Intro>Create a video texture from [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia)</Intro> | ||
|
|
||
| ```tsx | ||
| export type ScreenVideoTextureProps = Omit<VideoTextureProps, 'src'> & { | ||
| options?: DisplayMediaStreamOptions | ||
| } | ||
| ``` | ||
| ```jsx | ||
| <ScreenVideoTexture> | ||
| {(texture) => <meshBasicMaterial map={texture} />} | ||
| ``` | ||
| or exposed via `ref`: | ||
| ```jsx | ||
| const textureRef = useRef() | ||
| <ScreenVideoTexture ref={textureRef} /> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| --- | ||
| title: WebcamVideoTexture | ||
| sourcecode: src/web/WebcamVideoTexture.tsx | ||
| --- | ||
|
|
||
| [](https://drei.pmnd.rs/?path=/story/misc-webcamvideotexture)  | ||
|
|
||
| <Intro>Create a video texture from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)</Intro> | ||
|
|
||
| ```tsx | ||
| export type WebcamVideoTextureProps = Omit<VideoTextureProps, 'src'> & { | ||
| constraints?: MediaStreamConstraints | ||
| } | ||
| ``` | ||
| ```jsx | ||
| <WebcamVideoTexture> | ||
| {(texture) => <meshBasicMaterial map={texture} />} | ||
| ``` | ||
| or exposed via `ref`: | ||
| ```jsx | ||
| const textureRef = useRef() | ||
| <WebcamVideoTexture ref={textureRef} /> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import * as React from 'react' | ||
| import { forwardRef, useEffect } from 'react' | ||
| import { suspend, clear } from 'suspend-react' | ||
| import { VideoTexture, VideoTextureProps } from '..' | ||
|
|
||
| export type ScreenVideoTextureProps = Omit<VideoTextureProps, 'src'> & { | ||
| options?: DisplayMediaStreamOptions | ||
| } | ||
|
|
||
| /** | ||
| * Create a video texture from [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) | ||
| */ | ||
| export const ScreenVideoTexture = /* @__PURE__ */ forwardRef<THREE.VideoTexture, ScreenVideoTextureProps>( | ||
| ({ options = { video: true }, ...props }, fref) => { | ||
| const mediaStream = suspend(() => navigator.mediaDevices.getDisplayMedia(options), []) | ||
|
|
||
| useEffect(() => { | ||
| return () => { | ||
| mediaStream?.getTracks().forEach((track) => track.stop()) | ||
| clear([]) | ||
| } | ||
| }, [mediaStream]) | ||
|
|
||
| return <VideoTexture ref={fref} {...props} src={mediaStream} /> | ||
| } | ||
| ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import * as React from 'react' | ||
| import { forwardRef, useEffect } from 'react' | ||
| import { suspend, clear } from 'suspend-react' | ||
| import { VideoTexture, VideoTextureProps } from '..' | ||
|
|
||
| export type WebcamVideoTextureProps = Omit<VideoTextureProps, 'src'> & { | ||
| constraints?: MediaStreamConstraints | ||
| } | ||
|
|
||
| /** | ||
| * Create a video texture from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) | ||
| */ | ||
| export const WebcamVideoTexture = /* @__PURE__ */ forwardRef<THREE.VideoTexture, WebcamVideoTextureProps>( | ||
| ( | ||
| { | ||
| constraints = { | ||
| audio: false, | ||
| video: { facingMode: 'user' }, | ||
| }, | ||
| ...props | ||
| }, | ||
| fref | ||
| ) => { | ||
| const mediaStream = suspend(() => navigator.mediaDevices.getUserMedia(constraints), []) | ||
|
|
||
| useEffect(() => { | ||
| return () => { | ||
| mediaStream?.getTracks().forEach((track) => track.stop()) | ||
| clear([]) | ||
| } | ||
| }, [mediaStream]) | ||
|
|
||
| return <VideoTexture ref={fref} {...props} src={mediaStream} /> | ||
| } | ||
| ) |
Oops, something went wrong.