Finished first tutorial - box with physics and basic interactivity

Author: VehpuS

src/App.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
 import { Canvas } from "react-three-fiber";
 import { Box } from "./Objects/Box";
-import { OrbitControls } from "drei";
+import { OrbitControls, Stars } from "drei";
+import { Ground } from "./Objects/Ground";
+import { Physics } from "use-cannon";
+import { GlobalLights } from "./World/GlobalLights";
 
 function App() {
   return (
     <Canvas>
       <OrbitControls />
-      <Box />
+      <Stars />
+      <GlobalLights />
+      <Physics>
+        <Box />
+        <Ground />
+      </Physics>
     </Canvas>
   );
 }

src/Objects/Box.tsx

@@ -1,8 +1,17 @@
 import React from "react";
 
+import { useBox } from "use-cannon";
+
 export const Box = () => {
+    const [ref, api] = useBox(() => ({
+        mass: 0.1,
+        position: [0, 4, 0],
+        rotation: [(Math.random() - 0.5) * 4 * Math.PI, (Math.random() - 0.5) * 4 * Math.PI, (Math.random() - 0.5) * 4 * Math.PI],
+    }));
 
-    return <mesh>
+    return <mesh ref={ref} onClick={() => {
+        api.velocity.set((Math.random() - 0.5) * 6, 3, (Math.random() - 0.5) * 6)
+    }}>
         <boxBufferGeometry attach="geometry" />
         <meshLambertMaterial attach="material" color="royalblue" />
     </mesh>;

src/Objects/Ground.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { MeshProps } from "react-three-fiber";
+import { usePlane } from "use-cannon";
+
+const groundRotation: MeshProps["rotation"] = [-Math.PI / 2, 0, 0];
+
+export const Ground = () => {
+    const [ref] = usePlane(() => ({ rotation: groundRotation as number[], position: [0, -2.5, 0] }));
+
+    return <mesh ref={ref}>
+        <planeBufferGeometry attach="geometry" args={[200, 200]} />
+        <meshLambertMaterial attach="material" color="green" />
+    </mesh >;
+}

src/World/GlobalLights.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+export const GlobalLights = () => {
+    return <>
+        <ambientLight intensity={0.5} />
+        <spotLight position={[10, 20, 30]} angle={0.3} />
+    </>;
+}

src/index.css

@@ -8,6 +8,23 @@ body {
   height: 100%;
 }
 
+html,
+body,
+#root {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  /* overflow: hidden; */
+  background: #272727;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;