From 3808a8fdd5b8e9204649dc42c465bb68a1552e35 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 8 Apr 2024 10:53:45 +0300 Subject: [PATCH] #28 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented the Container Object Utility. Co-Authored-By: Faru Nuri Sönmez --- .../container.object.util.interface.type.ts | 8 ++ .../floor.object.util.interface.type.ts | 5 ++ .../utils/scene/scene.util.interface.type.ts | 5 ++ src/app/utils/scene/floor.util.ts | 32 ------- .../scene/objects/container.object.util.ts | 85 +++++++++++++++++++ .../utils/scene/objects/floor.object.util.ts | 40 +++++++++ src/app/utils/scene/scene.utils.tsx | 30 +++++-- 7 files changed, 165 insertions(+), 40 deletions(-) create mode 100644 src/app/types/interfaces/utils/scene/objects/container.object.util.interface.type.ts create mode 100644 src/app/types/interfaces/utils/scene/objects/floor.object.util.interface.type.ts create mode 100644 src/app/types/interfaces/utils/scene/scene.util.interface.type.ts delete mode 100644 src/app/utils/scene/floor.util.ts create mode 100644 src/app/utils/scene/objects/container.object.util.ts create mode 100644 src/app/utils/scene/objects/floor.object.util.ts diff --git a/src/app/types/interfaces/utils/scene/objects/container.object.util.interface.type.ts b/src/app/types/interfaces/utils/scene/objects/container.object.util.interface.type.ts new file mode 100644 index 0000000..879f69e --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/types/interfaces/utils/scene/objects/floor.object.util.interface.type.ts b/src/app/types/interfaces/utils/scene/objects/floor.object.util.interface.type.ts new file mode 100644 index 0000000..40f0887 --- /dev/null +++ b/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{ + +} \ No newline at end of file diff --git a/src/app/types/interfaces/utils/scene/scene.util.interface.type.ts b/src/app/types/interfaces/utils/scene/scene.util.interface.type.ts new file mode 100644 index 0000000..b226ff4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/utils/scene/floor.util.ts b/src/app/utils/scene/floor.util.ts deleted file mode 100644 index 9f69451..0000000 --- a/src/app/utils/scene/floor.util.ts +++ /dev/null @@ -1,32 +0,0 @@ -import * as THREE from "three" - - -export function loadFloor(scene: any): void { - const textureLoader = new THREE.TextureLoader(); - - const WIDTH = 1800 - const LENGTH = 1800 - const NUM_X = 6 - const NUM_Z = 6 - - const geometry = new THREE.PlaneGeometry(WIDTH, LENGTH, 1, 1); - - const material = new THREE.MeshStandardMaterial( - { - displacementScale: 0.3, - roughness: 1, - }) - for (let i = 0; i < NUM_X; i++) { - for (let j = 0; j < NUM_Z; j++) { - const floor = new THREE.Mesh(geometry, material) - floor.castShadow = false; - floor.receiveShadow = true; - floor.rotation.x = - Math.PI / 2 - floor.position.y = - 110 - - - - scene.add(floor) - } - } -} \ No newline at end of file diff --git a/src/app/utils/scene/objects/container.object.util.ts b/src/app/utils/scene/objects/container.object.util.ts new file mode 100644 index 0000000..f736232 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/app/utils/scene/objects/floor.object.util.ts b/src/app/utils/scene/objects/floor.object.util.ts new file mode 100644 index 0000000..f27a032 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/app/utils/scene/scene.utils.tsx b/src/app/utils/scene/scene.utils.tsx index 1e82ca1..c53c7b7 100644 --- a/src/app/utils/scene/scene.utils.tsx +++ b/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(null); const [modesSidebar, setModesSidebar] = useState(false); + const [scene, setScene] = useState(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
- setModesSidebar(!modesSidebar)}/> - + {scene && + <> + + + + } + setModesSidebar(!modesSidebar)} /> +
}