feat: add initial files and configuration for Animated Galaxy project…

… with Three.js
andres112 · Dec 26, 2024 · d6915e2 · d6915e2
1 parent d5c1074
commit d6915e2
Show file tree

Hide file tree

Showing 15 changed files with 4,954 additions and 23 deletions.
diff --git a/23-Project-animated-galaxy/dist/.gitkeep b/23-Project-animated-galaxy/dist/.gitkeep
diff --git a/23-Project-animated-galaxy/dist/assets/index-BJDSIWRG.js b/23-Project-animated-galaxy/dist/assets/index-BJDSIWRG.js
diff --git a/23-Project-animated-galaxy/dist/assets/index-BJDSIWRG.js.map b/23-Project-animated-galaxy/dist/assets/index-BJDSIWRG.js.map
diff --git a/23-Project-animated-galaxy/dist/assets/index-Fi76PK1B.css b/23-Project-animated-galaxy/dist/assets/index-Fi76PK1B.css
@@ -0,0 +1 @@
+*{margin:0;padding:0}html,body{overflow:hidden}.webgl{position:fixed;top:0;left:0;outline:none}
diff --git a/23-Project-animated-galaxy/dist/index.html b/23-Project-animated-galaxy/dist/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animated galaxy</title>
+  <script type="module" crossorigin src="./assets/index-BJDSIWRG.js"></script>
+  <link rel="stylesheet" crossorigin href="./assets/index-Fi76PK1B.css">
+</head>
+<body>
+    <canvas class="webgl"></canvas>
+</body>
+</html>
diff --git a/23-Project-animated-galaxy/package.json b/23-Project-animated-galaxy/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "threejs-journey-exercise",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "vite": "^5.3.3",
+    "vite-plugin-restart": "^0.4.1",
+    "vite-plugin-glsl": "^1.3.0"
+  },
+  "dependencies": {
+    "lil-gui": "^0.19.2",
+    "three": "^0.166.1"
+  }
+}
diff --git a/23-Project-animated-galaxy/readme.md b/23-Project-animated-galaxy/readme.md
@@ -0,0 +1,16 @@
+# Three.js Journey
+
+## Setup
+Download [Node.js](https://nodejs.org/en/download/).
+Run this followed commands:
+
+``` bash
+# Install dependencies (only the first time)
+npm install
+
+# Run the local server at localhost:8080
+npm run dev
+
+# Build for production in the dist/ directory
+npm run build
+```
diff --git a/23-Project-animated-galaxy/src/index.html b/23-Project-animated-galaxy/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Animated galaxy</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <canvas class="webgl"></canvas>
+    <script type="module" src="./script.js"></script>
+</body>
+</html>
diff --git a/23-Project-animated-galaxy/src/script.js b/23-Project-animated-galaxy/src/script.js
@@ -0,0 +1,177 @@
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import GUI from 'lil-gui'
+
+/**
+ * Base
+ */
+// Debug
+const gui = new GUI()
+
+// Canvas
+const canvas = document.querySelector('canvas.webgl')
+
+// Scene
+const scene = new THREE.Scene()
+
+/**
+ * Galaxy
+ */
+const parameters = {}
+parameters.count = 200000
+parameters.size = 0.005
+parameters.radius = 5
+parameters.branches = 3
+parameters.spin = 1
+parameters.randomness = 0.5
+parameters.randomnessPower = 3
+parameters.insideColor = '#ff6030'
+parameters.outsideColor = '#1b3984'
+
+let geometry = null
+let material = null
+let points = null
+
+const generateGalaxy = () =>
+{
+    if(points !== null)
+    {
+        geometry.dispose()
+        material.dispose()
+        scene.remove(points)
+    }
+
+    /**
+     * Geometry
+     */
+    geometry = new THREE.BufferGeometry()
+
+    const positions = new Float32Array(parameters.count * 3)
+    const colors = new Float32Array(parameters.count * 3)
+
+    const insideColor = new THREE.Color(parameters.insideColor)
+    const outsideColor = new THREE.Color(parameters.outsideColor)
+
+    for(let i = 0; i < parameters.count; i++)
+    {
+        const i3 = i * 3
+
+        // Position
+        const radius = Math.random() * parameters.radius
+
+        const branchAngle = (i % parameters.branches) / parameters.branches * Math.PI * 2
+
+        const randomX = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
+        const randomY = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
+        const randomZ = Math.pow(Math.random(), parameters.randomnessPower) * (Math.random() < 0.5 ? 1 : - 1) * parameters.randomness * radius
+
+        positions[i3    ] = Math.cos(branchAngle) * radius + randomX
+        positions[i3 + 1] = randomY
+        positions[i3 + 2] = Math.sin(branchAngle) * radius + randomZ
+
+        // Color
+        const mixedColor = insideColor.clone()
+        mixedColor.lerp(outsideColor, radius / parameters.radius)
+
+        colors[i3    ] = mixedColor.r
+        colors[i3 + 1] = mixedColor.g
+        colors[i3 + 2] = mixedColor.b
+    }
+
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
+    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
+
+    /**
+     * Material
+     */
+    material = new THREE.PointsMaterial({
+        size: parameters.size,
+        sizeAttenuation: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+        vertexColors: true
+    })
+
+    /**
+     * Points
+     */
+    points = new THREE.Points(geometry, material)
+    scene.add(points)
+}
+
+generateGalaxy()
+
+gui.add(parameters, 'count').min(100).max(1000000).step(100).onFinishChange(generateGalaxy)
+gui.add(parameters, 'radius').min(0.01).max(20).step(0.01).onFinishChange(generateGalaxy)
+gui.add(parameters, 'branches').min(2).max(20).step(1).onFinishChange(generateGalaxy)
+gui.add(parameters, 'randomness').min(0).max(2).step(0.001).onFinishChange(generateGalaxy)
+gui.add(parameters, 'randomnessPower').min(1).max(10).step(0.001).onFinishChange(generateGalaxy)
+gui.addColor(parameters, 'insideColor').onFinishChange(generateGalaxy)
+gui.addColor(parameters, 'outsideColor').onFinishChange(generateGalaxy)
+
+/**
+ * Sizes
+ */
+const sizes = {
+    width: window.innerWidth,
+    height: window.innerHeight
+}
+
+window.addEventListener('resize', () =>
+{
+    // Update sizes
+    sizes.width = window.innerWidth
+    sizes.height = window.innerHeight
+
+    // Update camera
+    camera.aspect = sizes.width / sizes.height
+    camera.updateProjectionMatrix()
+
+    // Update renderer
+    renderer.setSize(sizes.width, sizes.height)
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+})
+
+/**
+ * Camera
+ */
+// Base camera
+const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
+camera.position.x = 3
+camera.position.y = 3
+camera.position.z = 3
+scene.add(camera)
+
+// Controls
+const controls = new OrbitControls(camera, canvas)
+controls.enableDamping = true
+
+/**
+ * Renderer
+ */
+const renderer = new THREE.WebGLRenderer({
+    canvas: canvas
+})
+renderer.setSize(sizes.width, sizes.height)
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
+
+/**
+ * Animate
+ */
+const clock = new THREE.Clock()
+
+const tick = () =>
+{
+    const elapsedTime = clock.getElapsedTime()
+
+    // Update controls
+    controls.update()
+
+    // Render
+    renderer.render(scene, camera)
+
+    // Call tick again on the next frame
+    window.requestAnimationFrame(tick)
+}
+
+tick()
diff --git a/23-Project-animated-galaxy/src/style.css b/23-Project-animated-galaxy/src/style.css
@@ -0,0 +1,19 @@
+*
+{
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body
+{
+    overflow: hidden;
+}
+
+.webgl
+{
+    position: fixed;
+    top: 0;
+    left: 0;
+    outline: none;
+}
diff --git a/23-Project-animated-galaxy/static/.gitkeep b/23-Project-animated-galaxy/static/.gitkeep
diff --git a/23-Project-animated-galaxy/vite.config.js b/23-Project-animated-galaxy/vite.config.js
@@ -0,0 +1,24 @@
+import restart from 'vite-plugin-restart'
+import glsl from 'vite-plugin-glsl'
+
+export default {
+    root: 'src/',
+    publicDir: '../static/',
+    base: './',
+    server:
+    {
+        host: true, // Open to local network and display URL
+        open: !('SANDBOX_URL' in process.env || 'CODESANDBOX_HOST' in process.env) // Open if it's not a CodeSandbox
+    },
+    build:
+    {
+        outDir: '../dist', // Output in the dist/ folder
+        emptyOutDir: true, // Empty the folder first
+        sourcemap: true // Add sourcemap
+    },
+    plugins:
+    [
+        restart({ restart: [ '../static/**', ] }), // Restart server on static file change
+        glsl() // Handle shader files
+    ]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		*{margin:0;padding:0}html,body{overflow:hidden}.webgl{position:fixed;top:0;left:0;outline:none}