Merge pull request #168 from musehq/dev

v2.11.0

examples/package.json

@@ -10,17 +10,16 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@types/three": "0.139.0",
     "next": "12.1.6",
     "posthog-js": "^1.33.0",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "three": "^0.139.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@types/node": "17.0.40",
     "@types/react": "18.0.12",
     "@types/react-dom": "18.0.5",
+    "@types/three": "0.150.1",
     "typescript": "4.7.3"
   }
 }

examples/yarn.lock

@@ -103,10 +103,25 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
-"@types/[email protected]":
-  version "0.139.0"
-  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.139.0.tgz#69af1f0c52f8eea390f513e05478af1dd7f49e6f"
-  integrity sha512-4V/jZhyq7Mv05coUzxL3bz8AuBOSi/1F0RY7ujisHTV0Amy/fnYJ+s7TSJ1/hXjZukSkpuFRgV+wvWUEMbsMbQ==
+"@types/stats.js@*":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.0.tgz#0ed81d48e03b590c24da85540c1d952077a9fe20"
+  integrity sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==
+
+"@types/[email protected]":
+  version "0.150.1"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.150.1.tgz#32a594ac0d8452d37ad3abbb22a9496878ac6c77"
+  integrity sha512-ZXS1M3brsfAAbTeeUEt0defPi98yWQuEyPBnvjEYY1dCEYfJnFaww0mYgRpJ9JVfmtwRxqISpVcv/g/0lMl1DQ==
+  dependencies:
+    "@types/stats.js" "*"
+    "@types/webxr" "*"
+    fflate "~0.6.9"
+    lil-gui "~0.17.0"
+
+"@types/webxr@*":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.1.tgz#4908349419104bd476a4252d04e4c3abb496748d"
+  integrity sha512-xlFXPfgJR5vIuDefhaHuUM9uUgvPaXB6GKdXy2gdEh8gBWQZ2ul24AJz3foUd8NNKlSTQuWYJpCb1/pL81m1KQ==
 
 caniuse-lite@^1.0.30001332:
   version "1.0.30001346"
@@ -123,11 +138,21 @@ fflate@^0.4.1:
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
   integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
 
+fflate@~0.6.9:
+  version "0.6.10"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.6.10.tgz#5f40f9659205936a2d18abf88b2e7781662b6d43"
+  integrity sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==
+
 "js-tokens@^3.0.0 || ^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
+lil-gui@~0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/lil-gui/-/lil-gui-0.17.0.tgz#b41ae55d0023fcd9185f7395a218db0f58189663"
+  integrity sha512-MVBHmgY+uEbmJNApAaPbtvNh1RCAeMnKym82SBjtp5rODTYKWtM+MXHCifLe2H2Ti1HuBGBtK/5SyG4ShQ3pUQ==
+
 loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -186,18 +211,18 @@ posthog-js@^1.33.0:
     fflate "^0.4.1"
     rrweb-snapshot "^1.1.14"
 
-react-dom@18.1.0:
-  version "18.1.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
-  integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
+react-dom@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.22.0"
+    scheduler "^0.23.0"
 
-react@18.1.0:
-  version "18.1.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
-  integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -206,10 +231,10 @@ rrweb-snapshot@^1.1.14:
   resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc"
   integrity sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ==
 
-scheduler@^0.22.0:
-  version "0.22.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
-  integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -223,11 +248,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.2.tgz#ff230fd593b737e9e68b630a694d460425478729"
   integrity sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==
 
-three@^0.139.2:
-  version "0.139.2"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.139.2.tgz#b110799a15736df673b9293e31653a4ac73648dd"
-  integrity sha512-gV7q7QY8rogu7HLFZR9cWnOQAUedUhu2WXAnpr2kdXZP9YDKsG/0ychwQvWkZN5PlNw9mv5MoCTin6zNTXoONg==
-
 [email protected]:
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.10.6",
+  "version": "2.11.0",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [
@@ -59,20 +59,20 @@
     "@geckos.io/snapshot-interpolation": "^1.1.0",
     "@react-spring/three": "^9.4.5",
     "@react-three/cannon": "6.4.0",
-    "@react-three/drei": "9.11.3",
-    "@react-three/fiber": "^8.9.1",
-    "@react-three/xr": "^4.0.1",
+    "@react-three/drei": "9.65.3",
+    "@react-three/fiber": "8.12.0",
+    "@react-three/xr": "^5.4.1",
     "culori": "^0.18.2",
     "nipplejs": "0.8.1",
     "node-fetch": "^2.6.1",
     "peerjs": "^1.4.6",
     "react-device-detect": "^1.13.1",
-    "react-error-boundary": "^3.1.4"
+    "react-error-boundary": "^3.1.4",
+    "three": "0.151.3"
   },
   "peerDependencies": {
     "react": ">=18.1",
-    "react-dom": ">=18.1",
-    "three": ">=0.139.2"
+    "react-dom": ">=18.1"
   },
   "devDependencies": {
     "@babel/core": "^7.18.2",
@@ -86,7 +86,7 @@
     "@types/peerjs": "^1.1.0",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.10",
-    "@types/three": "0.139.0",
+    "@types/three": "0.150.1",
     "@typescript-eslint/eslint-plugin": "^3.2.0",
     "@typescript-eslint/parser": "^3.2.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -108,7 +108,6 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "three": "0.139.2",
     "typescript": "^4.2.4"
   }
 }

src/ideas/basis/VisualIdea/index.tsx

@@ -72,7 +72,7 @@ export function VisualIdea(props: VisualIdeaProps) {
   return (
     <group name="spacesvr-basis-idea" {...rest}>
       <mesh material={mat} scale={0.2}>
-        <sphereBufferGeometry args={[RADIUS, 48, 32]} />
+        <sphereGeometry args={[RADIUS, 48, 32]} />
       </mesh>
     </group>
   );

src/ideas/basis/VisualWorld/index.tsx

@@ -78,7 +78,7 @@ export function VisualWorld(props: VisualWorldProps) {
   return (
     <group name="spacesvr-basis-world" {...rest}>
       <mesh material={mat} scale={0.2}>
-        <sphereBufferGeometry args={[RADIUS, 48, 32]} />
+        <sphereGeometry args={[RADIUS, 48, 32]} />
       </mesh>
     </group>
   );

src/ideas/environment/Background.tsx

@@ -1,9 +1,9 @@
-import { Color } from "three";
+import { Color, ColorRepresentation } from "three";
 import { useLayoutEffect } from "react";
 import { useThree } from "@react-three/fiber";
 
 type BackgroundProps = {
-  color: Color | string | number;
+  color: ColorRepresentation;
 };
 
 export function Background(props: BackgroundProps) {

src/ideas/environment/Fog.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from "react";
 import { useThree } from "@react-three/fiber";
-import { Color, Fog as ThreeFog } from "three";
+import { Color, ColorRepresentation, Fog as ThreeFog } from "three";
 
 type FogProps = {
-  color?: Color | string | number;
+  color?: ColorRepresentation;
   near?: number;
   far?: number;
 };

src/ideas/environment/InfinitePlane.tsx

@@ -21,7 +21,7 @@ export function InfinitePlane(props: InfinitePlaneProps) {
 
   return (
     <mesh name="spacesvr-infinite-plane" ref={ref}>
-      <planeBufferGeometry args={size} />
+      <planeGeometry args={size} />
       <meshPhongMaterial color="#660000" />
     </mesh>
   );

src/ideas/media/Image.tsx

@@ -36,7 +36,7 @@ function UnsuspensedImage(props: ImageProps) {
   return (
     <group name="spacesvr-image" {...rest}>
       <mesh rotation={IS_COMPRESSED ? [0, Math.PI, Math.PI] : [0, 0, 0]}>
-        <planeBufferGeometry args={[WIDTH, HEIGHT]} />
+        <planeGeometry args={[WIDTH, HEIGHT]} />
         <meshBasicMaterial map={tex} side={DoubleSide} transparent />
       </mesh>
       {framed && (

src/ideas/media/Model.tsx

@@ -44,7 +44,7 @@ function FallbackModel(props: ModelProps) {
   return (
     <group name="spacesvr-fallback-model" {...rest}>
       <mesh material={cache.mat_basic_black_wireframe}>
-        <boxBufferGeometry args={[1, 1, 1]} />
+        <boxGeometry args={[1, 1, 1]} />
       </mesh>
     </group>
   );

src/ideas/media/Video.tsx

@@ -117,7 +117,7 @@ export function Video(props: Props) {
   return (
     <group name="spacesvr-video" {...rest}>
       <mesh>
-        <planeBufferGeometry args={[width, height]} />
+        <planeGeometry args={[width, height]} />
         <meshBasicMaterial side={DoubleSide}>
           <videoTexture attach="map" args={[video]} encoding={sRGBEncoding} />
         </meshBasicMaterial>

src/ideas/mediated/Frame.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import {
-  BoxBufferGeometry,
+  BoxGeometry,
   BufferGeometry,
   Material,
   MeshStandardMaterial,
@@ -53,21 +53,21 @@ export function Frame(props: FrameProps) {
   const meshOffset = 0.0005;
 
   const geometry = useMemo<BufferGeometry>(() => {
-    const backPanel = new BoxBufferGeometry(
+    const backPanel = new BoxGeometry(
       width + frameWidth,
       height + frameWidth,
       frameDepth
     );
     backPanel.translate(0, 0, -frameDepth - meshOffset);
 
-    const topFrame = new BoxBufferGeometry(
+    const topFrame = new BoxGeometry(
       width + frameWidth,
       borderThickness,
       borderDepth
     );
     topFrame.translate(0, height / 2 + frameWidth / 2 - borderThickness / 2, 0);
 
-    const bottomFrame = new BoxBufferGeometry(
+    const bottomFrame = new BoxGeometry(
       width + frameWidth,
       borderThickness,
       borderDepth
@@ -78,7 +78,7 @@ export function Frame(props: FrameProps) {
       0
     );
 
-    const leftFrame = new BoxBufferGeometry(
+    const leftFrame = new BoxGeometry(
       borderThickness,
       height + frameWidth,
       borderDepth
@@ -89,7 +89,7 @@ export function Frame(props: FrameProps) {
       0
     );
 
-    const rightFrame = new BoxBufferGeometry(
+    const rightFrame = new BoxGeometry(
       borderThickness,
       height + frameWidth,
       borderDepth
@@ -116,7 +116,7 @@ export function Frame(props: FrameProps) {
   const backFrameGeometry = useMemo<BufferGeometry | undefined>(() => {
     if (!innerFrameMaterial) return undefined;
 
-    const backPanel = new BoxBufferGeometry(
+    const backPanel = new BoxGeometry(
       width + frameWidth,
       height + frameWidth,
       frameDepth

src/ideas/mediated/LostFloor.tsx

@@ -24,7 +24,7 @@ export function LostFloor() {
   return (
     <group name="spacesvr-lost-floor">
       <mesh rotation-x={-Math.PI / 2} material={mat}>
-        <planeBufferGeometry args={[10000, 10000, 1, 1]} />
+        <planeGeometry args={[10000, 10000, 1, 1]} />
       </mesh>
     </group>
   );

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

@@ -2,7 +2,12 @@
 // can remove once we upgrade to three.js r142
 // also modified to reduce to match a tri count rather than remove X number of vertices
 
-import { BufferGeometry, Float32BufferAttribute, Vector3 } from "three";
+import {
+  BufferAttribute,
+  BufferGeometry,
+  Float32BufferAttribute,
+  Vector3,
+} from "three";
 import { mergeVertices } from "three-stdlib";
 
 const cb = new Vector3(),
@@ -374,7 +379,9 @@ class SimplifyModifier {
 
     // add vertices
 
-    const positionAttribute = geometry.getAttribute("position");
+    const positionAttribute = geometry.getAttribute(
+      "position"
+    ) as BufferAttribute;
 
     for (let i = 0; i < positionAttribute.count; i++) {
       const v = new Vector3().fromBufferAttribute(positionAttribute, i);

src/ideas/primitives/HitBox.tsx

@@ -30,7 +30,7 @@ export const HitBox = forwardRef<Mesh, HitBox>((props: HitBox, ref) => {
       raycaster={raycaster}
     >
       <mesh visible={visible} name="spacesvr-hitbox" ref={ref} {...rest}>
-        <boxBufferGeometry args={args} />
+        <boxGeometry args={args} />
         {visible && (
           <meshBasicMaterial color={color} transparent opacity={0.7} />
         )}

src/ideas/ui/Arrow.tsx

@@ -27,7 +27,7 @@ export function Arrow(props: ArrowProps) {
   return (
     <group name="spacesvr-arrow" {...rest}>
       <mesh scale={0.004} material={arrowMat}>
-        <planeBufferGeometry args={[98, 51]} />
+        <planeGeometry args={[98, 51]} />
       </mesh>
     </group>
   );

src/ideas/ui/Button.tsx

@@ -3,7 +3,7 @@ import { animated, config, useSpring } from "@react-spring/three";
 import { GroupProps } from "@react-three/fiber";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Idea } from "../../logic/basis/idea";
-import { Color, Raycaster } from "three";
+import { Color, ColorRepresentation, Raycaster } from "three";
 import { RoundedBox } from "../primitives/RoundedBox";
 import { HitBox } from "../primitives/HitBox";
 
@@ -15,7 +15,7 @@ type ButtonProps = {
   maxWidth?: number;
   width?: number;
   textColor?: string;
-  color?: string;
+  color?: ColorRepresentation;
   outline?: boolean;
   outlineColor?: string;
   idea?: Idea;