Skip to content

Commit

Permalink
Remove use of meshes for robot icons
Browse files Browse the repository at this point in the history
Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
  • Loading branch information
aaronchongth committed Oct 11, 2023
1 parent 90d5149 commit f61c69d
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 61 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,9 @@ interface RobotThreeProps {
robots: RobotData[];
robotLocations: Record<string, [number, number, number]>;
onRobotClick?: (ev: ThreeEvent<MouseEvent>, robot: RobotData) => void;
objectModel?: string;
}

export const RobotThree = ({
robots,
robotLocations,
onRobotClick,
objectModel, //Object model should be some path of the object to be rendered.
}: RobotThreeProps) => {
export const RobotThree = ({ robots, robotLocations, onRobotClick }: RobotThreeProps) => {
const STANDAR_Z_POSITION = 4;
const CIRCLE_SEGMENT = 64;

Expand All @@ -34,7 +28,6 @@ export const RobotThree = ({
robot={robot}
position={position}
onRobotClick={onRobotClick}
objectModel={objectModel}
rotation={new Euler(0, 0, rotationZ)}
circleSegment={CIRCLE_SEGMENT}
/>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { Circle, Line, Text } from '@react-three/drei';
import { ThreeEvent, useLoader } from '@react-three/fiber';
import { ThreeEvent } from '@react-three/fiber';
import React from 'react';
import { Euler, Vector3 } from 'three';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

export interface RobotData {
fleet: string;
Expand All @@ -23,18 +21,10 @@ interface CircleShapeProps {
segment: number;
}

interface ObjectLoaderProps {
position: Vector3;
rotation: THREE.Euler;
onRobotClick?: (ev: ThreeEvent<MouseEvent>) => void;
robot: RobotData;
}

interface RobotThreeMakerProps {
robot: RobotData;
position: Vector3;
onRobotClick?: (ev: ThreeEvent<MouseEvent>, robot: RobotData) => void;
objectModel?: string;
rotation: Euler;
circleSegment: number;
}
Expand Down Expand Up @@ -70,35 +60,10 @@ const CircleShape = ({
);
};

const ObjectLoader = ({
position,
rotation,
onRobotClick,
robot,
}: ObjectLoaderProps): JSX.Element => {
const objPath = '/Hatchback/meshes/hatchback.obj';
const mtlPath = '/Hatchback/meshes/hatchback.mtl';
const objectRef = React.useRef<THREE.Object3D>(null);
const scale = new Vector3(0.007, 0.007, 0.007);

const materials = useLoader(MTLLoader, mtlPath);
const object = useLoader(OBJLoader, objPath, (loader) => {
materials.preload();
loader.setMaterials(materials);
});
return (
<group position={position} rotation={rotation} scale={scale} onClick={onRobotClick}>
<primitive object={object} ref={objectRef} color={robot.color} opacity={1} />
<primitive object={object.clone()} ref={objectRef} />
</group>
);
};

export const RobotThreeMaker = ({
robot,
position,
onRobotClick,
objectModel, //Object model should be some path of the object to be rendered.
rotation,
circleSegment,
}: RobotThreeMakerProps): JSX.Element => {
Expand All @@ -107,23 +72,13 @@ export const RobotThreeMaker = ({
<Text color="black" fontSize={0.5} position={[position.x, position.y, position.z + 1]}>
{robot.name}
</Text>

{objectModel ? (
<ObjectLoader
position={position}
rotation={rotation}
onRobotClick={(ev: ThreeEvent<MouseEvent>) => onRobotClick && onRobotClick(ev, robot)}
robot={robot}
/>
) : (
<CircleShape
position={position}
rotation={rotation}
onRobotClick={(ev: ThreeEvent<MouseEvent>) => onRobotClick && onRobotClick(ev, robot)}
robot={robot}
segment={circleSegment}
/>
)}
<CircleShape
position={position}
rotation={rotation}
onRobotClick={(ev: ThreeEvent<MouseEvent>) => onRobotClick && onRobotClick(ev, robot)}
robot={robot}
segment={circleSegment}
/>
</>
);
};

0 comments on commit f61c69d

Please sign in to comment.