Skip to content
This repository was archived by the owner on Jun 24, 2023. It is now read-only.

Commit 50b1c30

Browse files
nksarafnksaraf
committed
Merge branch 'remotion' into roots
2 parents b0c59ca + 38ee168 commit 50b1c30

File tree

112 files changed

+57870
-2836
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

112 files changed

+57870
-2836
lines changed

‎examples/example/src/demos/ResetProps.tsx

+84-82
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,99 @@
1-
import * as THREE from 'three'
2-
import React, { useEffect, useState, useRef } from 'react'
3-
import { Canvas, useThree, useFrame } from '@react-three/fiber'
4-
import { OrbitControls } from '@react-three/drei'
1+
import { OrbitControls } from "@react-three/drei";
2+
import { Canvas, useFrame, useThree } from "@react-three/fiber";
3+
import React, { useEffect, useRef, useState } from "react";
4+
import * as THREE from "three";
55

66
function AdaptivePixelRatio() {
7-
const gl = useThree((state) => state.gl)
8-
const current = useThree((state) => state.performance.current)
9-
const initialDpr = useThree((state) => state.viewport.initialDpr)
10-
const setDpr = useThree((state) => state.setDpr)
11-
// Restore initial pixelratio on unmount
12-
useEffect(() => {
13-
const domElement = gl.domElement
14-
return () => {
15-
setDpr(initialDpr)
16-
domElement.style.imageRendering = 'auto'
17-
}
18-
}, [])
19-
// Set adaptive pixelratio
20-
useEffect(() => {
21-
setDpr(current * initialDpr)
22-
gl.domElement.style.imageRendering = current === 1 ? 'auto' : 'pixelated'
23-
}, [current])
24-
return null
7+
const gl = useThree(state => state.gl);
8+
const current = useThree(state => state.performance.current);
9+
const initialDpr = useThree(state => state.viewport.initialDpr);
10+
const setDpr = useThree(state => state.setDpr);
11+
12+
// Restore initial pixelratio on unmount
13+
useEffect(() => {
14+
const domElement = gl.domElement;
15+
16+
return () => {
17+
setDpr(initialDpr);
18+
domElement.style.imageRendering = "auto";
19+
};
20+
}, []);
21+
22+
// Set adaptive pixelratio
23+
useEffect(() => {
24+
setDpr(current * initialDpr);
25+
gl.domElement.style.imageRendering = current === 1 ? "auto" : "pixelated";
26+
}, [current]);
27+
28+
return null;
2529
}
2630

2731
function AdaptiveEvents() {
28-
const get = useThree((state) => state.get)
29-
const current = useThree((state) => state.performance.current)
30-
useEffect(() => {
31-
const enabled = get().events.enabled
32-
return () => void (get().events.enabled = enabled)
33-
}, [])
34-
useEffect(() => void (get().events.enabled = current === 1), [current])
35-
return null
32+
const get = useThree(state => state.get);
33+
const current = useThree(state => state.performance.current);
34+
35+
useEffect(() => {
36+
const enabled = get().events.enabled;
37+
return () => void (get().events.enabled = enabled);
38+
}, []);
39+
40+
useEffect(() => void (get().events.enabled = current === 1), [current]);
41+
return null;
3642
}
3743

3844
function Scene() {
39-
const group = useRef<THREE.Group>(null!)
40-
const [showCube, setShowCube] = useState(false)
41-
const [hovered, setHovered] = useState(false)
42-
const [color, setColor] = useState('pink')
45+
const group = useRef<THREE.Group>(null!);
46+
const [showCube, setShowCube] = useState(false);
47+
const [hovered, setHovered] = useState(false);
48+
const [color, setColor] = useState("pink");
4349

44-
useEffect(() => {
45-
const interval = setInterval(() => setShowCube((showCube) => !showCube), 1000)
46-
return () => clearInterval(interval)
47-
}, [])
50+
useEffect(() => {
51+
const interval = setInterval(() => setShowCube(showCube => !showCube), 1000);
52+
return () => clearInterval(interval);
53+
}, []);
4854

49-
useFrame(({ clock }) => group.current?.rotation.set(Math.sin(clock.elapsedTime), 0, 0))
55+
useFrame((
56+
{
57+
clock
58+
}
59+
) => group.current?.rotation.set(Math.sin(clock.elapsedTime), 0, 0));
5060

51-
return (
52-
<>
53-
<ambientLight intensity={0.5} />
54-
<pointLight position={[10, 10, 10]} intensity={2} />
55-
<pointLight position={[-10, -10, -10]} color="red" intensity={4} />
56-
57-
<mesh
58-
scale={hovered ? 1.25 : 1}
59-
onPointerOver={() => setHovered(true)}
60-
onPointerOut={() => setHovered(false)}
61-
onClick={() => setColor(color === 'pink' ? 'peachpuff' : 'pink')}>
62-
<sphereGeometry args={[0.5, 32, 32]} />
63-
<meshStandardMaterial color={showCube ? 'white' : 'red'} />
64-
</mesh>
65-
<group ref={group}>
66-
{showCube ? (
67-
<mesh position={[1.5, 0, 0]}>
68-
<boxGeometry args={[1, 1]} />
69-
<meshNormalMaterial transparent opacity={0.5} />
70-
</mesh>
71-
) : (
72-
<mesh>
73-
<icosahedronGeometry args={[1]} />
74-
<meshStandardMaterial color="orange" transparent opacity={0.5} />
75-
</mesh>
76-
)}
77-
<mesh position={[-2, -2, 0]}>
78-
<sphereGeometry args={[0.2, 32, 32]} />
79-
<meshPhongMaterial>
80-
{showCube ? <color attach="color" args={[0, 0, 1]} /> : <color attach="color" args={[1, 0, 0]} />}
81-
</meshPhongMaterial>
61+
return (<>
62+
<ambientLight intensity={0.5} />
63+
<pointLight position={[10, 10, 10]} intensity={2.2} />
64+
<pointLight position={[-10, -10, -10]} color="rgb(137, 48, 48)" intensity={6.6} />
65+
<mesh scale={hovered ? 1.25 : 1} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} onClick={() => setColor(color === "pink" ? "peachpuff" : "pink")}>
66+
<sphereGeometry args={[0.5, 32, 32]} />
67+
<meshStandardMaterial color={showCube ? "white" : "red"} />
8268
</mesh>
83-
</group>
84-
<OrbitControls regress />
85-
<AdaptivePixelRatio />
86-
<AdaptiveEvents />
87-
</>
88-
)
69+
<group ref={group}>
70+
{showCube ? (<mesh position={[1.5, 0, 0]}>
71+
<boxGeometry args={[1, 1]} />
72+
<meshNormalMaterial transparent opacity={0.5} />
73+
</mesh>) : (<mesh>
74+
<icosahedronGeometry args={[1]} />
75+
<meshStandardMaterial color="orange" transparent opacity={0.5} />
76+
</mesh>)}
77+
<mesh position={[-2, -2, 0]}>
78+
<sphereGeometry args={[0.2, 32, 32]} />
79+
<meshPhongMaterial>
80+
{showCube ? (<color attach="color" args={[0, 0, 1]} />) : (<color attach="color" args={[1, 0, 0]} />)}
81+
</meshPhongMaterial>
82+
</mesh>
83+
</group>
84+
<OrbitControls regress />
85+
<AdaptivePixelRatio />
86+
<AdaptiveEvents />
87+
</>);
8988
}
9089

9190
export default function App() {
92-
return (
93-
<Canvas dpr={[1, 2]} frameloop="always" performance={{ min: 0.1 }}>
94-
<Scene />
95-
</Canvas>
96-
)
97-
}
91+
return (<Canvas
92+
dpr={[1, 2]}
93+
frameloop="always"
94+
performance={{
95+
min: 0.1
96+
}}>
97+
<Scene />
98+
</Canvas>);
99+
}

‎examples/kitchen-sink/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@react-three/drei": "^9.46.4",
1919
"@react-three/editor": "workspace:*",
2020
"@react-three/fiber": "^8.9.1",
21-
"@types/three": "^0.135.0",
21+
"@types/three": "^0.147.0",
2222
"leva": "^0.9.34",
2323
"react": "18.2.0",
2424
"react-dom": "18.2.0",

‎examples/r3f-journey-levels-level-1/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@react-three/drei": "^9.46.4",
1919
"@react-three/editor": "workspace:*",
2020
"@react-three/fiber": "^8.9.1",
21-
"@types/three": "^0.135.0",
21+
"@types/three": "^0.147.0",
2222
"leva": "^0.9.34",
2323
"react": "18.2.0",
2424
"react-dom": "18.2.0",

‎examples/remotion/.prettierrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 120,
3+
"tabWidth": 2,
4+
"useTabs": false,
5+
"semi": false,
6+
"singleQuote": false,
7+
"trailingComma": "all",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": true,
10+
"fluid": false
11+
}

‎examples/remotion/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>react-three-fiber example</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/index.tsx"></script>
12+
</body>
13+
</html>

‎examples/remotion/package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "remotion",
3+
"description": "Level 1 model from Three.js Journey course implemented with react-three-fiber",
4+
"main": "src/index.jsx",
5+
"keywords": [
6+
"react",
7+
"r3f",
8+
"three.js",
9+
"three.js journey"
10+
],
11+
"scripts": {
12+
"dev": "vite",
13+
"build": "vite build",
14+
"serve": "vite preview"
15+
},
16+
"dependencies": {
17+
"@editable-jsx/remotion": "workspace:^0.0.1",
18+
"@react-spring/three": "^9.3.2",
19+
"@react-three/drei": "^9.46.4",
20+
"@react-three/editor": "workspace:*",
21+
"@react-three/fiber": "^8.9.1",
22+
"@remotion/media-utils": "^3.3.27",
23+
"@remotion/player": "^3.3.27",
24+
"@remotion/three": "^3.3.27",
25+
"@types/three": "^0.147.0",
26+
"leva": "^0.9.34",
27+
"react": "18.2.0",
28+
"react-dom": "18.2.0",
29+
"react-scripts": "4.0.3",
30+
"remotion": "^3.3.27",
31+
"three": "0.147.0"
32+
},
33+
"devDependencies": {
34+
"@types/react": "18.0.25",
35+
"@types/react-dom": "^18.0.9",
36+
"vite": "^3.0.7"
37+
}
38+
}

0 commit comments

Comments
 (0)