We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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> ) }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
I am using
SkyAtmosphere
andFog
but it isn't rendering. Here's my component:The text was updated successfully, but these errors were encountered: