Skip to content

Commit 409dac9

Browse files
alex-shorttalex-shortt
authored
update drei, fiber, xr, and move three from peer dep to actual dep (#167)
1 parent 9e56076 commit 409dac9

File tree

36 files changed

+285
-191
lines changed

36 files changed

+285
-191
lines changed

‎examples/package.json

+3-4
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,16 @@
1010
"lint": "next lint"
1111
},
1212
"dependencies": {
13-
"@types/three": "0.139.0",
1413
"next": "12.1.6",
1514
"posthog-js": "^1.33.0",
16-
"react": "18.1.0",
17-
"react-dom": "18.1.0",
18-
"three": "^0.139.2"
15+
"react": "18.2.0",
16+
"react-dom": "18.2.0"
1917
},
2018
"devDependencies": {
2119
"@types/node": "17.0.40",
2220
"@types/react": "18.0.12",
2321
"@types/react-dom": "18.0.5",
22+
"@types/three": "0.150.1",
2423
"typescript": "4.7.3"
2524
}
2625
}

‎examples/yarn.lock

+42-22
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,25 @@
103103
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
104104
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
105105

106-
"@types/[email protected]":
107-
version "0.139.0"
108-
resolved "https://registry.yarnpkg.com/@types/three/-/three-0.139.0.tgz#69af1f0c52f8eea390f513e05478af1dd7f49e6f"
109-
integrity sha512-4V/jZhyq7Mv05coUzxL3bz8AuBOSi/1F0RY7ujisHTV0Amy/fnYJ+s7TSJ1/hXjZukSkpuFRgV+wvWUEMbsMbQ==
106+
"@types/stats.js@*":
107+
version "0.17.0"
108+
resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.0.tgz#0ed81d48e03b590c24da85540c1d952077a9fe20"
109+
integrity sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==
110+
111+
"@types/[email protected]":
112+
version "0.150.1"
113+
resolved "https://registry.yarnpkg.com/@types/three/-/three-0.150.1.tgz#32a594ac0d8452d37ad3abbb22a9496878ac6c77"
114+
integrity sha512-ZXS1M3brsfAAbTeeUEt0defPi98yWQuEyPBnvjEYY1dCEYfJnFaww0mYgRpJ9JVfmtwRxqISpVcv/g/0lMl1DQ==
115+
dependencies:
116+
"@types/stats.js" "*"
117+
"@types/webxr" "*"
118+
fflate "~0.6.9"
119+
lil-gui "~0.17.0"
120+
121+
"@types/webxr@*":
122+
version "0.5.1"
123+
resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.1.tgz#4908349419104bd476a4252d04e4c3abb496748d"
124+
integrity sha512-xlFXPfgJR5vIuDefhaHuUM9uUgvPaXB6GKdXy2gdEh8gBWQZ2ul24AJz3foUd8NNKlSTQuWYJpCb1/pL81m1KQ==
110125

111126
caniuse-lite@^1.0.30001332:
112127
version "1.0.30001346"
@@ -123,11 +138,21 @@ fflate@^0.4.1:
123138
resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
124139
integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
125140

141+
fflate@~0.6.9:
142+
version "0.6.10"
143+
resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43"
144+
integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
145+
126146
"js-tokens@^3.0.0 || ^4.0.0":
127147
version "4.0.0"
128148
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
129149
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
130150

151+
lil-gui@~0.17.0:
152+
version "0.17.0"
153+
resolved "https://registry.yarnpkg.com/lil-gui/-/lil-gui-0.17.0.tgz#b41ae55d0023fcd9185f7395a218db0f58189663"
154+
integrity sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==
155+
131156
loose-envify@^1.1.0:
132157
version "1.4.0"
133158
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -186,18 +211,18 @@ posthog-js@^1.33.0:
186211
fflate "^0.4.1"
187212
rrweb-snapshot "^1.1.14"
188213

189-
react-dom@18.1.0:
190-
version "18.1.0"
191-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
192-
integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
214+
react-dom@18.2.0:
215+
version "18.2.0"
216+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
217+
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
193218
dependencies:
194219
loose-envify "^1.1.0"
195-
scheduler "^0.22.0"
220+
scheduler "^0.23.0"
196221

197-
react@18.1.0:
198-
version "18.1.0"
199-
resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
200-
integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
222+
react@18.2.0:
223+
version "18.2.0"
224+
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
225+
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
201226
dependencies:
202227
loose-envify "^1.1.0"
203228

@@ -206,10 +231,10 @@ rrweb-snapshot@^1.1.14:
206231
resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc"
207232
integrity sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ==
208233

209-
scheduler@^0.22.0:
210-
version "0.22.0"
211-
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
212-
integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
234+
scheduler@^0.23.0:
235+
version "0.23.0"
236+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
237+
integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
213238
dependencies:
214239
loose-envify "^1.1.0"
215240

@@ -223,11 +248,6 @@ [email protected]:
223248
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.2.tgz#ff230fd593b737e9e68b630a694d460425478729"
224249
integrity sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==
225250

226-
three@^0.139.2:
227-
version "0.139.2"
228-
resolved "https://registry.yarnpkg.com/three/-/three-0.139.2.tgz#b110799a15736df673b9293e31653a4ac73648dd"
229-
integrity sha512-gV7q7QY8rogu7HLFZR9cWnOQAUedUhu2WXAnpr2kdXZP9YDKsG/0ychwQvWkZN5PlNw9mv5MoCTin6zNTXoONg==
230-
231251
[email protected]:
232252
version "4.7.3"
233253
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"

‎package.json

+7-8
Original file line numberDiff line numberDiff line change
@@ -59,20 +59,20 @@
5959
"@geckos.io/snapshot-interpolation": "^1.1.0",
6060
"@react-spring/three": "^9.4.5",
6161
"@react-three/cannon": "6.4.0",
62-
"@react-three/drei": "9.11.3",
63-
"@react-three/fiber": "^8.9.1",
64-
"@react-three/xr": "^4.0.1",
62+
"@react-three/drei": "9.65.3",
63+
"@react-three/fiber": "8.12.0",
64+
"@react-three/xr": "^5.4.1",
6565
"culori": "^0.18.2",
6666
"nipplejs": "0.8.1",
6767
"node-fetch": "^2.6.1",
6868
"peerjs": "^1.4.6",
6969
"react-device-detect": "^1.13.1",
70-
"react-error-boundary": "^3.1.4"
70+
"react-error-boundary": "^3.1.4",
71+
"three": "0.151.3"
7172
},
7273
"peerDependencies": {
7374
"react": ">=18.1",
74-
"react-dom": ">=18.1",
75-
"three": ">=0.139.2"
75+
"react-dom": ">=18.1"
7676
},
7777
"devDependencies": {
7878
"@babel/core": "^7.18.2",
@@ -86,7 +86,7 @@
8686
"@types/peerjs": "^1.1.0",
8787
"@types/react": "^18.0.12",
8888
"@types/react-dom": "^18.0.10",
89-
"@types/three": "0.139.0",
89+
"@types/three": "0.150.1",
9090
"@typescript-eslint/eslint-plugin": "^3.2.0",
9191
"@typescript-eslint/parser": "^3.2.0",
9292
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -108,7 +108,6 @@
108108
"rollup-plugin-babel": "^4.4.0",
109109
"rollup-plugin-json": "^4.0.0",
110110
"rollup-plugin-node-resolve": "^5.2.0",
111-
"three": "0.139.2",
112111
"typescript": "^4.2.4"
113112
}
114113
}

‎src/ideas/basis/VisualIdea/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export function VisualIdea(props: VisualIdeaProps) {
7272
return (
7373
<group name="spacesvr-basis-idea" {...rest}>
7474
<mesh material={mat} scale={0.2}>
75-
<sphereBufferGeometry args={[RADIUS, 48, 32]} />
75+
<sphereGeometry args={[RADIUS, 48, 32]} />
7676
</mesh>
7777
</group>
7878
);

‎src/ideas/basis/VisualWorld/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export function VisualWorld(props: VisualWorldProps) {
7878
return (
7979
<group name="spacesvr-basis-world" {...rest}>
8080
<mesh material={mat} scale={0.2}>
81-
<sphereBufferGeometry args={[RADIUS, 48, 32]} />
81+
<sphereGeometry args={[RADIUS, 48, 32]} />
8282
</mesh>
8383
</group>
8484
);

‎src/ideas/environment/Background.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { Color } from "three";
1+
import { Color, ColorRepresentation } from "three";
22
import { useLayoutEffect } from "react";
33
import { useThree } from "@react-three/fiber";
44

55
type BackgroundProps = {
6-
color: Color | string | number;
6+
color: ColorRepresentation;
77
};
88

99
export function Background(props: BackgroundProps) {

‎src/ideas/environment/Fog.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useEffect } from "react";
22
import { useThree } from "@react-three/fiber";
3-
import { Color, Fog as ThreeFog } from "three";
3+
import { Color, ColorRepresentation, Fog as ThreeFog } from "three";
44

55
type FogProps = {
6-
color?: Color | string | number;
6+
color?: ColorRepresentation;
77
near?: number;
88
far?: number;
99
};

‎src/ideas/environment/InfinitePlane.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function InfinitePlane(props: InfinitePlaneProps) {
2121

2222
return (
2323
<mesh name="spacesvr-infinite-plane" ref={ref}>
24-
<planeBufferGeometry args={size} />
24+
<planeGeometry args={size} />
2525
<meshPhongMaterial color="#660000" />
2626
</mesh>
2727
);

‎src/ideas/media/Image.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function UnsuspensedImage(props: ImageProps) {
3636
return (
3737
<group name="spacesvr-image" {...rest}>
3838
<mesh rotation={IS_COMPRESSED ? [0, Math.PI, Math.PI] : [0, 0, 0]}>
39-
<planeBufferGeometry args={[WIDTH, HEIGHT]} />
39+
<planeGeometry args={[WIDTH, HEIGHT]} />
4040
<meshBasicMaterial map={tex} side={DoubleSide} transparent />
4141
</mesh>
4242
{framed && (

‎src/ideas/media/Model.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function FallbackModel(props: ModelProps) {
4444
return (
4545
<group name="spacesvr-fallback-model" {...rest}>
4646
<mesh material={cache.mat_basic_black_wireframe}>
47-
<boxBufferGeometry args={[1, 1, 1]} />
47+
<boxGeometry args={[1, 1, 1]} />
4848
</mesh>
4949
</group>
5050
);

‎src/ideas/media/Video.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ export function Video(props: Props) {
117117
return (
118118
<group name="spacesvr-video" {...rest}>
119119
<mesh>
120-
<planeBufferGeometry args={[width, height]} />
120+
<planeGeometry args={[width, height]} />
121121
<meshBasicMaterial side={DoubleSide}>
122122
<videoTexture attach="map" args={[video]} encoding={sRGBEncoding} />
123123
</meshBasicMaterial>

‎src/ideas/mediated/Frame.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useMemo } from "react";
22
import {
3-
BoxBufferGeometry,
3+
BoxGeometry,
44
BufferGeometry,
55
Material,
66
MeshStandardMaterial,
@@ -53,21 +53,21 @@ export function Frame(props: FrameProps) {
5353
const meshOffset = 0.0005;
5454

5555
const geometry = useMemo<BufferGeometry>(() => {
56-
const backPanel = new BoxBufferGeometry(
56+
const backPanel = new BoxGeometry(
5757
width + frameWidth,
5858
height + frameWidth,
5959
frameDepth
6060
);
6161
backPanel.translate(0, 0, -frameDepth - meshOffset);
6262

63-
const topFrame = new BoxBufferGeometry(
63+
const topFrame = new BoxGeometry(
6464
width + frameWidth,
6565
borderThickness,
6666
borderDepth
6767
);
6868
topFrame.translate(0, height / 2 + frameWidth / 2 - borderThickness / 2, 0);
6969

70-
const bottomFrame = new BoxBufferGeometry(
70+
const bottomFrame = new BoxGeometry(
7171
width + frameWidth,
7272
borderThickness,
7373
borderDepth
@@ -78,7 +78,7 @@ export function Frame(props: FrameProps) {
7878
0
7979
);
8080

81-
const leftFrame = new BoxBufferGeometry(
81+
const leftFrame = new BoxGeometry(
8282
borderThickness,
8383
height + frameWidth,
8484
borderDepth
@@ -89,7 +89,7 @@ export function Frame(props: FrameProps) {
8989
0
9090
);
9191

92-
const rightFrame = new BoxBufferGeometry(
92+
const rightFrame = new BoxGeometry(
9393
borderThickness,
9494
height + frameWidth,
9595
borderDepth
@@ -116,7 +116,7 @@ export function Frame(props: FrameProps) {
116116
const backFrameGeometry = useMemo<BufferGeometry | undefined>(() => {
117117
if (!innerFrameMaterial) return undefined;
118118

119-
const backPanel = new BoxBufferGeometry(
119+
const backPanel = new BoxGeometry(
120120
width + frameWidth,
121121
height + frameWidth,
122122
frameDepth

‎src/ideas/mediated/LostFloor.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function LostFloor() {
2424
return (
2525
<group name="spacesvr-lost-floor">
2626
<mesh rotation-x={-Math.PI / 2} material={mat}>
27-
<planeBufferGeometry args={[10000, 10000, 1, 1]} />
27+
<planeGeometry args={[10000, 10000, 1, 1]} />
2828
</mesh>
2929
</group>
3030
);

‎src/ideas/modifiers/Collidable/lib/SimplifyModifier.ts

+9-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@
22
// can remove once we upgrade to three.js r142
33
// also modified to reduce to match a tri count rather than remove X number of vertices
44

5-
import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
5+
import {
6+
BufferAttribute,
7+
BufferGeometry,
8+
Float32BufferAttribute,
9+
Vector3,
10+
} from "three";
611
import { mergeVertices } from "three-stdlib";
712

813
const cb = new Vector3(),
@@ -374,7 +379,9 @@ class SimplifyModifier {
374379

375380
// add vertices
376381

377-
const positionAttribute = geometry.getAttribute("position");
382+
const positionAttribute = geometry.getAttribute(
383+
"position"
384+
) as BufferAttribute;
378385

379386
for (let i = 0; i < positionAttribute.count; i++) {
380387
const v = new Vector3().fromBufferAttribute(positionAttribute, i);

‎src/ideas/primitives/HitBox.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const HitBox = forwardRef<Mesh, HitBox>((props: HitBox, ref) => {
3030
raycaster={raycaster}
3131
>
3232
<mesh visible={visible} name="spacesvr-hitbox" ref={ref} {...rest}>
33-
<boxBufferGeometry args={args} />
33+
<boxGeometry args={args} />
3434
{visible && (
3535
<meshBasicMaterial color={color} transparent opacity={0.7} />
3636
)}

‎src/ideas/ui/Arrow.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export function Arrow(props: ArrowProps) {
2727
return (
2828
<group name="spacesvr-arrow" {...rest}>
2929
<mesh scale={0.004} material={arrowMat}>
30-
<planeBufferGeometry args={[98, 51]} />
30+
<planeGeometry args={[98, 51]} />
3131
</mesh>
3232
</group>
3333
);

‎src/ideas/ui/Button.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { animated, config, useSpring } from "@react-spring/three";
33
import { GroupProps } from "@react-three/fiber";
44
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
55
import { Idea } from "../../logic/basis/idea";
6-
import { Color, Raycaster } from "three";
6+
import { Color, ColorRepresentation, Raycaster } from "three";
77
import { RoundedBox } from "../primitives/RoundedBox";
88
import { HitBox } from "../primitives/HitBox";
99

@@ -15,7 +15,7 @@ type ButtonProps = {
1515
maxWidth?: number;
1616
width?: number;
1717
textColor?: string;
18-
color?: string;
18+
color?: ColorRepresentation;
1919
outline?: boolean;
2020
outlineColor?: string;
2121
idea?: Idea;

‎src/ideas/ui/Dialogue/ideas/Bubbles.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
InstancedMesh,
66
MathUtils,
77
Object3D,
8-
SphereBufferGeometry,
8+
SphereGeometry,
99
Vector3,
1010
} from "three";
1111
import { useIdeaMaterial } from "../logic/ideaMat";
@@ -55,7 +55,7 @@ export default function Bubbles(props: BubblesProps) {
5555
mesh.current.instanceMatrix.needsUpdate = true;
5656
});
5757

58-
const geo = useMemo(() => new SphereBufferGeometry(0.05, 32, 16), []);
58+
const geo = useMemo(() => new SphereGeometry(0.05, 32, 16), []);
5959
const mat = useIdeaMaterial(undefined, 0.05);
6060

6161
return (

0 commit comments

Comments
 (0)