Open leeprobert opened 1 year ago
I am using SkyAtmosphere and Fog but it isn't rendering. Here's my component:
SkyAtmosphere
Fog
import { Ion, CesiumComponentRef, GoogleMaps, Cartesian3, Cartesian2, Color, Math as CesiumMath, Camera as CesiumCamera } from 'cesium' import { Entity, Viewer, Camera, CameraFlyTo, CustomDataSource, Fog, SkyAtmosphere, Label, CameraLookAt } from 'resium' import { useEffect, useState, useRef } from 'react'; import GoogleMapsOverlay from "./GoogleMapsOverlay"; import CameraDebug from '@/components/home/cameraDebug'; GoogleMaps.defaultApiKey = process.env.REACT_APP_GOOGLE_MAPS_API_KEY; Ion.defaultAccessToken = process.env.REACT_APP_CESIUM_ION_TOKEN; export default function CesiumViewer({locationData, initialPosition, onClick, selectedLocation, isDetailPanelOpen}) { const viewerRef = useRef(null); const [isIntro, setIsIntro] = useState(true); const [flyToPosition, setFlyToPosition] = useState(initialPosition); const [flyToOrientation, setFlyToOrientation] = useState({ pitch: CesiumMath.toRadians(-40) }); const inspectCamera = () => { const cam = viewerRef.current.cesiumElement.scene.camera; console.log("position", cam.positionCartographic); console.log("heading (deg)", CesiumMath.toDegrees(cam.heading)); console.log("pitch (deg)", CesiumMath.toDegrees(cam.pitch)); console.log("roll (deg)", CesiumMath.toDegrees(cam.roll)); } return ( <div className="flex min-h-screen h-screen w-full"> <Viewer ref={viewerRef} className="h-full w-full" timeline={false} navigationHelpButton={false} homeButton={false} sceneModePicker={false} selectionIndicator={false} infoBox={false} animation={false} baseLayerPicker={false} vrButton={false} geocoder={false} navigationInstructionsInitiallyVisible={false} > <button className="absolute top-0 left-0" onClick={inspectCamera}>Inspect camera</button> <GoogleMapsOverlay /> <SkyAtmosphere brightnessShift={0.5} hueShift={0.5} saturationShift={0.5} show={true} /> <Fog enabled={true} density={10} minimumBrightness={0.5} /> <CustomDataSource name="mydata" > {locationData.map((item, i) => ( <Entity name={`test${item.name}`} key={i} position={item.position} label={{ text: item.name, font: "14px sans-serif", pixelOffset: new Cartesian3(0, 20, 0), backgroundColor: Color.BLACK, showBackground: true, backgroundPadding: new Cartesian2(10, 10), }} billboard={{ image: item.icon, width: 46, height: 60, pixelOffset: new Cartesian2(0, -30), }} onClick={() => onClick(i)} /> ))} </CustomDataSource> { isIntro && <CameraFlyTo duration={5} destination={flyToPosition} orientation={flyToOrientation} onComplete={() => setIsIntro(false)} /> } {/* { selectedLocation != null && selectedLocation.position && <CameraLookAt target={selectedLocation.position} offset={new Cartesian3(0, 0, 10)} /> } */} </Viewer> </div> ) }
I am using
SkyAtmosphere
andFog
but it isn't rendering. Here's my component: