Merge pull request #155 from musehq/dev

v2.9.1 & v2.9.2

package.json

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

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

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

src/layers/Player/components/colliders/CapsuleCollider.tsx

@@ -1,7 +1,7 @@
-import { ShapeType, Triplet, useCompoundBody } from "@react-three/cannon";
-import { useEffect, useRef } from "react";
+import { ShapeType, useCompoundBody } from "@react-three/cannon";
+import { MutableRefObject, useEffect } from "react";
 import { useEnvironment } from "../../../Environment";
-import { Group } from "three";
+import { Group, Vector3 } from "three";
 
 // height of 0.9 (eye level) for a perceived height of 1
 const HEIGHT = 0.9;
@@ -16,14 +16,12 @@ const topSphere = { ...sphereProps, position: [0, -RADIUS, 0] };
 const middleSphere = { ...sphereProps, position: [0, -(HEIGHT / 2), 0] };
 const bottomSphere = { ...sphereProps, position: [0, -(HEIGHT - RADIUS), 0] };
 
-export const useCapsuleCollider = (pos = [0, 0, 0]) => {
-  const vPos = useRef(pos as Triplet);
-
+export const useCapsuleCollider = (initPos: MutableRefObject<Vector3>) => {
   const { paused } = useEnvironment();
 
   const compoundBody = useCompoundBody<Group>(() => ({
     mass: 0,
-    position: vPos.current,
+    position: initPos.current.toArray(),
     segments: SEGMENTS,
     fixedRotation: true,
     type: "Dynamic",

src/layers/Player/index.tsx

@@ -87,11 +87,8 @@ export function Player(props: PlayerLayer) {
 
   const { device } = useEnvironment();
 
-  // physical body
-  const [, bodyApi] = useCapsuleCollider(pos);
-  const { direction, updateVelocity } = useSpringVelocity(bodyApi, speed);
-
   // local state
+  const initPos = useRef(new Vector3().fromArray(pos));
   const position = useRef(new Vector3());
   const velocity = useRef(new Vector3());
   const lockControls = useRef(false);
@@ -100,6 +97,10 @@ export function Player(props: PlayerLayer) {
     []
   );
 
+  // physical body
+  const [, bodyApi] = useCapsuleCollider(initPos);
+  const { direction, updateVelocity } = useSpringVelocity(bodyApi, speed);
+
   const bob = useBob(velocity, direction);
 
   // initial rotation
@@ -143,6 +144,8 @@ export function Player(props: PlayerLayer) {
 
   const setPosition = useCallback(
     (pos: Vector3) => {
+      // in case it gets called before bodyapi is initialized
+      initPos.current.copy(pos);
       bodyApi.position.set(pos.x, pos.y, pos.z);
       position.current.copy(pos);
     },

src/layers/Player/logic/velocity.ts

@@ -19,14 +19,19 @@ export const useSpringVelocity = (bodyApi: Api<Group>[1], speed: number) => {
   const [dumdum] = useState(new Vector3());
 
   const updateVelocity = (cam: Camera, velocity: Vector3) => {
-    dumdum.copy(velocity);
+    dumdum.x = velocity.x || 0;
     dumdum.y = 0;
+    dumdum.z = velocity.z || 0;
     const vel = dumdum.length() / speed;
 
-    const y_change = velocity.y - lastvelocity.current.y;
+    const y_change = (velocity.y || 0) - lastvelocity.current.y;
     const elapsedTime = clock.getElapsedTime();
-    const delta = elapsedTime - lastTime.current;
-    y_accel.current = MathUtils.lerp(y_accel.current, y_change / delta, 0.1);
+    const delta = Math.abs(elapsedTime - lastTime.current);
+    y_accel.current = MathUtils.lerp(
+      y_accel.current,
+      y_change / delta || 0, // i think this is the bad one!!! (for all the || 0's)
+      0.1
+    );
 
     // get forward/back movement and left/right movement velocities
     dummy.x = direction.current.x * 0.75;
@@ -45,15 +50,15 @@ export const useSpringVelocity = (bodyApi: Api<Group>[1], speed: number) => {
       direction.current.z * 0.6,
       0.05 + vel * 0.075
     );
-    dummy.y = Math.min(velocity.y + targetYVel.current, 4 + vel);
+    dummy.y = Math.min((velocity.y || 0) + targetYVel.current, 4 + vel);
 
     // keep y velocity intact and update velocity
     if (!device.desktop) {
       bodyApi.velocity.set(dummy.x, dummy.y, dummy.z);
       lastvelocity.current.set(dummy.x, dummy.y, dummy.z);
     } else {
-      const newX = MathUtils.lerp(velocity.x, dummy.x, 0.25);
-      const newZ = MathUtils.lerp(velocity.z, dummy.z, 0.25);
+      const newX = MathUtils.lerp(velocity.x || 0, dummy.x, 0.25);
+      const newZ = MathUtils.lerp(velocity.z || 0, dummy.z, 0.25);
       bodyApi.velocity.set(newX, dummy.y, newZ);
       lastvelocity.current.set(newX, dummy.y, newZ);
     }