Initial commit

sniok · Mar 13, 2021 · 2df7cbd · 2df7cbd
1 parent 3d07fa8
commit 2df7cbd
Show file tree

Hide file tree

Showing 9 changed files with 294 additions and 0 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "printWidth": 140,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "particles",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "src/index.js",
+  "dependencies": {
+    "@react-three/xr": "2.0.1",
+    "@types/react": "16.9.35",
+    "@types/react-dom": "16.9.8",
+    "@types/three": "0.126.0",
+    "drei": "2.2.21",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-scripts": "3.4.1",
+    "react-three-fiber": "5.3.19",
+    "three": "0.126.1"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/public/scene.glb b/public/scene.glb
@@ -0,0 +1 @@
+��i���Zv�(u�����*?��hi�?�ǫ����7�����y�x�G�������o���zw��
diff --git a/sandbox.config.json b/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+  "infiniteLoopProtection": false,
+  "hardReloadOnChange": false,
+  "view": "browser"
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,157 @@
+import { DefaultXRControllers, useXREvent, VRCanvas, XRController } from '@react-three/xr'
+import { Plane } from 'drei/shapes'
+import { OrbitControls } from 'drei/OrbitControls'
+import React, { useMemo, useRef } from 'react'
+import { useFrame } from 'react-three-fiber'
+import { BufferGeometry, InterleavedBuffer, InterleavedBufferAttribute, Vector3 } from 'three'
+
+const count = 50_000
+const stride = 10
+const total = count * stride
+const dots = new Float32Array(total)
+
+const random = (min: number, max: number) => Math.random() * (max - min) + min
+
+const offset = [0, 1.2, -0.4]
+// Init
+{
+  let i
+  for (i = 0; i < total; i += stride) {
+    let d = 0.05
+    let x = random(-1, 1) * d
+    let y = random(-1, 1) * d
+    let z = random(-1, 1) * d
+    // home position
+    dots[i] = x + offset[0]
+    dots[i + 1] = y + offset[1]
+    dots[i + 2] = z + offset[2]
+    // position
+    dots[i + 3] = x + offset[0]
+    dots[i + 4] = y + offset[1]
+    dots[i + 5] = z + offset[2]
+    // velocity
+    dots[i + 6] = 0
+    dots[i + 7] = 0
+    dots[i + 8] = 0
+    // damp
+    dots[i + 9] = random(0.005, 0.008)
+  }
+}
+
+const pointer = {
+  prev: new Vector3(),
+  position: new Vector3(),
+  force: 0
+}
+
+const step = () => {
+  let i
+  for (i = 0; i < total; i += stride) {
+    const p = pointer.position
+    const dx = p.x - dots[i + 3]
+    const dy = p.y - dots[i + 4]
+    const dz = p.z - dots[i + 5]
+    const distanceSquared = dx * dx + dy * dy + dz * dz
+
+    if (pointer.force > 0) {
+      const powerMult = Math.max(Math.min(128, pointer.prev.distanceTo(pointer.position) * 256), 1)
+      const dsq = (1 / (Math.max(0.1, distanceSquared) * 16)) * pointer.force * powerMult
+
+      dots[i + 6] += dx * dsq
+      dots[i + 7] += dy * dsq
+      dots[i + 8] += dz * dsq
+    } else {
+      dots[i + 6] += (-dots[i + 3] + dots[i]) * 0.01
+      dots[i + 7] += (-dots[i + 4] + dots[i + 1]) * 0.01
+      dots[i + 8] += (-dots[i + 5] + dots[i + 2]) * 0.01
+
+      if (distanceSquared < 0.01) {
+        dots[i + 6] -= dx * 2
+        dots[i + 7] -= dy * 2
+        dots[i + 8] -= dz * 2
+      }
+    }
+
+    const hm = 0.982
+    dots[i + 6] *= hm
+    dots[i + 7] *= hm
+    dots[i + 8] *= hm
+
+    const r = 0.03
+    dots[i + 6] += random(-r, r)
+    dots[i + 7] += random(-r, r)
+    dots[i + 8] += random(-r, r)
+
+    // apply force
+    dots[i + 3] += dots[i + 6] * dots[i + 9]
+    dots[i + 4] += dots[i + 7] * dots[i + 9]
+    dots[i + 5] += dots[i + 8] * dots[i + 9]
+  }
+}
+
+function DotsRender() {
+  const { buffer, geometry } = useMemo(() => {
+    const geometry = new BufferGeometry()
+    const buffer = new InterleavedBuffer(dots, stride)
+    const position = new InterleavedBufferAttribute(buffer, 3, 3)
+    const color = new InterleavedBufferAttribute(buffer, 3, 6)
+
+    geometry.setAttribute('position', position)
+    geometry.setAttribute('color', color)
+
+    return { buffer, position, geometry }
+  }, [])
+
+  useFrame(() => {
+    buffer.needsUpdate = true
+  })
+
+  return (
+    <points frustumCulled={false}>
+      <primitive object={geometry} attach="geometry" />
+      <pointsMaterial size={0.0001} vertexColors />
+    </points>
+  )
+}
+
+function Dots() {
+  const controller = useRef<XRController>()
+
+  useXREvent('selectstart', (e) => {
+    controller.current = e.controller
+    pointer.force = 1
+    pointer.prev.copy(e.controller.controller.position)
+    pointer.position.copy(e.controller.controller.position)
+  })
+  useXREvent('selectend', (e) => {
+    if (e.controller === controller.current) pointer.force = 0
+  })
+
+  useFrame(() => {
+    if (controller.current) {
+      pointer.prev.copy(pointer.position)
+      pointer.position.copy(controller.current.controller.position)
+    }
+
+    step()
+  })
+
+  return null
+}
+
+export function App() {
+  return (
+    <VRCanvas>
+      <DefaultXRControllers />
+      <Plane args={[55, 55, 25, 25]} rotation={[-Math.PI / 2, 0, 0]}>
+        <meshPhongMaterial color="#222" attach="material" wireframe />
+      </Plane>
+      <OrbitControls />
+      <Dots />
+      <ambientLight />
+      <DotsRender />
+      <pointLight position={[10, 10, 10]} />
+      <color args={[0x000000]} attach="background" />
+    </VRCanvas>
+  )
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom'
+import React from 'react'
+import {App} from "./App";
+import './styles.css'
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  /* background: aquamarine; */
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		��i��Zv�(u��*?��hi�?�ǫ��7��y�x�G��o��zw��