react-three-map 0.1.3 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/dist/cjs/main.js.js +1 -1
- package/dist/es/main.js4.mjs +9 -9
- package/dist/es/main.js4.mjs.map +1 -1
- package/dist/es/main.js5.mjs +6 -6
- package/dist/es/main.js5.mjs.map +1 -1
- package/package.json +1 -1
- package/src/canvas/use-on-add.ts +1 -1
- package/src/canvas/use-render.ts +3 -1
- package/src/stories/canvas.stories.tsx +16 -5
- package/src/stories/my-scene.tsx +20 -13
- package/src/stories/render-on-demand.stories.tsx +46 -0
- package/src/stories/no-map.stories.tsx +0 -12
package/README.md
CHANGED
|
@@ -66,7 +66,8 @@ We hope that you enjoy using React Three Map as much as we enjoyed building it.
|
|
|
66
66
|
|
|
67
67
|
## Roadmap
|
|
68
68
|
|
|
69
|
-
- [
|
|
69
|
+
- [x] Use ThreeJS as a Map Layer (Maplibre).
|
|
70
|
+
- [x] Support on demand rendering.
|
|
70
71
|
- [ ] Use ThreeJS as a canvas overlay.
|
|
71
72
|
- [ ] Add stencil buffers to occlude from the map.
|
|
72
73
|
- [ ] Fully decompose the projection matrix into all the Camera properties required.
|
|
@@ -74,4 +75,4 @@ We hope that you enjoy using React Three Map as much as we enjoyed building it.
|
|
|
74
75
|
- [ ] Support multiple coordinate transformations using only one ThreeJS renderer.
|
|
75
76
|
- [ ] Support `drei` `<Html>` component.
|
|
76
77
|
- [ ] Support MapBox.
|
|
77
|
-
- [ ] Support
|
|
78
|
+
- [ ] Support Google Maps.
|
package/dist/cjs/main.js.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),h=require("@react-three/fiber"),d=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),h=require("@react-three/fiber"),d=require("react"),M=require("react-map-gl/maplibre"),m=require("three"),E=require("maplibre-gl");function b(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(r,t,e.get?e:{enumerable:!0,get:()=>n[t]})}}return r.default=n,Object.freeze(r)}const j=b(m),x=new m.Quaternion,C=new m.Euler,y=new m.Vector3,w=new m.Vector3;function R({longitude:n,latitude:r,altitude:t}){const e=E.MercatorCoordinate.fromLngLat([n,r],t),o=e.meterInMercatorCoordinateUnits();return y.set(e.x,e.y,e.z||0),w.set(o,-o,o),x.setFromEuler(C.set(-Math.PI*.5,0,0)),new m.Matrix4().compose(y,x,w)}const g={onClick:["click",!1],onContextMenu:["contextmenu",!1],onDoubleClick:["dblclick",!1],onWheel:["wheel",!0],onPointerDown:["pointerdown",!0],onPointerUp:["pointerup",!0],onPointerLeave:["pointerleave",!0],onPointerMove:["pointermove",!0],onPointerCancel:["pointercancel",!0],onLostPointerCapture:["lostpointercapture",!0]};function z(){return n=>{const{handlePointer:r}=h.createEvents(n);return{priority:1,enabled:!0,compute(t,e){e.size.width=e.gl.domElement.width,e.size.height=e.gl.domElement.height,e.pointer.x=t.offsetX/(e.size.width/window.devicePixelRatio)*2-1,e.pointer.y=1-t.offsetY/(e.size.height/window.devicePixelRatio)*2,e.raycaster.camera=e.camera,e.raycaster.ray.origin.setScalar(0).applyMatrix4(e.camera.projectionMatrixInverse),e.raycaster.ray.direction.set(e.pointer.x,e.pointer.y,1).applyMatrix4(e.camera.projectionMatrixInverse).sub(e.raycaster.ray.origin).normalize()},connected:void 0,handlers:Object.keys(g).reduce((t,e)=>({...t,[e]:r(e)}),{}),update:()=>{var o;const{events:t,internal:e}=n.getState();(o=e.lastEvent)!=null&&o.current&&t.handlers&&t.handlers.onPointerMove(e.lastEvent.current)},connect:t=>{var s;const{set:e,events:o}=n.getState();(s=o.disconnect)==null||s.call(o),e(c=>({events:{...c.events,connected:t}})),Object.entries(o.handlers??[]).forEach(([c,i])=>{const[l,a]=g[c];t.addEventListener(l,i,{passive:a})})},disconnect:()=>{const{set:t,events:e}=n.getState();e.connected&&(Object.entries(e.handlers??[]).forEach(([o,s])=>{if(e&&e.connected instanceof HTMLElement){const[c]=g[o];e.connected.removeEventListener(c,s)}}),t(o=>({events:{...o.events,connected:void 0}})))}}}}const v=n=>{const r=d.useRef(n);return r.current=n,d.useCallback((...t)=>r.current(...t),[])};function S(n,r){const[t,e]=d.useState(!1),o=v((i,l)=>{const a=i.getCanvas(),u=h.createRoot(a);u.configure({frameloop:"demand",dpr:window.devicePixelRatio,shadows:!0,events:z(),...r,gl:{context:l,depth:!0,autoClear:!1,antialias:!0,...r==null?void 0:r.gl},onCreated:f=>{n.current={state:f,map:i,root:u},f.gl.forceContextLoss=()=>{}},camera:{matrixAutoUpdate:!1},size:{width:a.clientWidth,height:a.clientHeight,top:0,left:0,...r==null?void 0:r.size}}),n.current={map:i,root:u},i.on("resize",s),setTimeout(()=>e(!0))}),s=v(()=>{var u;if(!((u=n.current)!=null&&u.state))return;const i=n.current.state,a=n.current.map.getCanvas();i.setSize(a.width,a.height)}),c=v(i=>{setTimeout(()=>{n.current&&(n.current.root.unmount(),i.off(c))})});return{onAdd:o,onRemove:c,mounted:t}}function O(n,r){const t=M.useMap();return v((o,s)=>{var a;if(!t.current||!((a=r.current)!=null&&a.state))return;const c=r.current.state.camera,i=r.current.state.gl,l=r.current.state.advance;c.projectionMatrix.fromArray(s).multiply(n),c.projectionMatrixInverse.copy(c.projectionMatrix).invert(),i.resetState(),l(Date.now()*.001,!0),r.current.state.frameloop==="always"&&t.current.triggerRepaint()})}h.extend(j);const L=d.memo(({longitude:n,latitude:r,altitude:t=0,children:e,...o})=>{const s=d.useId(),c=d.useRef(),i=d.useMemo(()=>R({latitude:r,longitude:n,altitude:t}),[r,n,t]),{onAdd:l,onRemove:a,mounted:u}=S(c,o),f=O(i,c);return d.useEffect(()=>{u&&c.current&&c.current.root.render(p.jsx(p.Fragment,{children:e}))},[c,u,e]),p.jsx(M.Layer,{id:s,type:"custom",renderingMode:"3d",onAdd:l,onRemove:a,render:f})});exports.Canvas=L;
|
package/dist/es/main.js4.mjs
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { createRoot as
|
|
1
|
+
import { createRoot as r } from "@react-three/fiber";
|
|
2
2
|
import { useState as g } from "react";
|
|
3
|
-
import { createEvents as
|
|
3
|
+
import { createEvents as d } from "./main.js6.mjs";
|
|
4
4
|
import { useFunction as a } from "./main.js7.mjs";
|
|
5
5
|
function C(e, o) {
|
|
6
|
-
const [m, l] = g(!1),
|
|
7
|
-
const n = t.getCanvas(), i =
|
|
6
|
+
const [m, l] = g(!1), f = a((t, u) => {
|
|
7
|
+
const n = t.getCanvas(), i = r(n);
|
|
8
8
|
i.configure({
|
|
9
|
-
frameloop: "
|
|
9
|
+
frameloop: "demand",
|
|
10
10
|
dpr: window.devicePixelRatio,
|
|
11
11
|
shadows: !0,
|
|
12
|
-
events:
|
|
12
|
+
events: d(),
|
|
13
13
|
...o,
|
|
14
14
|
gl: {
|
|
15
15
|
context: u,
|
|
@@ -39,8 +39,8 @@ function C(e, o) {
|
|
|
39
39
|
}), e.current = {
|
|
40
40
|
map: t,
|
|
41
41
|
root: i
|
|
42
|
-
}, t.on("resize",
|
|
43
|
-
}),
|
|
42
|
+
}, t.on("resize", h), setTimeout(() => l(!0));
|
|
43
|
+
}), h = a(() => {
|
|
44
44
|
var i;
|
|
45
45
|
if (!((i = e.current) != null && i.state))
|
|
46
46
|
return;
|
|
@@ -51,7 +51,7 @@ function C(e, o) {
|
|
|
51
51
|
e.current && (e.current.root.unmount(), t.off(c));
|
|
52
52
|
});
|
|
53
53
|
});
|
|
54
|
-
return { onAdd:
|
|
54
|
+
return { onAdd: f, onRemove: c, mounted: m };
|
|
55
55
|
}
|
|
56
56
|
export {
|
|
57
57
|
C as useOnAdd
|
package/dist/es/main.js4.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js4.mjs","sources":["../../src/canvas/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { MapInstance } from \"react-map-gl\";\nimport { createEvents } from \"./create-events\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElement>) {\n\n const [mounted, setMounted] = useState(false);\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext)=>{\n \n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n frameloop: \"
|
|
1
|
+
{"version":3,"file":"main.js4.mjs","sources":["../../src/canvas/use-on-add.ts"],"sourcesContent":["import { RenderProps, createRoot } from \"@react-three/fiber\";\nimport { useState } from \"react\";\nimport { MapInstance } from \"react-map-gl\";\nimport { createEvents } from \"./create-events\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\n\nexport function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElement>) {\n\n const [mounted, setMounted] = useState(false);\n\n const onAdd = useFunction((map: MapInstance, gl: WebGLRenderingContext)=>{\n \n const canvas = map.getCanvas();\n const root = createRoot(canvas);\n root.configure({\n frameloop: \"demand\",\n dpr: window.devicePixelRatio,\n shadows: true,\n events: createEvents(),\n ...renderProps,\n gl: {\n context: gl,\n depth: true,\n autoClear: false,\n antialias: true,\n ...renderProps?.gl,\n },\n onCreated: (state) => {\n ref.current = {\n state,\n map,\n root,\n }\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n state.gl.forceContextLoss = () => { };\n },\n camera: {\n matrixAutoUpdate: false,\n },\n size: {\n width: canvas.clientWidth,\n height: canvas.clientHeight,\n top: 0,\n left: 0,\n ...renderProps?.size,\n },\n });\n\n ref.current = {\n map,\n root,\n }\n\n map.on('resize', onResize)\n\n setTimeout(()=>setMounted(true));\n \n })\n\n const onResize = useFunction(()=>{\n if(!ref.current?.state) return;\n const state = ref.current.state;\n const map = ref.current.map;\n const canvas = map.getCanvas();\n state.setSize(canvas.width, canvas.height);\n })\n\n const onRemove = useFunction((map: MapInstance)=>{\n setTimeout(()=>{\n if(!ref.current) return;\n ref.current.root.unmount();\n map.off(onRemove);\n })\n })\n\n return {onAdd, onRemove, mounted};\n}"],"names":["useOnAdd","ref","renderProps","mounted","setMounted","useState","onAdd","useFunction","map","gl","canvas","root","createRoot","createEvents","state","onResize","_a","onRemove"],"mappings":";;;;AAOgB,SAAAA,EAAUC,GAAeC,GAA6C;AAEpF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAQC,EAAY,CAACC,GAAkBC,MAA4B;AAEjE,UAAAC,IAASF,EAAI,aACbG,IAAOC,EAAWF,CAAM;AAC9B,IAAAC,EAAK,UAAU;AAAA,MACb,WAAW;AAAA,MACX,KAAK,OAAO;AAAA,MACZ,SAAS;AAAA,MACT,QAAQE,EAAa;AAAA,MACrB,GAAGX;AAAA,MACH,IAAI;AAAA,QACF,SAASO;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,WAAW;AAAA,QACX,GAAGP,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,MACA,WAAW,CAACY,MAAU;AACpB,QAAAb,EAAI,UAAU;AAAA,UACZ,OAAAa;AAAA,UACA,KAAAN;AAAA,UACA,MAAAG;AAAA,QAAA,GAGIG,EAAA,GAAG,mBAAmB,MAAM;AAAA,QAAA;AAAA,MACpC;AAAA,MACA,QAAQ;AAAA,QACN,kBAAkB;AAAA,MACpB;AAAA,MACA,MAAM;AAAA,QACJ,OAAOJ,EAAO;AAAA,QACd,QAAQA,EAAO;AAAA,QACf,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAGR,KAAA,gBAAAA,EAAa;AAAA,MAClB;AAAA,IAAA,CACD,GAEDD,EAAI,UAAU;AAAA,MACZ,KAAAO;AAAA,MACA,MAAAG;AAAA,IAAA,GAGEH,EAAA,GAAG,UAAUO,CAAQ,GAEd,WAAA,MAAIX,EAAW,EAAI,CAAC;AAAA,EAAA,CAEhC,GAEKW,IAAWR,EAAY,MAAI;;AAC5B,QAAA,GAACS,IAAAf,EAAI,YAAJ,QAAAe,EAAa;AAAO;AAClB,UAAAF,IAAQb,EAAI,QAAQ,OAEpBS,IADMT,EAAI,QAAQ,IACL;AACnB,IAAAa,EAAM,QAAQJ,EAAO,OAAOA,EAAO,MAAM;AAAA,EAAA,CAC1C,GAEKO,IAAWV,EAAY,CAACC,MAAmB;AAC/C,eAAW,MAAI;AACb,MAAIP,EAAI,YACJA,EAAA,QAAQ,KAAK,WACjBO,EAAI,IAAIS,CAAQ;AAAA,IAAA,CACjB;AAAA,EAAA,CACF;AAEM,SAAA,EAAC,OAAAX,GAAO,UAAAW,GAAU,SAAAd;AAC3B;"}
|
package/dist/es/main.js5.mjs
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { useFunction as u } from "./main.js7.mjs";
|
|
2
2
|
import { useMap as s } from "react-map-gl/maplibre";
|
|
3
|
-
function
|
|
3
|
+
function g(a, t) {
|
|
4
4
|
const e = s();
|
|
5
|
-
return u((m,
|
|
5
|
+
return u((m, o) => {
|
|
6
6
|
var n;
|
|
7
|
-
if (!e.current || !((n =
|
|
7
|
+
if (!e.current || !((n = t.current) != null && n.state))
|
|
8
8
|
return;
|
|
9
|
-
const
|
|
10
|
-
|
|
9
|
+
const r = t.current.state.camera, c = t.current.state.gl, i = t.current.state.advance;
|
|
10
|
+
r.projectionMatrix.fromArray(o).multiply(a), r.projectionMatrixInverse.copy(r.projectionMatrix).invert(), c.resetState(), i(Date.now() * 1e-3, !0), t.current.state.frameloop === "always" && e.current.triggerRepaint();
|
|
11
11
|
});
|
|
12
12
|
}
|
|
13
13
|
export {
|
|
14
|
-
|
|
14
|
+
g as useRender
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=main.js5.mjs.map
|
package/dist/es/main.js5.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js5.mjs","sources":["../../src/canvas/use-render.ts"],"sourcesContent":["import { Matrix4 } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\nimport { useMap } from \"react-map-gl/maplibre\";\n\nexport function useRender(\n m4: Matrix4, ref: StateRef\n ) {\n\n const map = useMap()\n\n const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[])=>{\n if(!map.current) return;\n if(!ref.current?.state) return;\n const camera = ref.current.state.camera;\n const gl = ref.current.state.gl;\n const advance = ref.current.state.advance;\n camera.projectionMatrix.fromArray(matrix).multiply(m4);\n camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n gl.resetState();\n advance(Date.now() * 0.001, true);\n map.current.triggerRepaint();\n })\n\n return render;\n\n}"],"names":["useRender","m4","ref","map","useMap","useFunction","_gl","matrix","_a","camera","gl","advance"],"mappings":";;AAKgB,SAAAA,EACdC,GAAaC,GACX;AAEF,QAAMC,IAAMC;
|
|
1
|
+
{"version":3,"file":"main.js5.mjs","sources":["../../src/canvas/use-render.ts"],"sourcesContent":["import { Matrix4 } from \"three\";\nimport { StateRef } from \"./state-ref\";\nimport { useFunction } from \"./use-function\";\nimport { useMap } from \"react-map-gl/maplibre\";\n\nexport function useRender(\n m4: Matrix4, ref: StateRef\n ) {\n\n const map = useMap()\n\n const render = useFunction((_gl: WebGL2RenderingContext, matrix: number[])=>{\n if(!map.current) return;\n if(!ref.current?.state) return;\n const camera = ref.current.state.camera;\n const gl = ref.current.state.gl;\n const advance = ref.current.state.advance;\n camera.projectionMatrix.fromArray(matrix).multiply(m4);\n camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();\n gl.resetState();\n advance(Date.now() * 0.001, true);\n if(ref.current.state.frameloop === 'always') {\n map.current.triggerRepaint();\n }\n })\n\n return render;\n\n}"],"names":["useRender","m4","ref","map","useMap","useFunction","_gl","matrix","_a","camera","gl","advance"],"mappings":";;AAKgB,SAAAA,EACdC,GAAaC,GACX;AAEF,QAAMC,IAAMC;AAiBL,SAfQC,EAAY,CAACC,GAA6BC,MAAmB;;AAEvE,QADA,CAACJ,EAAI,WACL,GAACK,IAAAN,EAAI,YAAJ,QAAAM,EAAa;AAAO;AAClB,UAAAC,IAASP,EAAI,QAAQ,MAAM,QAC3BQ,IAAKR,EAAI,QAAQ,MAAM,IACvBS,IAAUT,EAAI,QAAQ,MAAM;AAClC,IAAAO,EAAO,iBAAiB,UAAUF,CAAM,EAAE,SAASN,CAAE,GACrDQ,EAAO,wBAAwB,KAAKA,EAAO,gBAAgB,EAAE,UAC7DC,EAAG,WAAW,GACdC,EAAQ,KAAK,IAAQ,IAAA,MAAO,EAAI,GAC7BT,EAAI,QAAQ,MAAM,cAAc,YACjCC,EAAI,QAAQ;EACd,CACD;AAIH;"}
|
package/package.json
CHANGED
package/src/canvas/use-on-add.ts
CHANGED
|
@@ -14,7 +14,7 @@ export function useOnAdd (ref: StateRef, renderProps: RenderProps<HTMLCanvasElem
|
|
|
14
14
|
const canvas = map.getCanvas();
|
|
15
15
|
const root = createRoot(canvas);
|
|
16
16
|
root.configure({
|
|
17
|
-
frameloop: "
|
|
17
|
+
frameloop: "demand",
|
|
18
18
|
dpr: window.devicePixelRatio,
|
|
19
19
|
shadows: true,
|
|
20
20
|
events: createEvents(),
|
package/src/canvas/use-render.ts
CHANGED
|
@@ -19,7 +19,9 @@ export function useRender(
|
|
|
19
19
|
camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
|
|
20
20
|
gl.resetState();
|
|
21
21
|
advance(Date.now() * 0.001, true);
|
|
22
|
-
|
|
22
|
+
if(ref.current.state.frameloop === 'always') {
|
|
23
|
+
map.current.triggerRepaint();
|
|
24
|
+
}
|
|
23
25
|
})
|
|
24
26
|
|
|
25
27
|
return render;
|
|
@@ -2,20 +2,23 @@ import { ThemeState, useLadleContext } from "@ladle/react";
|
|
|
2
2
|
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
3
3
|
import Map from 'react-map-gl/maplibre';
|
|
4
4
|
import { Canvas } from "../canvas/canvas";
|
|
5
|
+
import { Canvas as FiberCanvas } from "@react-three/fiber"
|
|
5
6
|
import { MyScene } from "./my-scene";
|
|
7
|
+
import { MapControls } from "@react-three/drei"
|
|
6
8
|
|
|
7
|
-
export function
|
|
9
|
+
export function WithMap() {
|
|
8
10
|
const theme = useLadleContext().globalState.theme;
|
|
9
|
-
const mapStyle = theme === ThemeState.Dark
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
const mapStyle = theme === ThemeState.Dark
|
|
12
|
+
? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
|
|
13
|
+
: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
|
|
12
14
|
return <div style={{ height: '100vh' }}>
|
|
13
15
|
<Map
|
|
14
16
|
antialias
|
|
15
17
|
initialViewState={{
|
|
16
18
|
latitude: 51.5073218,
|
|
17
19
|
longitude: -0.1276473,
|
|
18
|
-
zoom:
|
|
20
|
+
zoom: 18,
|
|
21
|
+
pitch: 60,
|
|
19
22
|
}}
|
|
20
23
|
mapStyle={mapStyle}
|
|
21
24
|
>
|
|
@@ -26,3 +29,11 @@ export function BasicSetup() {
|
|
|
26
29
|
</div>
|
|
27
30
|
}
|
|
28
31
|
|
|
32
|
+
export const WithoutMap = () => {
|
|
33
|
+
return <div style={{ height: '100vh' }}>
|
|
34
|
+
<FiberCanvas camera={{position: [100,100,100]}} shadows="basic">
|
|
35
|
+
<MyScene />
|
|
36
|
+
<MapControls makeDefault />
|
|
37
|
+
</FiberCanvas>
|
|
38
|
+
</div>
|
|
39
|
+
}
|
package/src/stories/my-scene.tsx
CHANGED
|
@@ -1,41 +1,48 @@
|
|
|
1
1
|
import { Box, Plane, useHelper } from "@react-three/drei";
|
|
2
|
-
import { MeshProps, useFrame } from '@react-three/fiber';
|
|
2
|
+
import { MeshProps, useFrame, useThree } from '@react-three/fiber';
|
|
3
3
|
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
4
|
-
import { useRef, useState } from 'react';
|
|
4
|
+
import { useCallback, useRef, useState } from 'react';
|
|
5
5
|
import { CameraHelper, MathUtils, Mesh, OrthographicCamera } from "three";
|
|
6
6
|
|
|
7
7
|
export function MyScene() {
|
|
8
8
|
return <>
|
|
9
9
|
<Lights />
|
|
10
10
|
<Floor />
|
|
11
|
-
<MyBox position={[-
|
|
12
|
-
<MyBox position={[
|
|
13
|
-
<MyBox position={[1.2, 1.5, 2.4]} />
|
|
11
|
+
<MyBox position={[-8* 3, 8*1.5, 0]} />
|
|
12
|
+
<MyBox position={[8*3, 8*1.5, 0]} />
|
|
14
13
|
</>
|
|
15
14
|
}
|
|
16
15
|
|
|
17
16
|
|
|
18
17
|
function MyBox(props: MeshProps) {
|
|
19
18
|
const [hovered, hover] = useState(false);
|
|
20
|
-
const [clicked, click] = useState(false);
|
|
21
19
|
const mesh = useRef<Mesh>(null)
|
|
20
|
+
const invalidate = useThree(st=>st.invalidate);
|
|
21
|
+
|
|
22
|
+
const onOver = useCallback(()=>{
|
|
23
|
+
hover(true);
|
|
24
|
+
}, [])
|
|
25
|
+
|
|
26
|
+
const onOut = useCallback(()=>{
|
|
27
|
+
hover(false);
|
|
28
|
+
}, [])
|
|
22
29
|
|
|
23
30
|
useFrame((_st, dt)=>{
|
|
24
31
|
if(!mesh.current) return;
|
|
25
32
|
mesh.current.rotateY(dt);
|
|
33
|
+
invalidate();
|
|
26
34
|
})
|
|
27
35
|
|
|
28
36
|
return (
|
|
29
37
|
<Box
|
|
30
38
|
{...props}
|
|
31
39
|
ref={mesh}
|
|
32
|
-
args={[
|
|
40
|
+
args={[16, 16, 16]}
|
|
33
41
|
receiveShadow
|
|
34
42
|
castShadow
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
onPointerOut={() => hover(false)}
|
|
43
|
+
onClick={onOver}
|
|
44
|
+
onPointerOver={onOver}
|
|
45
|
+
onPointerOut={onOut}
|
|
39
46
|
>
|
|
40
47
|
<meshStandardMaterial
|
|
41
48
|
color={hovered ? "red" : "orange"}
|
|
@@ -49,7 +56,7 @@ function Lights() {
|
|
|
49
56
|
const cam = useRef<OrthographicCamera>(null);
|
|
50
57
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
51
58
|
useHelper(cam as any, CameraHelper)
|
|
52
|
-
const camSize =
|
|
59
|
+
const camSize = 100;
|
|
53
60
|
return <>
|
|
54
61
|
<ambientLight intensity={0.5} />
|
|
55
62
|
<directionalLight
|
|
@@ -73,7 +80,7 @@ function Lights() {
|
|
|
73
80
|
|
|
74
81
|
function Floor() {
|
|
75
82
|
return <Plane
|
|
76
|
-
args={[
|
|
83
|
+
args={[200, 200]}
|
|
77
84
|
position={[0, 0, 0]}
|
|
78
85
|
rotation={[-90 * MathUtils.DEG2RAD, 0, 0]}
|
|
79
86
|
receiveShadow
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { ThemeState, useLadleContext } from "@ladle/react";
|
|
2
|
+
import { Box, Stats } from "@react-three/drei";
|
|
3
|
+
import 'maplibre-gl/dist/maplibre-gl.css';
|
|
4
|
+
import { useState } from "react";
|
|
5
|
+
import Map from 'react-map-gl/maplibre';
|
|
6
|
+
import { MathUtils } from "three";
|
|
7
|
+
import { Canvas } from "../canvas/canvas";
|
|
8
|
+
|
|
9
|
+
export function Default() {
|
|
10
|
+
|
|
11
|
+
const theme = useLadleContext().globalState.theme;
|
|
12
|
+
|
|
13
|
+
const mapStyle = theme === ThemeState.Dark
|
|
14
|
+
? "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json"
|
|
15
|
+
: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json";
|
|
16
|
+
|
|
17
|
+
const [hovered, hover] = useState(false);
|
|
18
|
+
|
|
19
|
+
return <div style={{ height: '100vh', position: 'relative' }}>
|
|
20
|
+
<Map
|
|
21
|
+
antialias
|
|
22
|
+
initialViewState={{
|
|
23
|
+
latitude: 51,
|
|
24
|
+
longitude: 0,
|
|
25
|
+
zoom: 13,
|
|
26
|
+
pitch: 60,
|
|
27
|
+
}}
|
|
28
|
+
mapStyle={mapStyle}
|
|
29
|
+
>
|
|
30
|
+
<Canvas latitude={51} longitude={0}>
|
|
31
|
+
<Box
|
|
32
|
+
args={[500,500,500]}
|
|
33
|
+
position={[0,250,0]}
|
|
34
|
+
rotation={[0,45 * MathUtils.DEG2RAD,0]}
|
|
35
|
+
onPointerOver={() => hover(true)}
|
|
36
|
+
onPointerOut={() => hover(false)}
|
|
37
|
+
material-color={hovered ? 'purple' : 'orange'}
|
|
38
|
+
/>
|
|
39
|
+
<Stats />
|
|
40
|
+
</Canvas>
|
|
41
|
+
</Map>
|
|
42
|
+
<div style={{position: 'absolute', top: 0, right: 0, left: 80, background: '#ffffffc2', padding: 5}}>
|
|
43
|
+
Hover over the box, it will only render once to change colour, or when you move the camera. Look at the stats to confirm.
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { MapControls } from "@react-three/drei"
|
|
2
|
-
import { Canvas } from "@react-three/fiber"
|
|
3
|
-
import { MyScene } from "./my-scene"
|
|
4
|
-
|
|
5
|
-
export const NoMap = () => {
|
|
6
|
-
return <div style={{ height: '100vh' }}>
|
|
7
|
-
<Canvas camera={{position: [0,10,0]}} shadows="basic">
|
|
8
|
-
<MyScene />
|
|
9
|
-
<MapControls makeDefault />
|
|
10
|
-
</Canvas>
|
|
11
|
-
</div>
|
|
12
|
-
}
|