Skip to content
Snippets Groups Projects
Select Git revision
  • 402a3b2154ae0b419393887128bef50f99aef6a5
  • main default protected
  • state/ar_working
  • state/last_lisboa_sebi
  • feature/athens
  • feature/lisboa
  • evaluation-lisbon
  • feature/xr
  • feature/evaluation
  • 37-change-camera-controls
  • 4-fix-mouse-capture-for-2d-viewport-controls
  • feature/porto
  • feature/vr
  • feature/AR-marker
  • develop
  • feature/pages
  • feature/refactor-config
17 results

Viewport.tsx

Blame
  • 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;