react-three-map 0.2.1 → 0.3.0

package/example-mapbox/src/my-scene.tsx

@@ -0,0 +1,96 @@
+import { Box, Plane, useHelper } from "@react-three/drei";
+import { MeshProps, useFrame, useThree } from '@react-three/fiber';
+import { useControls } from "leva";
+import { useCallback, useRef, useState } from 'react';
+import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
+
+export function MyScene() {
+  return <>
+    <Lights />
+    <Floor />
+    <MyBox position={[-8 * 3, 8 * 1.5, 0]} />
+    <MyBox position={[8 * 3, 8 * 1.5, 0]} />
+  </>
+}
+
+
+function MyBox(props: MeshProps) {
+  const [hovered, hover] = useState(false);
+  const mesh = useRef<Mesh>(null)
+  const invalidate = useThree(st => st.invalidate);
+
+  const onOver = useCallback(() => {
+    hover(true);
+  }, [])
+
+  const onOut = useCallback(() => {
+    hover(false);
+  }, [])
+
+  useFrame((_st, dt) => {
+    if (!mesh.current) return;
+    mesh.current.rotateY(dt);
+    invalidate();
+  })
+
+  return (
+    <Box
+      {...props}
+      ref={mesh}
+      args={[16, 16, 16]}
+      receiveShadow
+      castShadow
+      onClick={onOver}
+      onPointerOver={onOver}
+      onPointerOut={onOut}
+    >
+      <meshStandardMaterial
+        color={hovered ? "red" : "orange"}
+        metalness={.75}
+        roughness={.5}
+      />
+    </Box>
+  );
+}
+function Lights() {
+  const cam = useRef<OrthographicCamera>(null);
+  const noCam = useRef<OrthographicCamera>(null);
+  const { showCamHelper } = useControls({
+    showCamHelper: {
+      value: false,
+      label: 'show camera helper'
+    }
+  });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  useHelper((showCamHelper ? cam : noCam) as any, CameraHelper)
+  const camSize = 100;
+  return <>
+    <ambientLight intensity={0.5} />
+    <directionalLight
+      castShadow
+      position={[2.5, 50, 5]}
+      intensity={1.5}
+      shadow-mapSize={1024}
+    >
+      <orthographicCamera
+        ref={cam}
+        attach="shadow-camera"
+        args={[-camSize, camSize, -camSize, camSize, 0.1, 100]}
+        rotation={[0, 90 * MathUtils.DEG2RAD, 0]}
+      />
+    </directionalLight>
+    <pointLight position={[-10, 0, -20]} color="white" intensity={1} />
+    <pointLight position={[0, -10, 0]} intensity={1} />
+  </>
+}
+
+function Floor() {
+  return <Plane
+    args={[200, 200]}
+    position={[0, 0, 0]}
+    rotation={[-90 * MathUtils.DEG2RAD, 0, 0]}
+    receiveShadow
+  >
+    <shadowMaterial opacity={.5} />
+  </Plane>
+}

package/example-mapbox/src/render-on-demand.stories.tsx

@@ -0,0 +1,32 @@
+import { Box, Stats } from "@react-three/drei";
+import { useRef, useState } from "react";
+import { Canvas } from "react-three-map";
+import { MathUtils } from "three";
+import { StoryMap } from "./story-map";
+
+export function Default() {
+
+  const [hovered, hover] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    <style>{`.stats{position:absolute !important}`}</style>
+    <StoryMap latitude={51} longitude={0} zoom={13}>
+      <Canvas latitude={51} longitude={0} frameloop="demand">
+        <Box
+          args={[500, 500, 500]}
+          position={[0, 250, 0]}
+          rotation={[0, 45 * MathUtils.DEG2RAD, 0]}
+          onPointerOver={() => hover(true)}
+          onPointerOut={() => hover(false)}
+          material-color={hovered ? 'purple' : 'orange'}
+        />
+        <Stats className="stats" parent={ref} />
+      </Canvas>
+    </StoryMap>
+    <div style={{ position: 'absolute', top: 0, right: 0, left: 80, background: '#ffffffc2', padding: 5 }}>
+      Hover over the box, it will only render once to change colour, or when you move the camera. Look at the stats to confirm.
+    </div>
+  </div>
+}

package/example-mapbox/src/story-map.tsx

@@ -0,0 +1,46 @@
+import { ThemeState, useLadleContext } from '@ladle/react';
+import { useControls } from 'leva';
+import Mapbox from "mapbox-gl";
+import 'mapbox-gl/dist/mapbox-gl.css';
+import { FC, PropsWithChildren } from "react";
+import Map from 'react-map-gl';
+
+export interface StoryMapProps extends PropsWithChildren {
+  latitude: number,
+  longitude: number,
+  zoom?: number,
+  pitch?: number,
+}
+
+/** `<Map>` styled for stories */
+export const StoryMap: FC<StoryMapProps> = ({
+  latitude, longitude, zoom = 18, pitch = 60, children
+}) => {
+
+  const { mapboxToken } = useControls({ mapboxToken: import.meta.env.VITE_MAPBOX_TOKEN || '' })
+
+  const theme = useLadleContext().globalState.theme;
+
+  const mapStyle = theme === ThemeState.Dark
+    ? "mapbox://styles/mapbox/dark-v11"
+    : "mapbox://styles/mapbox/streets-v12";
+
+  Mapbox.accessToken = mapboxToken;
+
+  return <div style={{ height: '100vh', position: 'relative' }}>
+    {!mapboxToken && <>Add a mapbox token to load this component</>}
+    {mapboxToken && <Map
+      antialias
+      initialViewState={{
+        latitude,
+        longitude,
+        zoom,
+        pitch,
+      }}
+      mapStyle={mapStyle}
+      mapboxAccessToken={mapboxToken}
+    >
+      {children}
+    </Map>}
+  </div>
+}

package/example-mapbox/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/example-mapbox/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/example-mapbox/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}