Select Git revision
Viewport.tsx
Viewport.tsx 3.00 KiB
import { PerspectiveCamera, OrbitControls, Box, Plane } from '@react-three/drei';
import { Canvas, ThreeEvent } from '@react-three/fiber';
import { MeshBasicMaterial, MeshLambertMaterial } from 'three';
import For from '../../common/For';
import { useStore } from '../../common/store';
import Skybox from './SkyBox';
import Water from './Water';
import MeshLoader from './MeshLoader';
import Robot from './Robot';
import TF2, { Frame } from './TF2';
import { MathUtils } from 'three'
import FiducialVisualizer from './FiducialVisualizer';
import { PropsWithChildren } from 'react';
const Viewport = (props: PropsWithChildren<{ onMeshClick?: (event: ThreeEvent<MouseEvent>) => void}>) => {
const robots = useStore(state => state.robots);
const ship = useStore(state => state.ship);
const showSkybox = useStore(state => state.appSettings.showSkybox);
const showOcean = useStore(state => state.appSettings.showSea);
const oceanLevelOffest = useStore(state => state.appSettings.oceanLevelOffset);
return (
<Canvas
tabIndex={0}
style={{
}}
>
<OrbitControls />
<PerspectiveCamera
position={[0, 5, -10]}
rotation={[0, Math.PI, 0]}
makeDefault
/>
<ambientLight />
<pointLight />
<directionalLight />
<Skybox baseURL="skyboxes/clouds/" visible={showSkybox} />
<Water waterNormalsTexture='waternormals.jpg' size={1000} heightOffset={oceanLevelOffest} visible={showOcean} />
{/* {
ship && ship.topics.mesh ?
<Mesh
rosbridgeURI={ship.rosbridge.uri}
topic={ship.topics.mesh}
/> :
null
} */}
{/* Drone
<Frame frameId='/mussol/imu_dji'>
<MeshLoader MeshURI='meshes/drone/drone_body.gltf' scale={[0.02, 0.02, 0.02]} color="orange" />
</Frame>
Crawler
<Frame frameId='/crawler/imu'>
<group position={[0, 0, 0]}>
<MeshLoader MeshURI='meshes/crawler/Altiscan.gltf' position={[0, 0.1, 0]} rotation={[0, -90, 180]} scale={[1, 1, 1]} color="blue" />
</group>
</Frame> */}
{/* Ship Mesh */}
<Frame frameId='mesh_ref'>
<MeshLoader onClick={props.onMeshClick} MeshURI='meshes/Porto_230616_122018.gltf' rotation={[-90, 0, 180]} />
</Frame>
<For each={Object.values(robots)}>
{
robot =>
<Robot
config={robot}
key={robot.name}
/>
}
</For>
<FiducialVisualizer knownMarkers={[103, 104, 105, 109]} image_uri_prefix="markers/aruco_DICT_5X5_250_Marker_" image_uri_postfix=".png" marker_size={[0.52, 0.52]} frame_prefix="fiducial_static_" />
{/* <FiducialVisualizer knownMarkers={[103, 104, 105, 109]} image_uri_prefix="/markers/aruco_DICT_5X5_250_Marker_" image_uri_postfix=".png" marker_size={[0.52, 0.52]} frame_prefix="/mussol/fiducial_" color_tint='orange' /> */}
<TF2 yaml={["meshes/fiducial_tags.yaml"]} attachPrintGraphFunction />
{ props.children }
</Canvas>
);
}
export default Viewport;