From Anonymous, 1 Week ago, written in JavaScript.
This paste will expire in 2 Weeks.
Embed
  1.  
  2. import React from 'react';
  3. import './App.css';
  4. import { useRef } from 'react';
  5. import { useState, useEffect } from 'react'
  6. import { SceneProps } from '@react-three/fiber'
  7. import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
  8. import * as THREE from "three/src/Three"
  9. import { Canvas, extend, useThree, useFrame } from "@react-three/fiber";
  10. import { Sky } from "@react-three/drei";
  11. import * as Geo from "geo-three"
  12. import { Suspense } from 'react';
  13.   extend({ OrbitControls });
  14. const BingmapsKey="AqhZfyKdkyMB7YJe0_1b2QE8DqS78DrDzz33C9dg6Kvs9DU9TURFta3f27emB7Kp"
  15.  
  16. const CameraControls = () => {
  17.   const {
  18.     camera,
  19.     gl: { domElement }
  20.   } = useThree();
  21.   const controls = useRef();
  22.   useFrame(() => controls.current.update());
  23.   return (
  24.     <orbitControls
  25.       ref={controls}
  26.       args={[camera, domElement]}
  27.       autoRotate={false}
  28.       enableZoom={true}
  29.       maxDistance={80}
  30.       minDistance = {1e1}
  31.       zoomSpeed = {2.0}
  32.     />
  33.   );
  34. };
  35. function Map() {
  36.   const mapRef = useRef(null)
  37.   const { scene, gl } = useThree();
  38.   const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256, {
  39.     format: THREE.RGBAFormat,
  40.     generateMipmaps: true,
  41.     minFilter: THREE.LinearMipmapLinearFilter
  42.   });
  43.   const cubeCamera = new THREE.CubeCamera(1, 1000, cubeRenderTarget);
  44.   cubeCamera.position.set(0, 0, 0);
  45.   scene.add(cubeCamera);
  46.   useFrame(() => cubeCamera.update(gl, scene));
  47.   //let provider = new Geo.OpenStreetMapsProvider()
  48.   let heightProvider = new Geo.HeightDebugProvider()
  49.   //let map = new Geo.MapView(Geo.MapView.PLANAR);
  50.   let provider = new   Geo.BingMapsProvider(BingmapsKey, Geo.BingMapsProvider.ROAD)
  51.   let map = new Geo.MapView(Geo.MapView.PLANAR, provider);
  52.   map.lod = new Geo.LODRaycast();
  53.   map.updateMatrixWorld(true);
  54.  scene.add(map)
  55.   return (
  56.     <scene
  57.     ref={mapRef}
  58.     ></scene>
  59.   )
  60. }
  61. export default function App() {
  62.   const buildingsMapRef = useRef(null);
  63.   return (
  64.     <div className="App ">
  65.       <div className="w-full h-full bg-red-500  " style={{ height: `${window.innerHeight}px` }}>
  66.         <Canvas className="h-full w-full bg-blue-600" >
  67.           <ambientLight intensity={0.5} />
  68.           <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
  69.           <pointLight position={[-10, -10, -10]} />
  70.           <Suspense fallback={null}>
  71.             <Map />
  72.           </Suspense>
  73.           <CameraControls />
  74.           <Sky
  75.             distance={450000}
  76.             sunPosition={[5, 1, 8]}
  77.             inclination={0}
  78.             azimuth={0.25}
  79.           />
  80.         </Canvas>
  81.       </div>
  82.     </div>
  83.   );
  84. }