v0.0.7 threed: vite

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[{*.json,.*.yml}]
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1,3 @@
+.next
+dist
+node_modules/

.eslintrc

@@ -0,0 +1,8 @@
+{
+  "extends": ["next", "prettier", "plugin:tailwind/recommended"],
+  "rules": {
+    "import/prefer-default-export": "off",
+    "no-console": "warn",
+    "no-var": "error"
+  }
+}

.gitignore

@@ -1,10 +1,50 @@
+# [MM] HEY HEY HEY
+assets
+pnpm-lock.yaml
+
+# dependencies
 node_modules
 web_modules
 .firebase
 .firebaserc
 .glitchdotcom.json
+
+# testing
+coverage
+
+# next.js
+.next
+out
+
+# production
 build
 
-# [MM] HEY HEY HEY
-assets
-pnpm-lock.yaml
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# next-pwa
+public/workbox-*.js
+public/sw.js
+
+# prefer yarn than npm
+package-lock.json
+
+report.*.json
+
+# .vscode Debugging
+.vscode/*-debug-profile

.prettierignore

@@ -0,0 +1,7 @@
+build/*
+dist/*
+public/*
+.next/*
+node_modules/*
+package.json
+*.log

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxSingleQuote": true,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "eslint.validate": ["javascript"],
+  "eslint.workingDirectories": [{ "mode": "auto" }]
+}

README.md

@@ -1,5 +1,5 @@
-=================================================
-# threed-hasura-hello-remote-schema
+===============================================================================
+# threed-hasura-hello-remote-schema from Hasura
 
 1. Schema:
 
@@ -15,8 +15,9 @@ type Query {
 
 4. Go to GraphiQL tab, and try out `query { word }` .
 
-=================================================
-# Hello React!
+
+===============================================================================
+# Hello React! from Glitch
 
 This project contains a foundation for building and learning about React apps. The site includes two routes showing how navigation works in a single page app. We manage the page head and body using a standard React flow. The homepage features a click effect that demonstrates using state, and an animation you can try out yourself by following the steps in `TODO.md`. 💫
 
@@ -81,3 +82,103 @@ Take a look in `TODO.md` for next steps you can try out in your new site!
 - Want more details about React on Glitch? We've got a [Help Center article](https://help.glitch.com/kb/article/112) for you.
 - Need more help? [Check out our Help Center](https://help.glitch.com/) for answers to any common questions.
 - Ready to make it official? [Become a paid Glitch member](https://glitch.com/pricing) to boost your app with private sharing, more storage and memory, domains and more.
+
+
+===============================================================================
+# React Three Fiber on NextJS
+
+[![Downloads](https://img.shields.io/npm/dt/create-r3f-app.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/create-r3f-app) [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ)
+# :japanese_castle: React-Three-Next starter
+
+Minimalist starter, First Load JS of 85Kb. This starter will automatically pick the marked R3F components and inject them into a canvas layout so we can navigate seamlessly between the pages with some dynamic dom and canvas content without reloading or creating a new canvas every time.
+
+### ⚫ Demo :
+
+[![image](https://user-images.githubusercontent.com/15867665/127765411-68bf8f2d-f13b-42de-90db-d40b84d89e92.png)](https://react-three-next.vercel.app/)
+
+### How to use
+
+#### Installation
+
+_Tailwind is the default style. styled-components (styled) is also available._
+
+```sh
+yarn create r3f-app next my-app
+# yarn create r3f-app <next> my-app <tailwind|styled>? -ts?
+```
+
+or
+
+```sh
+npx create-r3f-app next my-app
+```
+
+### :passport_control: Typescript
+
+For typescript add the parameter `-ts` or `--typescript`:
+
+```sh
+yarn create r3f-app next my-app -ts
+```
+
+### :mount_fuji: Features
+
+- [x] Automatically inject r3f component in the Canvas
+- [x] Support glsl imports
+- [x] PWA Support
+- [x] Layout for Canvas and DOM
+- [x] Template for the meta data and header
+- [x] Clean code using ESlint and Prettier
+- [x] VSCode debug profiles for the server, Chrome, and Firefox
+
+### :bullettrain_side: Architecture
+
+Inform the nextjs page that the component is a Threejs component. For that, simply add the **r3f** property to the parent component.
+
+```jsx
+const Page = (props) => {
+  return (
+    <>
+      <div>Hello !</div>
+
+    </>
+  )
+}
+// canvas components goes here
+// It will receive same props as Page component (from getStaticProps, etc.)
+Page.r3f = (props) => (
+  <>
+    <Shader />
+  </>
+)
+
+export default Page
+```
+
+### :control_knobs: Available Scripts
+
+- `yarn dev` - Next dev
+- `yarn analyze` - Generate bundle-analyzer
+- `yarn lint` - Audit code quality
+- `yarn build` - Next build
+- `yarn start` - Next start
+- `yarn export` - Export to static HTML
+
+### ⬛ Stack
+
+- [`threejs`](https://github.com/mrdoob/three.js/) &ndash; A lightweight, 3D library with a default WebGL renderer.
+- [`@react-three/fiber`](https://github.com/pmndrs/react-three-fiber) &ndash; A React renderer for Threejs on the web and react-native.
+- [`@react-three/drei` - Optional](https://github.com/pmndrs/drei) &ndash; useful helpers for react-three-fiber
+- [`@react-three/a11y` - Optional](https://github.com/pmndrs/react-three-a11y/) &ndash; Accessibility tools for React Three Fiber
+- [`r3f-perf` - Optional](https://github.com/RenaudRohlinger/r3f-perf) &ndash; Tool to easily monitor react threejs performances.
+
+### How to contribute :
+
+```bash
+git clone https://github.com/pmndrs/react-three-next
+&& cd react-three-next && yarn install
+```
+
+### Maintainers :
+
+- [`twitter 🐈‍⬛ @onirenaud`](https://twitter.com/onirenaud)

jsconfig.json

@@ -0,0 +1,9 @@
+// @js-ignore
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

next.config.js

@@ -0,0 +1,69 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+const withPWA = require('next-pwa')
+const runtimeCaching = require('next-pwa/cache')
+
+const nextConfig = {
+  webpack(config, { isServer }) {
+    // audio support
+    config.module.rules.push({
+      test: /\.(ogg|mp3|wav|mpe?g)$/i,
+      exclude: config.exclude,
+      use: [
+        {
+          loader: require.resolve('url-loader'),
+          options: {
+            limit: config.inlineImageLimit,
+            fallback: require.resolve('file-loader'),
+            publicPath: `${config.assetPrefix}/_next/static/images/`,
+            outputPath: `${isServer ? '../' : ''}static/images/`,
+            name: '[name]-[hash].[ext]',
+            esModule: config.esModule || false,
+          },
+        },
+      ],
+    })
+
+    // shader support
+    config.module.rules.push({
+      test: /\.(glsl|vs|fs|vert|frag)$/,
+      exclude: /node_modules/,
+      use: ['raw-loader', 'glslify-loader'],
+    })
+
+    return config
+  },
+}
+
+// manage i18n
+if (process.env.EXPORT !== 'true') {
+  nextConfig.i18n = {
+    locales: ['en-US'],
+    defaultLocale: 'en-US',
+  }
+}
+
+module.exports = (_phase, { defaultConfig }) => {
+  const plugins = [
+    [
+      withPWA,
+      {
+        pwa: {
+          dest: 'public',
+          disable: process.env.NODE_ENV === 'development',
+          runtimeCaching,
+        },
+      },
+    ],
+    [withBundleAnalyzer, {}],
+  ]
+
+  return plugins.reduce(
+    (acc, [plugin, config]) => plugin({ ...acc, ...config }),
+    {
+      ...defaultConfig,
+      ...nextConfig,
+    }
+  )
+}

package-todo.json

@@ -0,0 +1,53 @@
+{
+  "name": "react-three-next",
+  "version": "2.0.0",
+  "authors": [
+    "Renaud ROHLINGER <https://twitter.com/onirenaud>"
+  ],
+  "license": "MIT",
+  "private": true,
+  "engines": {
+    "node": ">=14"
+  },
+  "scripts": {
+    "lint": "yarn prettier && yarn eslint",
+    "eslint": "next lint --fix --dir src",
+    "prettier": "prettier -l \"./src/**/*.{js,jsx,md}\"",
+    "dev": "next dev",
+    "build": "next build",
+    "export": "EXPORT=true next build && EXPORT=true next export",
+    "analyze": "ANALYZE=true next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@react-three/drei": "^9.14.3",
+    "@react-three/fiber": "^8.0.27",
+    "babel-plugin-glsl": "^1.0.0",
+    "glsl-random": "^0.0.5",
+    "next": "^12.2.3",
+    "next-pwa": "^5.5.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.142.0",
+    "three-stdlib": "^2.12.1",
+    "zustand": "^4.0.0"
+  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "^12.2.3",
+    "autoprefixer": "^10.4.2",
+    "eslint": "^8.20.0",
+    "eslint-config-next": "^12.2.3",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-tailwind": "^0.2.1",
+    "file-loader": "^6.2.0",
+    "glslify": "^7.1.1",
+    "glslify-loader": "^2.0.0",
+    "next-offline": "^5.0.5",
+    "postcss": "^8.4.14",
+    "prettier": "^2.7.1",
+    "raw-loader": "^4.0.2",
+    "tailwindcss": "^3.1.6",
+    "url-loader": "^4.1.1"
+  }
+}