|
1 |
| -import {useThree} from '@react-three/fiber'; |
2 |
| -import React, {useEffect, useMemo} from 'react'; |
3 |
| -import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion'; |
4 |
| -import {VideoTexture} from 'three'; |
| 1 | +import { useThree } from "@react-three/fiber"; |
| 2 | +import React, { useEffect, useMemo } from "react"; |
| 3 | +import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion"; |
| 4 | +import { VideoTexture } from "three"; |
5 | 5 | import {
|
6 |
| - CAMERA_DISTANCE, |
7 |
| - getPhoneLayout, |
8 |
| - PHONE_CURVE_SEGMENTS, |
9 |
| - PHONE_SHININESS, |
10 |
| -} from './helpers/layout'; |
11 |
| -import {roundedRect} from './helpers/rounded-rectangle'; |
12 |
| -import {RoundedBox} from './RoundedBox'; |
| 6 | + CAMERA_DISTANCE, |
| 7 | + getPhoneLayout, |
| 8 | + PHONE_CURVE_SEGMENTS, |
| 9 | + PHONE_SHININESS, |
| 10 | +} from "./helpers/layout"; |
| 11 | +import { roundedRect } from "./helpers/rounded-rectangle"; |
| 12 | +import { RoundedBox } from "./RoundedBox"; |
13 | 13 |
|
14 | 14 | export const Phone: React.FC<{
|
15 |
| - videoTexture: VideoTexture | null; |
16 |
| - aspectRatio: number; |
17 |
| - baseScale: number; |
18 |
| - phoneColor: string; |
19 |
| -}> = ({aspectRatio, videoTexture, baseScale, phoneColor}) => { |
20 |
| - const frame = useCurrentFrame(); |
21 |
| - const {fps, durationInFrames} = useVideoConfig(); |
| 15 | + videoTexture: VideoTexture | null; |
| 16 | + aspectRatio: number; |
| 17 | + baseScale: number; |
| 18 | + phoneColor: string; |
| 19 | +}> = ({ aspectRatio, videoTexture, baseScale, phoneColor }) => { |
| 20 | + const frame = useCurrentFrame(); |
| 21 | + const { fps, durationInFrames } = useVideoConfig(); |
22 | 22 |
|
23 |
| - const layout = useMemo( |
24 |
| - () => getPhoneLayout(aspectRatio, baseScale), |
25 |
| - [aspectRatio, baseScale] |
26 |
| - ); |
| 23 | + const layout = useMemo( |
| 24 | + () => getPhoneLayout(aspectRatio, baseScale), |
| 25 | + [aspectRatio, baseScale], |
| 26 | + ); |
27 | 27 |
|
28 |
| - // Place a camera and set the distance to the object. |
29 |
| - // Then make it look at the object. |
30 |
| - const camera = useThree((state) => state.camera); |
31 |
| - useEffect(() => { |
32 |
| - camera.position.set(0, 0, CAMERA_DISTANCE); |
33 |
| - camera.near = 0.2; |
34 |
| - camera.far = Math.max(5000, CAMERA_DISTANCE * 2); |
35 |
| - camera.lookAt(0, 0, 0); |
36 |
| - }, [camera]); |
| 28 | + // Place a camera and set the distance to the object. |
| 29 | + // Then make it look at the object. |
| 30 | + const camera = useThree((state) => state.camera); |
| 31 | + useEffect(() => { |
| 32 | + camera.position.set(0, 0, CAMERA_DISTANCE); |
| 33 | + camera.near = 0.2; |
| 34 | + camera.far = Math.max(5000, CAMERA_DISTANCE * 2); |
| 35 | + camera.lookAt(0, 0, 0); |
| 36 | + }, [camera]); |
37 | 37 |
|
38 |
| - // Make the video fill the phone texture |
39 |
| - useEffect(() => { |
40 |
| - if (videoTexture) { |
41 |
| - videoTexture.repeat.y = 1 / layout.screen.height; |
42 |
| - videoTexture.repeat.x = 1 / layout.screen.width; |
43 |
| - } |
44 |
| - }, [aspectRatio, layout.screen.height, layout.screen.width, videoTexture]); |
| 38 | + // Make the video fill the phone texture |
| 39 | + useEffect(() => { |
| 40 | + if (videoTexture) { |
| 41 | + videoTexture.repeat.y = 1 / layout.screen.height; |
| 42 | + videoTexture.repeat.x = 1 / layout.screen.width; |
| 43 | + } |
| 44 | + }, [aspectRatio, layout.screen.height, layout.screen.width, videoTexture]); |
45 | 45 |
|
46 |
| - // During the whole scene, the phone is rotating. |
47 |
| - // 2 * Math.PI is a full rotation. |
48 |
| - const constantRotation = interpolate( |
49 |
| - frame, |
50 |
| - [0, durationInFrames], |
51 |
| - [0, Math.PI * 6] |
52 |
| - ); |
| 46 | + // During the whole scene, the phone is rotating. |
| 47 | + // 2 * Math.PI is a full rotation. |
| 48 | + const constantRotation = interpolate( |
| 49 | + frame, |
| 50 | + [0, durationInFrames], |
| 51 | + [0, Math.PI * 6], |
| 52 | + ); |
53 | 53 |
|
54 |
| - // When the composition starts, there is some extra |
55 |
| - // rotation and translation. |
56 |
| - const entranceAnimation = spring({ |
57 |
| - frame, |
58 |
| - fps, |
59 |
| - config: { |
60 |
| - damping: 200, |
61 |
| - mass: 3, |
62 |
| - }, |
63 |
| - }); |
| 54 | + // When the composition starts, there is some extra |
| 55 | + // rotation and translation. |
| 56 | + const entranceAnimation = spring({ |
| 57 | + frame, |
| 58 | + fps, |
| 59 | + config: { |
| 60 | + damping: 200, |
| 61 | + mass: 3, |
| 62 | + }, |
| 63 | + }); |
64 | 64 |
|
65 |
| - // Calculate the entrance rotation, |
66 |
| - // doing one full spin |
67 |
| - const entranceRotation = interpolate( |
68 |
| - entranceAnimation, |
69 |
| - [0, 1], |
70 |
| - [-Math.PI, Math.PI] |
71 |
| - ); |
| 65 | + // Calculate the entrance rotation, |
| 66 | + // doing one full spin |
| 67 | + const entranceRotation = interpolate( |
| 68 | + entranceAnimation, |
| 69 | + [0, 1], |
| 70 | + [-Math.PI, Math.PI], |
| 71 | + ); |
72 | 72 |
|
73 |
| - // Calculating the total rotation of the phone |
74 |
| - const rotateY = entranceRotation + constantRotation; |
| 73 | + // Calculating the total rotation of the phone |
| 74 | + const rotateY = entranceRotation + constantRotation; |
75 | 75 |
|
76 |
| - // Calculating the translation of the phone at the beginning. |
77 |
| - // The start position of the phone is set to 4 "units" |
78 |
| - const translateY = interpolate(entranceAnimation, [0, 1], [-4, 0]); |
| 76 | + // Calculating the translation of the phone at the beginning. |
| 77 | + // The start position of the phone is set to 4 "units" |
| 78 | + const translateY = interpolate(entranceAnimation, [0, 1], [-4, 0]); |
79 | 79 |
|
80 |
| - // Calculate a rounded rectangle for the phone screen |
81 |
| - const screenGeometry = useMemo(() => { |
82 |
| - return roundedRect({ |
83 |
| - width: layout.screen.width, |
84 |
| - height: layout.screen.height, |
85 |
| - radius: layout.screen.radius, |
86 |
| - }); |
87 |
| - }, [layout.screen.height, layout.screen.radius, layout.screen.width]); |
| 80 | + // Calculate a rounded rectangle for the phone screen |
| 81 | + const screenGeometry = useMemo(() => { |
| 82 | + return roundedRect({ |
| 83 | + width: layout.screen.width, |
| 84 | + height: layout.screen.height, |
| 85 | + radius: layout.screen.radius, |
| 86 | + }); |
| 87 | + }, [layout.screen.height, layout.screen.radius, layout.screen.width]); |
88 | 88 |
|
89 |
| - return ( |
90 |
| - <group |
91 |
| - scale={entranceAnimation} |
92 |
| - rotation={[0, rotateY, 0]} |
93 |
| - position={[0, translateY, 0]} |
94 |
| - > |
95 |
| - <RoundedBox |
96 |
| - radius={layout.phone.radius} |
97 |
| - depth={layout.phone.thickness} |
98 |
| - curveSegments={PHONE_CURVE_SEGMENTS} |
99 |
| - position={layout.phone.position} |
100 |
| - width={layout.phone.width} |
101 |
| - height={layout.phone.height} |
102 |
| - > |
103 |
| - <meshPhongMaterial color={phoneColor} shininess={PHONE_SHININESS} /> |
104 |
| - </RoundedBox> |
105 |
| - <mesh position={layout.screen.position}> |
106 |
| - <shapeGeometry args={[screenGeometry]} /> |
107 |
| - {videoTexture ? ( |
108 |
| - <meshBasicMaterial |
109 |
| - color={0xffffff} |
110 |
| - toneMapped={false} |
111 |
| - map={videoTexture} |
112 |
| - /> |
113 |
| - ) : null} |
114 |
| - </mesh> |
115 |
| - </group> |
116 |
| - ); |
| 89 | + return ( |
| 90 | + <group |
| 91 | + scale={entranceAnimation} |
| 92 | + rotation={[0, rotateY, 0]} |
| 93 | + position={[0, translateY, 0]} |
| 94 | + > |
| 95 | + <RoundedBox |
| 96 | + radius={layout.phone.radius} |
| 97 | + depth={layout.phone.thickness} |
| 98 | + curveSegments={PHONE_CURVE_SEGMENTS} |
| 99 | + position={layout.phone.position} |
| 100 | + width={layout.phone.width} |
| 101 | + height={layout.phone.height} |
| 102 | + > |
| 103 | + <meshPhongMaterial color={phoneColor} shininess={PHONE_SHININESS} /> |
| 104 | + </RoundedBox> |
| 105 | + <mesh position={layout.screen.position}> |
| 106 | + <shapeGeometry args={[screenGeometry]} /> |
| 107 | + {videoTexture ? ( |
| 108 | + <meshBasicMaterial |
| 109 | + color={0xffffff} |
| 110 | + toneMapped={false} |
| 111 | + map={videoTexture} |
| 112 | + /> |
| 113 | + ) : null} |
| 114 | + </mesh> |
| 115 | + </group> |
| 116 | + ); |
117 | 117 | };
|
0 commit comments