Add 'three-fiber' example

ije · ije · commit 3a8678fad038 · 2021-09-07T23:47:42.000+08:00
diff --git a/examples/three-fiber/aleph.config.ts b/examples/three-fiber/aleph.config.ts
@@ -0,0 +1,5 @@
+import type { Config } from 'aleph/types'
+
+export default (): Config => ({
+  ssr: false
+})
diff --git a/examples/three-fiber/app.tsx b/examples/three-fiber/app.tsx
@@ -0,0 +1,13 @@
+import React, { ComponentType } from 'react'
+import './style/index.css'
+
+export default function App({ Page, pageProps }: { Page: ComponentType<any>, pageProps: any }) {
+  return (
+    <main>
+      <head>
+        <meta name="viewport" content="width=device-width" />
+      </head>
+      <Page {...pageProps} />
+    </main>
+  )
+}
diff --git a/examples/three-fiber/components/Box.tsx b/examples/three-fiber/components/Box.tsx
@@ -0,0 +1,29 @@
+import { useFrame, MeshProps } from 'https://esm.sh/@react-three/fiber'
+import React, { useRef, useState } from 'react'
+
+export function Box(props: MeshProps) {
+  // Set up state for the hovered and active state
+  const [hovered, setHover] = useState(false)
+  const [active, setActive] = useState(false)
+
+  // This reference will give us direct access to the mesh
+  const ref = useRef<any>()
+
+  // Rotate mesh every frame, this is outside of React without overhead
+  useFrame(() => {
+    ref.current.rotation.x = ref.current.rotation.y += 0.01
+  })
+
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={active ? 1.5 : 1}
+      onClick={() => setActive(!active)}
+      onPointerOver={() => setHover(true)}
+      onPointerOut={() => setHover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}
diff --git a/examples/three-fiber/pages/index.tsx b/examples/three-fiber/pages/index.tsx
@@ -0,0 +1,15 @@
+import { Canvas } from 'https://esm.sh/@react-three/fiber'
+import React from 'react'
+import { Box } from '../components/Box.tsx'
+
+export default function Home() {
+  return (
+    <Canvas>
+      <ambientLight intensity={0.5} />
+      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
+      <pointLight position={[-10, -10, -10]} />
+      <Box position={[-1.2, 0, 0]} />
+      <Box position={[1.2, 0, 0]} />
+    </Canvas>
+  )
+}
diff --git a/examples/three-fiber/style/index.css b/examples/three-fiber/style/index.css
@@ -0,0 +1,20 @@
+* {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+body {
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size: 16px;
+}
+
+main {
+  width: 100vw;
+  height: 100vh;
+}
