Setup base for threejs

package.json

@@ -17,6 +17,7 @@
     "core-js": "^3.13.0",
     "jquery": "^3.6.0",
     "scrollreveal": "^4.0.9",
+    "three": "^0.129.0",
     "vue": "^3.0.0"
   },
   "devDependencies": {

src/App.vue

@@ -15,6 +15,13 @@ export default {
 </script>
 
 <style>
+canvas {
+  display: block;
+  position: fixed;
+  z-index: -1;
+  left: 0;
+  top: 0;
+}
 [v-cloak] {
   display: none;
 }

src/components/Intro.vue

@@ -7,43 +7,38 @@
         <div id="job-title">Software Developer</div>
       </div>
       <div id="pic-div">
-        <img
-          id="profile-pic"
-          ref="profilePic"
-          alt="profile picture"
-          src="@/assets/img/me.jpg"
-        />
+        <ProfilePic id="profile-pic" ref="profilePic" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import ScrollReveal from "scrollreveal";
+import ProfilePic from "@/components/ProfilePic";
 
 export default {
   name: "Intro",
+  components: { ProfilePic },
   mounted: function () {
-    this.$refs.profilePic.onload = () => {
-      this.$refs.intro.style.visibility = "visible";
-      const textReveal = {
-        reset: true,
-        origin: "left",
-        delay: 200,
-        distance: "120px",
-        easing: "ease-in-out",
-      };
-      ScrollReveal().reveal("#intro-text", textReveal);
-
-      const imgReveal = {
-        reset: true,
-        origin: "right",
-        delay: 200,
-        distance: "120px",
-        easing: "ease-in-out",
-      };
-      ScrollReveal().reveal("#pic-div", imgReveal);
+    this.$refs.intro.style.visibility = "visible";
+    const textReveal = {
+      reset: true,
+      origin: "left",
+      delay: 200,
+      distance: "120px",
+      easing: "ease-in-out",
     };
+    ScrollReveal().reveal("#intro-text", textReveal);
+
+    const imgReveal = {
+      reset: true,
+      origin: "right",
+      delay: 200,
+      distance: "120px",
+      easing: "ease-in-out",
+    };
+    ScrollReveal().reveal("#pic-div", imgReveal);
   },
 };
 </script>
@@ -95,18 +90,18 @@ p {
   height: 50%;
 }
 
-#profile-pic {
-  border-radius: 50%;
-  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
-  border: 10px solid white;
-  max-height: 100%;
-  transition: transform 0.4s ease-in-out;
-  max-width: 80%;
-}
-
-#profile-pic:hover {
-  transform: scale(1.25);
-}
+/*#profile-pic {*/
+/*  border-radius: 50%;*/
+/*  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;*/
+/*  border: 10px solid white;*/
+/*  max-height: 100%;*/
+/*  transition: transform 0.4s ease-in-out;*/
+/*  max-width: 80%;*/
+/*}*/
+
+/*#profile-pic:hover {*/
+/*  transform: scale(1.25);*/
+/*}*/
 
 @media screen and (max-width: 768px) {
   #intro {

src/components/ProfilePic.vue

@@ -0,0 +1,133 @@
+<template>
+  <canvas class="webgl" />
+</template>
+
+<script>
+import * as THREE from "three";
+export default {
+  name: "ProfilePic",
+  data() {
+    return {
+      sceneCanvas: null,
+      scene: null,
+      camera: null,
+      renderer: null,
+      controls: null,
+    };
+  },
+  computed: {
+    sceneWidth: function () {
+      return this.sceneCanvas.getBoundingClientRect().width;
+    },
+    sceneHeight: function () {
+      return this.sceneCanvas.getBoundingClientRect().height;
+    },
+  },
+  mounted: function () {
+    // Debug
+    // const gui = new dat.GUI();
+
+    // Canvas
+    this.sceneCanvas = document.querySelector("canvas.webgl");
+
+    // Scene
+    const scene = new THREE.Scene();
+
+    // Objects
+    const geometry = new THREE.TorusGeometry(0.7, 0.2, 16, 100);
+
+    // Materials
+
+    const material = new THREE.MeshBasicMaterial();
+    material.color = new THREE.Color(0xff0000);
+
+    // Mesh
+    const sphere = new THREE.Mesh(geometry, material);
+    scene.add(sphere);
+
+    // Lights
+
+    const pointLight = new THREE.PointLight(0xffffff, 0.1);
+    pointLight.position.x = 2;
+    pointLight.position.y = 3;
+    pointLight.position.z = 4;
+    scene.add(pointLight);
+
+    /**
+     * Sizes
+     */
+    const sizes = {
+      width: this.sceneWidth,
+      height: this.sceneHeight,
+    };
+
+    window.addEventListener("resize", () => {
+      // Update sizes
+      sizes.width = this.sceneWidth;
+      sizes.height = this.sceneHeight;
+
+      // 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 = 0;
+    camera.position.y = 0;
+    camera.position.z = 2;
+    scene.add(camera);
+
+    // Controls
+    // const controls = new OrbitControls(camera, canvas)
+    // controls.enableDamping = true
+
+    /**
+     * Renderer
+     */
+    const renderer = new THREE.WebGLRenderer({
+      canvas: this.sceneCanvas,
+    });
+    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 objects
+      sphere.rotation.y = 0.5 * elapsedTime;
+
+      // Update Orbital Controls
+      // controls.update()
+
+      // Render
+      renderer.render(scene, camera);
+
+      // Call tick again on the next frame
+      window.requestAnimationFrame(tick);
+    };
+
+    tick();
+  },
+};
+</script>
+
+<style scoped></style>