added test scene to project page

tomcatbuzz · Jun 23, 2024 · c06613a · c06613a
1 parent f39cb93
commit c06613a
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 71 deletions.
diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
@@ -8,3 +8,5 @@
   <ion-button (click)="stuff()">GREAT IONIC BUTTON</ion-button>
 </ion-content>
 
+<app-footer></app-footer>
+
diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts
@@ -3,13 +3,14 @@ import { IonHeader, IonToolbar, IonButtons, IonButton, IonMenuButton, IonTitle,
 
 import { HeaderComponent } from '../header/header.component';
 import * as THREE from 'three';
+import { FooterComponent } from '../footer/footer.component';
 
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonButtons, IonButton, IonMenuButton, IonTitle, IonContent, HeaderComponent],
+  imports: [IonHeader, IonToolbar, IonButtons, IonButton, IonMenuButton, IonTitle, IonContent, HeaderComponent, FooterComponent],
 })
 export class AboutComponent  implements OnInit {
 

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -5,3 +5,5 @@
 
   </div>
 </ion-content>
+
+<app-footer></app-footer>
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -5,16 +5,17 @@ import { IonHeader, IonToolbar, IonButtons, IonMenuButton, IonTitle, IonContent
 import { HeaderComponent } from '../header/header.component';
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { FooterComponent } from '../footer/footer.component';
 // import model from '../../assets/facefull.glb'
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonButtons, IonMenuButton, IonTitle, IonContent, HeaderComponent],
+  imports: [IonHeader, IonToolbar, IonButtons, IonMenuButton, IonTitle, IonContent, HeaderComponent, FooterComponent],
 })
-export class HomeComponent  implements OnInit, OnDestroy {
+export class HomeComponent  implements OnInit, OnDestroy, AfterViewChecked {
   @ViewChild('rendererContainer', { static: true }) rendererContainer!: ElementRef<HTMLDivElement>;
   private renderer!: THREE.WebGLRenderer;
   private scene!: THREE.Scene;
@@ -31,21 +32,23 @@ export class HomeComponent  implements OnInit, OnDestroy {
   // private activatedRoute = inject(ActivatedRoute);
   private model!: any;
   time: 0 = 0;
-  modelLoaded: any;
+
+  // this.width = this.rendererContainer.nativeElement.offsetWidth;
+  // this.height = this.rendererContainer.nativeElement.offsetHeight;
 
   constructor() {
     this.renderScene = this.renderScene.bind(this);
   }
 
   ngOnInit() {
-    const width = this.rendererContainer.nativeElement.offsetWidth;
-    const height = this.rendererContainer.nativeElement.offsetHeight;
+    // const width = this.rendererContainer.nativeElement.offsetWidth;
+    // const height = this.rendererContainer.nativeElement.offsetHeight;
 
-    if (width > 0 && height > 0) {
-      this.initRenderTargets(width, height);
-    } else {
-      console.warn('Invalid dimensions for render targets');
-    }
+    // if (width > 0 && height > 0) {
+    //   this.initRenderTargets(width, height);
+    // } else {
+    //   console.warn('Invalid dimensions for render targets');
+    // }
     // const loader = new GLTFLoader()
     // this.model = '../../assets/facefull.glb'
     // this.home = this.activatedRoute.snapshot.paramMap.get('id') as string;
@@ -80,26 +83,26 @@ uniform float cameraFar;
 attribute float y;
 
 // ORIGINAL CODE BELOW
-// float readDepth( sampler2D depthSampler, vec2 coord ) {
-// 	float fragCoordZ = texture2D( depthSampler, coord ).x;
-// 	float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
-// 	return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
-// }
+float readDepth( sampler2D depthSampler, vec2 coord ) {
+	float fragCoordZ = texture2D( depthSampler, coord ).x;
+	float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
+	return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
+}
 
 // GPT SUGGESTED
-float perspectiveDepthToViewZ( const in float invClipZ, const in float near, const in float far ) {
-  return ( near * far ) / ( ( far - near ) * invClipZ - far );
-}
+// float perspectiveDepthToViewZ( const in float invClipZ, const in float near, const in float far ) {
+//   return ( near * far ) / ( ( far - near ) * invClipZ - far );
+// }
 
-float viewZToOrthographicDepth( const in float viewZ, const in float near, const in float far ) {
-  return ( viewZ + near ) / ( near - far );
-}
+// float viewZToOrthographicDepth( const in float viewZ, const in float near, const in float far ) {
+//   return ( viewZ + near ) / ( near - far );
+// }
 
-float readDepth( sampler2D depthSampler, vec2 coord ) {
-  float fragCoordZ = texture2D( depthSampler, coord ).x;
-  float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
-  return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
-}
+// float readDepth( sampler2D depthSampler, vec2 coord ) {
+//   float fragCoordZ = texture2D( depthSampler, coord ).x;
+//   float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
+//   return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
+// }
 
 // Simplex 2D noise
 //
@@ -159,9 +162,9 @@ float snoise(vec3 v){
 // Permutations
   i = mod(i, 289.0 ); 
   vec4 p = permute( permute( permute( 
-             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
-           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
-           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
+  i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+  + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
+  + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
 
 // Gradients
 // ( N*N points uniformly over a square, mapped onto an octahedron.)
@@ -231,26 +234,26 @@ void main() {
     float PI = 3.141592653589793238;
 
     // ORIGINAL CODE BELOW
-    // float readDepth( sampler2D depthSampler, vec2 coord ) {
-    //   float fragCoordZ = texture2D( depthSampler, coord ).x;
-    //   float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
-    //   return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
-    // }
-
-    // GPT SUGGESTED CODE
-    float perspectiveDepthToViewZ( const in float invClipZ, const in float near, const in float far ) {
-      return ( near * far ) / ( ( far - near ) * invClipZ - far );
-    }
-    
-    float viewZToOrthographicDepth( const in float viewZ, const in float near, const in float far ) {
-      return ( viewZ + near ) / ( near - far );
-    }
-    
     float readDepth( sampler2D depthSampler, vec2 coord ) {
       float fragCoordZ = texture2D( depthSampler, coord ).x;
       float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
       return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
     }
+
+    // GPT SUGGESTED CODE
+    // float perspectiveDepthToViewZ( const in float invClipZ, const in float near, const in float far ) {
+    //   return ( near * far ) / ( ( far - near ) * invClipZ - far );
+    // }
+    
+    // float viewZToOrthographicDepth( const in float viewZ, const in float near, const in float far ) {
+    //   return ( viewZ + near ) / ( near - far );
+    // }
+    
+    // float readDepth( sampler2D depthSampler, vec2 coord ) {
+    //   float fragCoordZ = texture2D( depthSampler, coord ).x;
+    //   float viewZ = perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar );
+    //   return viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
+    // }
     void main()	{
     // gl_FragColor = vec4(vUv,0.0,1.);
 
@@ -358,10 +361,10 @@ void main() {
     //   console.log(this.model, 'model running?')
     // });
 
-    this.loadModel();
-    this.initRenderer();
-    this.startRenderLoop();
-    this.initRenderTargets(width, height);
+    // this.loadModel();
+    // this.initRenderer();
+    // this.startRenderLoop();
+    // this.initRenderTargets(width, height);
   }
 
   initRenderTargets(width: number, height: number) {
@@ -415,7 +418,7 @@ void main() {
       });
 
       this.setupModel();
-      this.startRenderLoop();
+      // this.startRenderLoop();
     })
   }
 
@@ -487,7 +490,7 @@ void main() {
     this.target1 = temp;
 
     // Request the next frame
-    this.renderLoop = requestAnimationFrame(this.renderScene);
+    // this.renderLoop = requestAnimationFrame(this.renderScene);
   };
 
   // ORIGINAL WORKING FOR RENDER
@@ -504,20 +507,23 @@ void main() {
   // }
 
   // NEW NGAFTERVIEWCHECKED
-  // ngAfterViewChecked() {
-  //   if (!this.rendererInitialized && this.rendererContainer) {
-  //     const width = this.rendererContainer.nativeElement.offsetWidth;
-  //     const height = this.rendererContainer.nativeElement.offsetHeight;
-  //     if (width > 0 && height > 0) {
-  //       // Create the render targets with valid dimensions
-  //       this.initRenderTargets(width, height);
-  //       // ... (other initialization code)
-  //     } else {
-  //       console.warn('Invalid dimensions for render targets');
-  //     }
-  //     this.rendererInitialized = true;
-  //   }
-  // }
+  ngAfterViewChecked() {
+    if (!this.rendererInitialized && this.rendererContainer) {
+      const width = this.rendererContainer.nativeElement.offsetWidth;
+      const height = this.rendererContainer.nativeElement.offsetHeight;
+      if (width > 0 && height > 0) {
+        // Create the render targets with valid dimensions
+        this.initRenderTargets(width, height);
+        // ... (other initialization code)
+      } else {
+        console.warn('Invalid dimensions for render targets');
+      }
+      this.rendererInitialized = true;
+    }
+    this.loadModel();
+    this.initRenderer();
+    this.startRenderLoop();
+  }
 
   // private render = () => { 
   //   this.time++; 
@@ -577,7 +583,8 @@ void main() {
     const height = this.rendererContainer.nativeElement.offsetHeight;
     this.camera.aspect = window.innerWidth / window.innerHeight;
     this.camera.updateProjectionMatrix();
-    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    // this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.renderer.setSize(width, height);
 
     // Update render target dimensions
     this.updateRenderTargetDimensions(width, height);

diff --git a/src/app/projects/projects.component.html b/src/app/projects/projects.component.html
@@ -1,4 +1,9 @@
 <app-header></app-header>
-<p>
-  projects works!
-</p>
+<ion-content [fullscreen]="true">
+  <div #rendererContainer>
+    <div class="project_wrapper">
+      <h1 class="tag">Projects</h1>
+    </div>
+  </div>
+</ion-content>
+
diff --git a/src/app/projects/projects.component.scss b/src/app/projects/projects.component.scss
@@ -0,0 +1,20 @@
+.project_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tag {
+  position: absolute;
+  top: 50%;
+  left: 30%;
+  transform: translate(-50%, -30%);
+  z-index: 1;
+  color: white;
+}
+
+#rendererContainer {
+  width: 100vw;
+  height: 100vh;
+  display: block;
+}
diff --git a/src/app/projects/projects.component.ts b/src/app/projects/projects.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 
 import { IonHeader, IonToolbar, IonButtons, IonButton, IonMenuButton, IonTitle, IonContent } from '@ionic/angular/standalone';
 
@@ -14,11 +14,58 @@ import * as THREE from 'three';
   imports: [IonHeader, IonToolbar, IonButtons, IonButton, IonMenuButton, IonTitle, IonContent, HeaderComponent],
 })
 export class ProjectsComponent  implements OnInit {
+  @ViewChild('rendererContainer', { static: true }) rendererContainer!: ElementRef<HTMLDivElement>;
+  scene: any;
+  camera: any;
+  renderer: any;
+  cube: any;
+  geometry: any;
+  material: any;
+  mesh: any;
 
   constructor() { }
 
   ngOnInit() {
-    console.log('projects');
+    this.init();
+    this.animate();
+  }
+
+  onResize() {
+    this.camera.aspect = window.innerWidth / window.innerHeight;
+    this.camera.updateProjectionMatrix();
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+  }
+
+  init() {
+    this.camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
+    this.camera.position.z = 2;
+
+    this.scene = new THREE.Scene();
+
+    this.geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
+    this.material = new THREE.MeshNormalMaterial();
+
+    this.mesh = new THREE.Mesh( this.geometry, this.material );
+    this.scene.add( this.mesh );
+
+    this.renderer = new THREE.WebGLRenderer( { antialias: true } );
+    this.renderer.setSize( window.innerWidth, window.innerHeight );
+
+    // const scene = document.getElementById('canvas');
+
+    // // document.body.appendChild( this.renderer.domElement );
+    // scene.appendChild( this.renderer.domElement );
+    this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
+  }
+
+  animate() {
+      requestAnimationFrame(() => this.animate());
+      this.mesh.rotation.x += 0.001;
+      this.mesh.rotation.y += 0.002;
+      // this moves it animated-- need to position scene somewhere
+      // this.mesh.position.x += 0.001;
+      // this.mesh.position.y += 0.002;  
+      this.renderer.render( this.scene, this.camera );      
   }
 
 }