#28

Implemented the Container Object Utility.

Co-Authored-By: Faru Nuri Sönmez <[email protected]>

src/app/types/interfaces/utils/scene/objects/container.object.util.interface.type.ts

@@ -0,0 +1,8 @@
+import { IScene } from "../scene.util.interface.type";
+
+export interface IContainerObjectUtil extends IScene {
+    width: number;
+    height: number;
+    length: number;
+    capacity: number;
+}

src/app/types/interfaces/utils/scene/objects/floor.object.util.interface.type.ts

@@ -0,0 +1,5 @@
+import { IScene } from "../scene.util.interface.type";
+
+export interface IFloorObjectUtil extends IScene{
+
+}

src/app/types/interfaces/utils/scene/scene.util.interface.type.ts

@@ -0,0 +1,5 @@
+import * as THREE from "three";
+
+export interface IScene {
+    scene: THREE.Scene;
+}

src/app/utils/scene/objects/container.object.util.ts

@@ -0,0 +1,85 @@
+import React, { useEffect } from "react"
+import * as THREE from "three"
+import { IContainerObjectUtil } from "@/app/types/interfaces/utils/scene/objects/container.object.util.interface.type"
+import { scale_meter_px } from "@/app/constants/scene/scene.constants"
+
+const ContainerObjectUtil = (props: IContainerObjectUtil) => {
+    const weight = props.width * 100;
+    const height = props.height * scale_meter_px;
+    const length = props.length * scale_meter_px;
+    const containerCapacity = weight * height * length;
+
+    var material = new THREE.MeshLambertMaterial({
+        color: 0x949494,
+        side: THREE.DoubleSide
+    });
+
+    var transparentMaterial = new THREE.MeshLambertMaterial({
+        color: 0x949494,
+        side: THREE.DoubleSide,
+        transparent: true,
+        opacity: 0.5,
+    });
+
+    useEffect(() => {
+        loadContainer();
+    }, [props.scene])
+
+    const loadContainer = () => {
+        var plane;
+        var container = new THREE.Group();
+
+        /**
+         * Oluşturulan kutunun alt kısmını temsil eden geometriyi oluşturur.
+         * @param {number} weight - Kutunun genişliği.
+         * @param {number} length - Kutunun uzunluğu.
+         * @returns {THREE.BoxGeometry} - Oluşturulan geometri.
+        * */
+        const frontGeometry = new THREE.BoxGeometry(weight + 5, 5, length + 5);
+        // Geometriyi belirli bir konuma çevirme:
+        // Kutunun ortasından -5 birim sol ve yukarıda, ve uzunluğunun yarısı kadar sağ ve geride konumlandırılır.
+        frontGeometry.translate(weight / 2 - 5 / 2, - 5 / 2 - 0.1, length / 2 - 5 / 2);
+
+        plane = new THREE.Mesh(frontGeometry, material)
+        plane.name = "front"
+        container.add(plane)
+        plane.castShadow = true;
+        plane.receiveShadow = true;
+
+        const backGeometry = new THREE.BoxGeometry(weight + 5, 5, length + 5);
+        backGeometry.translate(weight / 2 - 5 / 2, -5 / 2 - 0.1, -(length / 2 - 5 / 2)); // Negative z-axis translation
+        plane = new THREE.Mesh(backGeometry, transparentMaterial)
+        plane.name = "back"
+        //container.add(plane)
+
+        const topGeometry = new THREE.BoxGeometry(weight + 5, height, 5);
+        topGeometry.translate(weight / 2 - 5 / 2, height / 2, -5 / 2 - 0.1);
+        plane = new THREE.Mesh(topGeometry, transparentMaterial)
+        container.add(plane)
+
+        const bottomGeometry = new THREE.BoxGeometry(weight + 5, 5, length + 5);
+        bottomGeometry.translate(weight / 2 - 5 / 2, height + 5 / 2 + 0.1, length / 2 - 5 / 2);
+        plane = new THREE.Mesh(bottomGeometry, transparentMaterial)
+        //container.add(plane)
+
+        const rightSideGeometry = new THREE.BoxGeometry(5, height, length);
+        rightSideGeometry.translate(-5 / 2 - 0.1, height / 2, length / 2);
+        plane = new THREE.Mesh(rightSideGeometry, transparentMaterial)
+        container.add(plane)
+
+        const leftSideGeometry = new THREE.BoxGeometry(5, height, length);
+        leftSideGeometry.translate(weight - 5 / 2 + 0.1, height / 2, length / 2);
+        plane = new THREE.Mesh(leftSideGeometry, transparentMaterial)
+        //container.add(plane)
+
+        loadTruck(container)
+    }
+
+    const loadTruck = (container: THREE.Group) => {
+        props.scene.add(container);
+    }
+
+    return null
+}
+
+export default ContainerObjectUtil

src/app/utils/scene/objects/floor.object.util.ts

@@ -0,0 +1,40 @@
+import React, { useEffect } from "react";
+import * as THREE from "three";
+
+import { IFloorObjectUtil } from "@/app/types/interfaces/utils/scene/objects/floor.object.util.interface.type";
+
+const FloorObjectUtil = (props:IFloorObjectUtil) => {
+
+    useEffect(() => {
+        const textureLoader = new THREE.TextureLoader();
+
+        const WIDTH: number = 3000;
+        const LENGTH: number = 3000;
+        const NUM_X: number = 6;
+        const NUM_Z: number = 6;
+
+        const geometry: THREE.PlaneGeometry = new THREE.PlaneGeometry(WIDTH, LENGTH, 1, 1);
+
+        const material: THREE.MeshStandardMaterial = new THREE.MeshStandardMaterial({
+            displacementScale: 0.3,
+            roughness: 1,
+        });
+
+        for (let i: number = 0; i < NUM_X; i++) {
+            for (let j: number = 0; j < NUM_Z; j++) {
+                const floor: THREE.Mesh = new THREE.Mesh(geometry, material);
+                floor.castShadow = false;
+                floor.receiveShadow = true;
+                floor.rotation.x = -Math.PI / 2;
+                floor.position.y = -10;
+
+                props.scene.add(floor);
+            }
+        }
+
+    }, [props.scene]);
+
+    return null; // No need to render anything
+};
+
+export default FloorObjectUtil;

src/app/utils/scene/scene.utils.tsx

@@ -4,7 +4,9 @@ import * as THREE from 'three';
 import { loadCamera } from './camera.util';
 import { loadSky } from './sky.util';
 import { loadLight } from './light.util';
-import { loadFloor } from './floor.util';
+import FloorObjectUtil from './objects/floor.object.util';
+import ContainerObjectUtil from './objects/container.object.util';
+
 import ModesSidebarComponent from '@/app/components/sidebars/modes.sidebar.component';
 import ModesButtonComponent from '@/app/components/buttons/modes.button.component';
 
@@ -13,29 +15,41 @@ import ModesButtonComponent from '@/app/components/buttons/modes.button.componen
  * using the respective helper functions.
  * @returns {JSX.Element} The JSX element representing the container for the Three.js scene.
  */
-export function SceneUtils() : JSX.Element{
+export function SceneUtils(): JSX.Element {
     const containerRef = useRef<HTMLDivElement>(null);
 
     const [modesSidebar, setModesSidebar] = useState<boolean>(false);
 
+    const [scene, setScene] = useState<THREE.Scene>(new THREE.Scene()); // Scene state
+
+
+
     useEffect(() => {
         // Creates a Three.js scene.
         const scene = new THREE.Scene();
+
         // Loads the camera.
         loadCamera(scene, containerRef);
         // Loads the sky.
         loadSky(scene);
         // Loads the light.
         loadLight(scene);
-        //
-        loadFloor(scene);
 
-        const axesHelper = new THREE.AxesHelper( 1200 );
-        scene.add( axesHelper );
+        const axesHelper = new THREE.AxesHelper(1200);
+        axesHelper.setColors("red","blue","green");
+        scene.add(axesHelper);
+
+        setScene(scene); // Set the scene state
     }, []);
 
     return <div ref={containerRef}>
-        <ModesButtonComponent open={() => setModesSidebar(!modesSidebar)}/>
-        <ModesSidebarComponent open={modesSidebar} label="Menu"/>
+        {scene &&
+            <>
+                <FloorObjectUtil scene={scene} />
+                <ContainerObjectUtil scene={scene} width={2.45} height={3} length={13.60}  capacity={1} />
+            </>
+        }
+        <ModesButtonComponent open={() => setModesSidebar(!modesSidebar)} />
+        <ModesSidebarComponent open={modesSidebar} label="Menu" />
     </div>
 }