Added floor and ceiling

Rice-Tech · Jan 28, 2024 · 640bc1c · 640bc1c
1 parent 8a4e94f
commit 640bc1c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/src/MiniGame1.tsx b/src/MiniGame1.tsx
@@ -1,7 +1,7 @@
-import { useTexture } from "@react-three/drei";
+import { Plane, useTexture } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import { EffectComposer, N8AO, ToneMapping } from "@react-three/postprocessing";
-import { Physics } from "@react-three/rapier";
+import { Physics, RigidBody } from "@react-three/rapier";
 import { useState } from "react";
 import * as THREE from "three";
 import { proxy, useSnapshot } from "valtio";
@@ -118,9 +118,10 @@ export default function MiniGame1({ ready }: Props) {
           shadow-mapSize={1024}
           shadow-bias={-0.0001}
         />
-        <OfficeScene scale={[6, 6, 6]} position={[0, -5, 20]} />
+
         <Physics gravity={[0, -20, 10]} timeStep="vary">
           {ready && <Ball position={[0, 5, 0]} />}
+          <OfficeScene scale={[6, 6, 6]} position={[5, -5, 20]} />
           <WordItem
             color="orange"
             position={new THREE.Vector3(2.75, 1.5, 0)}
@@ -136,6 +137,12 @@ export default function MiniGame1({ ready }: Props) {
             posScale={-2}
           />
           <Paddle />
+          <RigidBody type="fixed">
+            <Plane position={[0, -5.1, 0]} scale={100} rotation={[-Math.PI / 2, 0, 0]} />
+          </RigidBody>
+          <RigidBody type="fixed">
+            <Plane position={[0, 10, 0]} scale={100} rotation={[Math.PI / 2, 0, 0]} />
+          </RigidBody>
         </Physics>
         <EffectComposer disableNormalPass>
           <N8AO aoRadius={0.5} intensity={2} />

diff --git a/src/components/Ball.tsx b/src/components/Ball.tsx
@@ -1,10 +1,6 @@
 import { useTexture } from "@react-three/drei";
-import { useFrame} from "@react-three/fiber";
-import {
-  BallCollider,
-  RapierRigidBody,
-  RigidBody,
-} from "@react-three/rapier";
+import { useFrame } from "@react-three/fiber";
+import { BallCollider, RapierRigidBody, RigidBody } from "@react-three/rapier";
 import { useRef } from "react";
 import { state } from "@/MiniGame1";
 import logo from "../resources/crossp.jpg";
@@ -21,7 +17,8 @@ export function Ball(props: Props) {
       return;
     }
     const ball = rigidBodyRef.current;
-    if (ball.translation().y < -10) {
+    if (ball.translation().y < -3) {
+      console.log(ball.translation().y);
       rigidBodyRef.current.setTranslation({ x: 0, y: 5, z: 0 }, true);
       rigidBodyRef.current.setLinvel({ x: 0, y: 5, z: 0 }, true);
       state.api.reset();
@@ -44,7 +41,6 @@ export function Ball(props: Props) {
           <meshStandardMaterial map={map} />
         </mesh>
       </RigidBody>
-
     </group>
   );
 }
diff --git a/src/components/OfficeScene.tsx b/src/components/OfficeScene.tsx
@@ -6,6 +6,8 @@ Command: npx gltfjsx@6.2.16 -t public/OfficeScene.glb
 import * as THREE from "three";
 import { useGLTF } from "@react-three/drei";
 import { GLTF } from "three-stdlib";
+// import { useFrame } from "@react-three/fiber";
+import { useRef } from "react";
 
 type GLTFResult = GLTF & {
   nodes: {
@@ -18,8 +20,12 @@ type GLTFResult = GLTF & {
 
 export function OfficeScene(props: JSX.IntrinsicElements["group"]) {
   const { nodes, materials } = useGLTF("/OfficeScene.glb") as GLTFResult;
+  const ref = useRef<THREE.Group>(null);
+  // useFrame(()=>{
+  //   ref.current?.rotateOnAxis(new THREE.Vector3(0,1,0), 0.001);
+  // })
   return (
-    <group {...props} dispose={null}>
+    <group {...props} dispose={null} ref={ref}>
       <mesh
         geometry={nodes.Office_Scene.geometry}
         material={materials.OfficeMat}