three js inside directly

src/components/sections/TextSection.vue

@@ -1,9 +1,41 @@
+
 <script setup>
+import { ref, onMounted, onUnmounted } from "vue"
+import gsap from "gsap"
+import ScrollTrigger from "gsap/ScrollTrigger"
+import Flip from 'gsap/dist/Flip'
+
+
+gsap.registerPlugin(Flip, ScrollTrigger);
+
+let ctx, renderer, scene, camera, mesh, canvasEl;
+
+
+function initThree(canvas) {
+  renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+  renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+  scene = new THREE.Scene();
+  camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
+  camera.position.set(0, 0, 3);
+
+  const mat = new THREE.MeshBasicMaterial({ map: makeGradientNoiseTexture() });
+  mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), mat);
+  scene.add(mesh);
+
+  gsap.ticker.add(render);
+  onResize();
+
+  buildTimeline();
+}
 
 </script>
 
 <template>
-  <section ref="section" class="text-section">
+  <div class="spacer">scroll down</div>
+
+<div class="main">
+  <div class="container initial">
     <h2 class="fade-text">
       Do you want to see where I used to study?
       <!-- A blog that <span class="highlight">moves with you</span> -->
@@ -13,7 +45,17 @@
     <router-link to="/experience">
     <button class="btn">Zur Experience</button>
   </router-link>
-  </section>
+  </div>
+
+  <div class="container second">
+    <div class="marker"></div>
+  </div>
+
+  <div class="container third">
+    <div class="marker"></div>
+  </div>
+</div>
+
 </template>
 
 <style scoped>
@@ -28,7 +70,7 @@
 }
 
 h2 {
-  font-size: 3rem;
+  font-size: 1.2rem;
   margin-bottom: 2rem;
 }
 
@@ -61,4 +103,96 @@ h2 {
   transform: translateY(0);
   box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
+
+:root {
+  --grid-line: rgba(255, 255, 255, 0.08);
+  --box-border: rgba(255, 255, 255, 0.25);
+}
+
+
+body {
+  background-image: linear-gradient(
+      rgba(255, 255, 255, 0.05) 2px,
+      transparent 2px
+    ),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
+    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
+  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.spacer {
+  width: 100%;
+  height: 20vh;
+  display: grid;
+  place-items: center;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  opacity: 0.8;
+}
+
+.main {
+  position: relative;
+  height: 200vh;
+}
+
+.container {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  display: grid;
+  place-items: center;
+  border: 2px dashed var(--box-border);
+  border-radius: 12px;
+}
+
+.initial {
+  left: 60%;
+  top: 10%;
+}
+
+.container.second {
+  left: 10%;
+  top: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.second .marker {
+  width: 100px;
+  height: 100px;
+}
+
+.third {
+  right: 10%;
+  bottom: 3rem;
+}
+
+.marker {
+  width: 200px;
+  height: 200px;
+  border-radius: 10px;
+  outline: 1px dashed var(--grid-line);
+  outline-offset: -6px;
+  opacity: 0.6;
+}
+
+
+canvas.box {
+  width: 200px;
+  height: 200px;
+  border: dashed 1px #d2ceff;
+  display: block;
+  border-radius: 10px;
+  background: transparent;
+  z-index: 2;
+}
+
 </style>