Implement house hunting functionality

src/lessons/geometry.ts

@@ -11,14 +11,46 @@ export const geometry = () => {
   // Object
   const geometry = new THREE.BufferGeometry();
 
-  const count = 50;
-  const positionsArray = new Float32Array(count * 3 * 3);
+  const radius = 1;
+  const height = 2;
+  const radialSegments = 20;
 
-  for (let i = 0; i < count * 3 * 3; i++) {
-    positionsArray[i] = (Math.random() - 0.5) * 4;
+  const positionsArray = [];
+  const indicesArray = [];
+
+  // Generate vertices and indices for the cone
+  for (let i = 0; i < radialSegments; i++) {
+    const theta = (i / radialSegments) * Math.PI * 2;
+    const nextTheta = ((i + 1) / radialSegments) * Math.PI * 2;
+
+    // Base vertices
+    const x0 = radius * Math.cos(theta);
+    const y0 = 0;
+    const z0 = radius * Math.sin(theta);
+
+    const x1 = radius * Math.cos(nextTheta);
+    const y1 = 0;
+    const z1 = radius * Math.sin(nextTheta);
+
+    // Apex vertex
+    const x2 = 0;
+    const y2 = height;
+    const z2 = 0;
+
+    // Push vertices
+    positionsArray.push(x0, y0, z0, x1, y1, z1, x2, y2, z2);
+
+    // Calculate indices
+    const baseIndex = i * 3;
+    indicesArray.push(baseIndex, baseIndex + 1, baseIndex + 2);
   }
-  const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3);
+
+  const positionsAttribute = new THREE.Float32BufferAttribute(
+    positionsArray,
+    3
+  );
   geometry.setAttribute("position", positionsAttribute);
+  geometry.setIndex(indicesArray);
 
   //   const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);
   const material = new THREE.MeshBasicMaterial({

src/lessons/materials.ts

@@ -15,15 +15,15 @@ export const materials = () => {
   // Textures
   const textureLoader = new THREE.TextureLoader();
 
-  const doorColorTexture = textureLoader.load("/assets/door/color.jpg");
-  //   const doorAlphaTexture = textureLoader.load("/assets/door/alpha.jpg");
+  const doorColorTexture = textureLoader.load("/assets/_door/color.jpg");
+  //   const doorAlphaTexture = textureLoader.load("/assets/_door/alpha.jpg");
   //   const doorAmbientOcclusionTexture = textureLoader.load(
-  // "/assets/door/ambientOcclusion.jpg"
+  // "/assets/_door/ambientOcclusion.jpg"
   //   );
-  //   const doorHeightTexture = textureLoader.load("/assets/door/height.jpg");
-  //   const doorNormalTexture = textureLoader.load("/assets/door/normal.jpg");
-  //   const doorMetalnessTexture = textureLoader.load("/assets/door/metalness.jpg");
-  //   const doorRoughnessTexture = textureLoader.load("/assets/door/roughness.jpg");
+  //   const doorHeightTexture = textureLoader.load("/assets/_door/height.jpg");
+  //   const doorNormalTexture = textureLoader.load("/assets/_door/normal.jpg");
+  //   const doorMetalnessTexture = textureLoader.load("/assets/_door/metalness.jpg");
+  //   const doorRoughnessTexture = textureLoader.load("/assets/_door/roughness.jpg");
   //   const matcapTexture = textureLoader.load("/assets/texture/matcap.jpg");
   //   const matcapTexture1 = textureLoader.load("/assets/texture/matcap2.png");
   //   const matcapTexture2 = textureLoader.load("/assets/texture/matcap3.avif");
@@ -39,7 +39,7 @@ export const materials = () => {
   });
 
   doorColorTexture.colorSpace = THREE.SRGBColorSpace;
-//   matcapTexture.colorSpace = THREE.SRGBColorSpace;
+  matcapTexture.colorSpace = THREE.SRGBColorSpace;
 
   // Objects
   //   const material = new THREE.MeshBasicMaterial({

src/lessons/shadows.ts

@@ -21,7 +21,7 @@ export const shadows = () => {
 
   // Canvas
   const canvas = document.querySelector("canvas.webgl") as HTMLCanvasElement;
-    
+
   // Scene
   const scene = new THREE.Scene();
 
@@ -118,7 +118,10 @@ export const shadows = () => {
   sphere.position.y = 0.5;
   sphere.castShadow = true;
 
-  const plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 5), new THREE.MeshBasicMaterial());
+  const plane = new THREE.Mesh(
+    new THREE.PlaneGeometry(5, 5),
+    new THREE.MeshBasicMaterial()
+  );
   plane.rotation.x = -Math.PI * 0.5;
   plane.position.y = -0.5;
 
@@ -135,8 +138,8 @@ export const shadows = () => {
       alphaMap: simpleShadow,
     })
   );
-    sphereShadow.rotation.x = -Math.PI * 0.5;
-    sphereShadow.position.y = plane.position.y + 0.01;
+  sphereShadow.rotation.x = -Math.PI * 0.5;
+  sphereShadow.position.y = plane.position.y + 0.01;
 
   scene.add(sphereShadow);
 
@@ -199,19 +202,19 @@ export const shadows = () => {
   /**
    * Animate
    */
-  const clock = new THREE.Clock()
+  const clock = new THREE.Clock();
 
   const tick = () => {
-    const elapsedTime = clock.getElapsedTime()
+    const elapsedTime = clock.getElapsedTime();
     // update sphere
-    sphere.position.x = Math.cos(elapsedTime) * 1.5
-    sphere.position.z = Math.sin(elapsedTime) * 1.5
-    sphere.position.y = Math.abs(Math.sin(elapsedTime * 3))
+    sphere.position.x = Math.cos(elapsedTime) * 1.5;
+    sphere.position.z = Math.sin(elapsedTime) * 1.5;
+    sphere.position.y = Math.abs(Math.sin(elapsedTime * 3));
 
     // update shadow
-    sphereShadow.position.x = sphere.position.x
-    sphereShadow.position.z = sphere.position.z
-    sphereShadow.material.opacity = (1 - sphere.position.y) * 0.5
+    sphereShadow.position.x = sphere.position.x;
+    sphereShadow.position.z = sphere.position.z;
+    sphereShadow.material.opacity = (1 - sphere.position.y) * 0.5;
 
     // Update controls
     controls.update();

src/main.tsx

@@ -1,4 +1,4 @@
 import './index.css'
-import { shadows } from './lessons/shadows.ts';
+import { hunterHouse } from './practice/hunterHouse.ts';
 
-shadows();
+hunterHouse();