From 378042489e1a6137a8dae1ec31e2813afc922a16 Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 8 Apr 2024 22:10:01 +0200 Subject: [PATCH 1/9] chore: remove code examples https://github.com/Tresjs/lab/issues/90 --- content/experiments/array-cameras.md | 174 +---------- content/experiments/brickelangelo-david.md | 24 +- content/experiments/galaxy-generator.md | 281 +----------------- content/experiments/glass-material.md | 118 +------- content/experiments/haunted-house.md | 330 +-------------------- content/experiments/infinite-tube.md | 96 +----- content/experiments/spooky-saur.md | 12 +- 7 files changed, 7 insertions(+), 1028 deletions(-) diff --git a/content/experiments/array-cameras.md b/content/experiments/array-cameras.md index 6585edc..3d7be95 100644 --- a/content/experiments/array-cameras.md +++ b/content/experiments/array-cameras.md @@ -9,176 +9,4 @@ tags: ['array-camera', 'useGltf', 'useRenderLoop', 'useProgress'] --- ::array-cameras -:: - -::the-info - -![array-cameras](/array-cameras.png) - -# Array Camera - -Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt). - -> This is an advance example of how to use array of cameras with TresJS. - -```vue -// App.vue - - - -``` - -```vue -// model.vue - - - -``` - -:: +:: \ No newline at end of file diff --git a/content/experiments/brickelangelo-david.md b/content/experiments/brickelangelo-david.md index 2c0b474..7189729 100644 --- a/content/experiments/brickelangelo-david.md +++ b/content/experiments/brickelangelo-david.md @@ -9,26 +9,4 @@ tags: ['basic', 'cientos'] --- ::brickelangelo-david -:: - -::the-info - -![David](/brickelangelo-david.png) - -# Brickelangelo David - -Author: [@**alvarosabu**](https://twitter.com/alvarosabu). - -> This is the submission for the ThreeJS Challenge #2 - Lego of [ThreeJS Journey](https://threejs-journey.xyz/) discord by [Bruno Simon](https://twitter.com/simongfx). - -Inspired by my recent trip to Florence, Italy, I decided to recreate Michelangelo's David sculpture using Lego bricks in a procedural way `MeshSurfaceSampler` and: - -![Modelling David Blender](https://res.cloudinary.com/alvarosaburido/image/upload/v1692638940/projects/modelling-david-blender_kzcqf3.png) - -A model "David - Michelangelo" (https://skfb.ly/6X6nQ) by Kefla is licensed under CC Attribution-NonCommercial-NoDerivs (http://creativecommons.org/licenses/by-nc-nd/4.0/). - -I modelled a lego block following Joey’s Carlino Tutorial β€œLego anything with this NEW Blender geometry nodes feature” - -![Model Lego piece](https://res.cloudinary.com/alvarosaburido/image/upload/v1692638940/projects/lego-block-model-blender_ayytys.png) - -:: +:: \ No newline at end of file diff --git a/content/experiments/galaxy-generator.md b/content/experiments/galaxy-generator.md index cd27fca..a7544b0 100644 --- a/content/experiments/galaxy-generator.md +++ b/content/experiments/galaxy-generator.md @@ -9,283 +9,4 @@ tags: ['particles', 'shaders', 'glsl'] --- ::galaxy-generator -:: - -::the-info - -![Galaxy Generator](/galaxy-generator.png) - -# Galaxy Generator - -Author: [@**alvarosabu**](https://twitter.com/alvarosabu). - -> Galaxy generator from [ThreeJS Journey](https://threejs-journey.com/lessons/animated-galaxy) done with TresJS - -```vue -// App.vue - - - -``` - -## Shaders - -Now we need to create the shaders. Shaders are written in GLSL, a C-like language for writing shaders. - -``` -// vertex.glsl -uniform float uSize; -uniform float uTime; - -attribute float aScale; -attribute vec3 aRandomness; - -varying vec3 vColor; - -void main() { - vec4 modelPosition = modelMatrix * vec4(position, 1.0); - - //Spin - float angle = atan(modelPosition.x, modelPosition.z); - float distanceToCenter = length(modelPosition.xz); - float angleOffset = (1.0 / distanceToCenter) * uTime * 0.2; - angle += angleOffset; - - modelPosition.x = distanceToCenter * cos(angle); - modelPosition.z = distanceToCenter * sin(angle); - - // Randomness - modelPosition.xyz += aRandomness; - - vec4 viewPosition = viewMatrix * modelPosition; - vec4 projectedPosition = projectionMatrix * viewPosition; - gl_Position = projectedPosition; - - gl_PointSize = uSize * aScale; - - // Size attenuation - gl_PointSize *= ( 1.0 / - viewPosition.z); - - // Color - vColor = color; - -} -``` - -``` -// fragment.glsl -varying vec3 vColor; - -void main() -{ - // Disc - float strength = distance(gl_PointCoord, vec2(0.5)); - strength = 1.0 - strength; - strength = pow(strength, 5.0); - - // Color - vec3 color = mix(vec3(0.0), vColor, strength); - gl_FragColor = vec4(color, 1.0); -} -``` - -:: +:: \ No newline at end of file diff --git a/content/experiments/glass-material.md b/content/experiments/glass-material.md index adade8b..36ce1ad 100644 --- a/content/experiments/glass-material.md +++ b/content/experiments/glass-material.md @@ -8,120 +8,4 @@ tags: ['materials', 'useTweakPane'] --- ::glass-example -:: - -::the-info - -![Glass material](/glass-example.png) - -# Glass material - -Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt). - -> This effect is base on: https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/ - -```vue -// App.vue - - - -``` - -:: +:: \ No newline at end of file diff --git a/content/experiments/haunted-house.md b/content/experiments/haunted-house.md index 8fe6041..4ba1adb 100644 --- a/content/experiments/haunted-house.md +++ b/content/experiments/haunted-house.md @@ -9,332 +9,4 @@ tags: ['PointLight', 'fog', 'useTexture', 'threejs-journey'] --- ::haunted-house -:: - -::the-info - -![Haunted house demo](/haunted-house-demo.png) - -# Haunted house - -Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt). - -> This is a TresJs implementation of Haunted house demo from Bruno Simon. - -```vue - - - -``` - -```vue -// floor.vue - - - -``` - -```vue -// house.vue - - - -``` - -```vue -// ghosts.vue - - - -``` - -:: +:: \ No newline at end of file diff --git a/content/experiments/infinite-tube.md b/content/experiments/infinite-tube.md index 8f57ce0..b369e10 100644 --- a/content/experiments/infinite-tube.md +++ b/content/experiments/infinite-tube.md @@ -9,98 +9,4 @@ tags: ['scroll-controls', 'tube-geometry', 'textures-offset'] --- ::infinite-tube -:: - -::the-info - -![infinite-tube](/infinite-tube.png) - -# Infinite tube - -Author: [@**jaimebboyjt**](https://twitter.com/jaimebboyjt). - -> An easy way to create infinite tubes with TresJS. - -```vue - - - - -``` \ No newline at end of file +:: \ No newline at end of file diff --git a/content/experiments/spooky-saur.md b/content/experiments/spooky-saur.md index d1bd387..47bab2a 100644 --- a/content/experiments/spooky-saur.md +++ b/content/experiments/spooky-saur.md @@ -9,14 +9,4 @@ tags: ['lights', 'fog', 'backdrop', 'unrealbloom', useGLTF] --- ::spooky-saur -:: - -::the-info - -# Halloween Spooky-saur πŸŽƒ - -![Spooky-saur](/spooky-saur.png) - -Inspired by [Halloween Bulbasaurs](https://vincenzonova.tumblr.com/post/178892105911/guys-i-did-more-pumpkin-bulbasaurs-more) by [Vince Marcellino](https://twitter.com/vincenzonova?lang=en) I decided to model a spooky-saur and bring it to life with Tres. - -![spooky-saur](https://64.media.tumblr.com/db4fbc6754424097d30a43169ca49183/tumblr_pgcfk3nVeU1w3anp2o1_500.jpg) \ No newline at end of file +:: \ No newline at end of file From 8cea9925b53d699600b01d9a4aa70d616e7c2a8b Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 8 Apr 2024 23:48:15 +0200 Subject: [PATCH 2/9] chore: resize thumbnails to 16 x 9, add README instructions https://github.com/Tresjs/lab/issues/111 --- README.md | 2 +- .../synthwave/components/postprocessing.vue | 4 +++- public/array-cameras.png | Bin 216001 -> 140204 bytes public/brickelangelo-david.png | Bin 650571 -> 140257 bytes public/cult-of-the-lamb.png | Bin 195479 -> 132029 bytes public/environment.png | Bin 159017 -> 93521 bytes public/galaxy-generator.png | Bin 706305 -> 735441 bytes public/github-1k-stars.png | Bin 575970 -> 259137 bytes public/glass-example.png | Bin 1492438 -> 795079 bytes public/haunted-house-demo.png | Bin 1239887 -> 540864 bytes public/html-phone.png | Bin 406455 -> 234382 bytes public/infinite-tube.png | Bin 773835 -> 467535 bytes public/lowpoly-planet.png | Bin 209991 -> 189469 bytes public/magical-marbles.png | Bin 701890 -> 479368 bytes public/nuxt-stones.png | Bin 913840 -> 357095 bytes public/overlay.png | Bin 1376271 -> 368476 bytes public/particle-pumpkin.png | Bin 295768 -> 459244 bytes public/portal-journey.png | Bin 379107 -> 317937 bytes public/post-processing-manual.png | Bin 712749 -> 343816 bytes public/product-landing-page.png | Bin 462393 -> 219738 bytes public/realistic.png | Bin 3594232 -> 903730 bytes public/repulsion-effect.png | Bin 179273 -> 175884 bytes public/scroll-controls.png | Bin 136834 -> 78247 bytes public/spooky-saur.png | Bin 265298 -> 161278 bytes public/synthwave.png | Bin 1544433 -> 449591 bytes public/tresjs-lab-og_001.png | Bin 0 -> 525648 bytes public/wizard-potions-classroom.png | Bin 673340 -> 356477 bytes 27 files changed, 4 insertions(+), 2 deletions(-) create mode 100644 public/tresjs-lab-og_001.png diff --git a/README.md b/README.md index 2ba779b..34e6dd7 100644 --- a/README.md +++ b/README.md @@ -125,7 +125,7 @@ tags: ['basic', 'cientos', 'useGLTF', 'blender'] ``` -5. Take a screenshot of your scene ot the `public` directory. +5. Take a screenshot of your scene. Crop it to 16:9. Save it in the `public` directory as a png. ## License diff --git a/components/content/synthwave/components/postprocessing.vue b/components/content/synthwave/components/postprocessing.vue index e689a1c..215e658 100644 --- a/components/content/synthwave/components/postprocessing.vue +++ b/components/content/synthwave/components/postprocessing.vue @@ -1,7 +1,9 @@ diff --git a/components/TheCodeButton.vue b/components/TheCodeButton.vue new file mode 100644 index 0000000..ac95ada --- /dev/null +++ b/components/TheCodeButton.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/components/content/GlassExample.vue b/components/content/glass-material/index.vue similarity index 100% rename from components/content/GlassExample.vue rename to components/content/glass-material/index.vue diff --git a/components/content/infiniteTube.vue b/components/content/infinite-tube/index.vue similarity index 100% rename from components/content/infiniteTube.vue rename to components/content/infinite-tube/index.vue diff --git a/components/content/scroll-controls-demo/LowPolyPlanet.vue b/components/content/scroll-controls/LowPolyPlanet.vue similarity index 100% rename from components/content/scroll-controls-demo/LowPolyPlanet.vue rename to components/content/scroll-controls/LowPolyPlanet.vue diff --git a/components/content/scroll-controls-demo/Rocket.vue b/components/content/scroll-controls/Rocket.vue similarity index 100% rename from components/content/scroll-controls-demo/Rocket.vue rename to components/content/scroll-controls/Rocket.vue diff --git a/components/content/scroll-controls-demo/index.vue b/components/content/scroll-controls/index.vue similarity index 100% rename from components/content/scroll-controls-demo/index.vue rename to components/content/scroll-controls/index.vue diff --git a/components/content/synthwave/components/gradientSky.vue b/components/content/synthwave-landscape/components/gradientSky.vue similarity index 100% rename from components/content/synthwave/components/gradientSky.vue rename to components/content/synthwave-landscape/components/gradientSky.vue diff --git a/components/content/synthwave/components/grid.vue b/components/content/synthwave-landscape/components/grid.vue similarity index 100% rename from components/content/synthwave/components/grid.vue rename to components/content/synthwave-landscape/components/grid.vue diff --git a/components/content/synthwave/components/mountain.vue b/components/content/synthwave-landscape/components/mountain.vue similarity index 100% rename from components/content/synthwave/components/mountain.vue rename to components/content/synthwave-landscape/components/mountain.vue diff --git a/components/content/synthwave/components/musicPlayer.vue b/components/content/synthwave-landscape/components/musicPlayer.vue similarity index 100% rename from components/content/synthwave/components/musicPlayer.vue rename to components/content/synthwave-landscape/components/musicPlayer.vue diff --git a/components/content/synthwave/components/palette.ts b/components/content/synthwave-landscape/components/palette.ts similarity index 100% rename from components/content/synthwave/components/palette.ts rename to components/content/synthwave-landscape/components/palette.ts diff --git a/components/content/synthwave/components/postprocessing.vue b/components/content/synthwave-landscape/components/postprocessing.vue similarity index 100% rename from components/content/synthwave/components/postprocessing.vue rename to components/content/synthwave-landscape/components/postprocessing.vue diff --git a/components/content/synthwave/components/sun.vue b/components/content/synthwave-landscape/components/sun.vue similarity index 100% rename from components/content/synthwave/components/sun.vue rename to components/content/synthwave-landscape/components/sun.vue diff --git a/components/content/synthwave/components/terrain.vue b/components/content/synthwave-landscape/components/terrain.vue similarity index 100% rename from components/content/synthwave/components/terrain.vue rename to components/content/synthwave-landscape/components/terrain.vue diff --git a/components/content/synthwave/index.vue b/components/content/synthwave-landscape/index.vue similarity index 100% rename from components/content/synthwave/index.vue rename to components/content/synthwave-landscape/index.vue diff --git a/content/experiments/github-1k-stars.md b/content/experiments/github-stars.md similarity index 77% rename from content/experiments/github-1k-stars.md rename to content/experiments/github-stars.md index c929622..0b554ac 100644 --- a/content/experiments/github-1k-stars.md +++ b/content/experiments/github-stars.md @@ -1,7 +1,7 @@ --- -thumbnail: /github-1k-stars.png +thumbnail: /github-stars.png title: 1000 🌟 on Github -slug: github-1k-stars +slug: github-stars author: alvarosabu status: published description: Scene to celebrate 1k stars on Github diff --git a/content/experiments/glass-material.md b/content/experiments/glass-material.md index 36ce1ad..6a277bf 100644 --- a/content/experiments/glass-material.md +++ b/content/experiments/glass-material.md @@ -1,11 +1,11 @@ --- -thumbnail: /glass-example.png +thumbnail: /glass-material.png title: Glass/Plastic Material +slug: glass-material author: jaime-bboyjt status: published description: A realistic glass/plastic effect, play with it! tags: ['materials', 'useTweakPane'] --- -::glass-example -:: \ No newline at end of file + \ No newline at end of file diff --git a/content/experiments/scroll-controls.md b/content/experiments/scroll-controls.md index 0aa0786..545f36d 100644 --- a/content/experiments/scroll-controls.md +++ b/content/experiments/scroll-controls.md @@ -1,11 +1,12 @@ --- thumbnail: /scroll-controls.png title: ScrollControls +slug: scroll-controls author: alvarosabu status: published description: A basic example of how to use the ScrollControl with TresJS and cientos tags: ['cientos', 'scroll', 'controls'] --- -::scroll-controls-demo +::scroll-controls :: \ No newline at end of file diff --git a/content/experiments/synthwave.md b/content/experiments/synthwave-landscape.md similarity index 90% rename from content/experiments/synthwave.md rename to content/experiments/synthwave-landscape.md index 9b9be10..e2e5f83 100644 --- a/content/experiments/synthwave.md +++ b/content/experiments/synthwave-landscape.md @@ -8,5 +8,5 @@ description: Infinite procedural landscape tags: ['procedural', 'shader', 'post-processing'] --- -::synthwave +::synthwave-landscape :: diff --git a/pages/index.vue b/pages/index.vue index 2264cd2..44d5daf 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -16,6 +16,14 @@ const { data: formattedExperiments } = await useAsyncData('/', () => })), ), ) + +function getRepoPath(slug) { + return `https://github.com/Tresjs/lab/tree/main/components/content/${slug}` +} + +function getRepoTitle(slug) { + return `${slug} – code on Github` +}