v2.7.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.6.5",
+  "version": "2.7.0",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [

src/ideas/mediated/LostFloor.tsx

@@ -15,7 +15,7 @@ export function LostFloor() {
         fragHead +
         shader.fragmentShader.replace(
           "#include <color_fragment>",
-          "#include <color_fragment>\n" + fragColorFragment
+          "#include <color_fragment>\n  " + fragColorFragment
         );
     };
     return m;
@@ -199,5 +199,5 @@ const fragHead = `
 
 const fragColorFragment = `
   diffuseColor.rgb -= 0.2 * (snoise(vPos) + 1.) / 2.;
-  diffuseColor.r -= 0.1 * (snoise(-vPos) + 1.) / 2.;
+  diffuseColor.r -= 0.025 * (snoise(-vPos) + 1.) / 2.;
 `;

src/ideas/modifiers/Collidable/components/TrimeshCollider.tsx

@@ -31,13 +31,9 @@ export default function TrimeshCollider(props: TrimeshColliderProps) {
     return g;
   }, [geo, curScale]);
 
-  const [, api] = useTrimeshCollision(geometry);
-
-  // there's some state update that causes the api not to receive an out of sync position
-  // i think it's whenever the api gets recreated. for now, just re-apply transforms every 2 seconds
-  const needsUpdate = useRef(false);
-  useLimitedFrame(1 / 2, () => {
-    needsUpdate.current = true;
+  const [, api] = useTrimeshCollision(geometry, {
+    pos: pos.toArray(),
+    rot: [euler.x, euler.y, euler.z],
   });
 
   const lastUpdatedMatrix = useRef<Matrix4>(new Matrix4());
@@ -49,16 +45,12 @@ export default function TrimeshCollider(props: TrimeshColliderProps) {
     group.current.matrixWorld.decompose(pos, quat, scale);
 
     // no need to update if nothing changed
-    if (
-      lastUpdatedMatrix.current.equals(group.current.matrixWorld) &&
-      !needsUpdate.current
-    ) {
+    if (lastUpdatedMatrix.current.equals(group.current.matrixWorld)) {
       return;
     }
 
     // update last values
     lastUpdatedMatrix.current.copy(group.current.matrixWorld);
-    needsUpdate.current = false;
 
     // if a change was found, update collider
     api.position.copy(pos);

src/ideas/modifiers/Collidable/utils/trimesh.ts

@@ -1,11 +1,14 @@
-import { useTrimesh } from "@react-three/cannon";
+import { Triplet, useTrimesh } from "@react-three/cannon";
 import {
   BufferAttribute,
   BufferGeometry,
   InterleavedBufferAttribute,
 } from "three";
 
-export const useTrimeshCollision = (geometry: BufferGeometry) => {
+export const useTrimeshCollision = (
+  geometry: BufferGeometry,
+  trans?: { pos?: Triplet; rot?: Triplet }
+) => {
   const indices = (geometry.index as BufferAttribute).array as number[];
 
   const isInterleaved =
@@ -30,6 +33,8 @@ export const useTrimeshCollision = (geometry: BufferGeometry) => {
     () => ({
       type: "Static",
       args: [vertices, indices],
+      position: trans?.pos,
+      rotation: trans?.rot,
     }),
     undefined,
     [geometry.uuid]

src/ideas/ui/Button.tsx

@@ -28,7 +28,7 @@ export function Button(props: ButtonProps) {
     font = "https://d27rt3a60hh1lx.cloudfront.net/fonts/Quicksand_Bold.otf",
     fontSize = 0.05,
     width,
-    maxWidth = 0.25,
+    maxWidth,
     textColor = "black",
     color = "#fff",
     outline = true,
@@ -85,7 +85,11 @@ export function Button(props: ButtonProps) {
   }, []);
 
   const PADDING = fontSize * 0.9;
-  const MAX_WIDTH = width ? Math.min(width, maxWidth) : maxWidth;
+  const MAX_WIDTH = !maxWidth
+    ? Infinity
+    : width
+    ? Math.max(width, maxWidth)
+    : maxWidth;
   const WIDTH = (width || dims[0]) + PADDING * 2;
   const HEIGHT = dims[1] + PADDING;
   const DEPTH = fontSize * 1.1;
@@ -123,7 +127,7 @@ export function Button(props: ButtonProps) {
         <RoundedBox
           args={[WIDTH, HEIGHT, DEPTH]}
           radius={RADIUS}
-          smoothness={8}
+          smoothness={6}
         >
           {/* @ts-ignore */}
           <animated.meshStandardMaterial color={animColor} />

src/ideas/ui/TextInput/index.tsx

@@ -348,15 +348,15 @@ export function TextInput(props: TextProps) {
         <RoundedBox
           args={[INPUT_WIDTH, INPUT_HEIGHT, DEPTH]}
           radius={RADIUS}
-          smoothness={8}
+          smoothness={6}
         >
           <meshStandardMaterial color="white" />
         </RoundedBox>
       </Interactable>
       <RoundedBox
         args={[OUTER_WIDTH, OUTER_HEIGHT, DEPTH]}
         radius={RADIUS}
-        smoothness={8}
+        smoothness={6}
         position-z={-0.001}
       >
         {/* @ts-ignore */}

src/layers/Environment/logic/canvas.ts

@@ -1,5 +1,6 @@
 import { Props as ContainerProps } from "@react-three/fiber/dist/declarations/src/web/Canvas";
 import { ResizeObserver } from "@juggle/resize-observer";
+import { NoToneMapping } from "three";
 
 export const defaultCanvasProps: Partial<ContainerProps> = {
   gl: {
@@ -8,11 +9,13 @@ export const defaultCanvasProps: Partial<ContainerProps> = {
     depth: true,
     alpha: false,
     stencil: false,
+    physicallyCorrectLights: true,
+    toneMapping: NoToneMapping,
   },
   shadows: false,
-  camera: { position: [0, 2, 0], near: 0.01, far: 150 },
+  camera: { position: [0, 2, 0], near: 0.01, far: 300 },
   resize: { polyfill: ResizeObserver },
   dpr: 1,
-  raycaster: { far: 2 },
+  raycaster: { far: 3 },
   events: undefined,
 };

src/layers/Environment/ui/PauseMenu/index.tsx

@@ -48,7 +48,7 @@ export default function PauseMenu(props: PauseMenuProps) {
   const PAUSE_ITEMS: PauseItem[] = [
     ...pauseMenuItems,
     {
-      text: "v2.6.5",
+      text: "v2.7.0",
       link: "https://www.npmjs.com/package/spacesvr",
     },
     ...menuItems,

src/layers/Player/index.tsx

@@ -94,7 +94,7 @@ export function Player(props: PlayerLayer) {
   const velocity = useRef(new Vector3());
   const lockControls = useRef(false);
   const raycaster = useMemo(
-    () => new Raycaster(new Vector3(), new Vector3(), 0, 2),
+    () => new Raycaster(new Vector3(), new Vector3(), 0, 5),
     []
   );
 

src/layers/Toolbelt/ideas/Lights.tsx

@@ -1,8 +1,8 @@
 export default function Lights() {
   return (
     <group name="lights">
-      <ambientLight intensity={0.5} />
-      <pointLight intensity={0.5} />
+      <ambientLight intensity={Math.PI * 0.5} />
+      <pointLight intensity={Math.PI * 0.5} />
     </group>
   );
 }

src/tools/Camera/components/Instruction.tsx

@@ -0,0 +1,66 @@
+import { a, useSpring } from "@react-spring/three";
+import { Text } from "@react-three/drei";
+import { Floating, Key } from "../../../ideas";
+import { useEnvironment } from "../../../layers";
+
+const FONT_FILE =
+  "https://d27rt3a60hh1lx.cloudfront.net/fonts/Quicksand_Bold.otf";
+
+type InstructionProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+};
+
+export default function Instruction(props: InstructionProps) {
+  const { open, setOpen } = props;
+
+  const { device } = useEnvironment();
+
+  const CLOSED_SCALE = device.mobile ? 0.5 : 0.5;
+
+  const { scale } = useSpring({ scale: open ? 0 : CLOSED_SCALE });
+
+  const FONT_SIZE = 0.055;
+
+  const DESKTOP_TEXT = `Press          to ${open ? "close" : "open"}`;
+  const MOBILE_TEXT = "tap to open";
+
+  return (
+    <a.group
+      scale={scale}
+      position-x={device.mobile ? -0.05 : -0.45}
+      position-y={device.mobile ? -0.2 : 0.1}
+      position-z={0.25}
+      rotation-x={0.1}
+      rotation-y={-0.4}
+    >
+      <Floating height={FONT_SIZE * 0.1} speed={device.mobile ? 8 : 0}>
+        <Text
+          color="white"
+          fontSize={FONT_SIZE}
+          maxWidth={100}
+          textAlign="center"
+          outlineColor="black"
+          outlineWidth={FONT_SIZE * 0.1}
+          font={FONT_FILE}
+          position-y={-0.02}
+        >
+          {device.mobile ? MOBILE_TEXT : DESKTOP_TEXT}
+        </Text>
+      </Floating>
+      {device.desktop && (
+        <Floating height={FONT_SIZE * 0.1} speed={8}>
+          <Key
+            keyCode="C"
+            keyPress={["c", "C"]}
+            scale={0.1}
+            position-x={-0.035}
+            position-z={0.1}
+            rotation-x={-0.3}
+            onPress={() => setOpen(!open)}
+          />
+        </Floating>
+      )}
+    </a.group>
+  );
+}