Skip to content

Commit f31f269

Browse files
bigmistqkebigmistqke
committed
docs: add solid-router to playground
1 parent e7129d9 commit f31f269

4 files changed

Lines changed: 153 additions & 65 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
},
6161
"devDependencies": {
6262
"@jest/types": "^29.6.3",
63+
"@solidjs/router": "^0.15.3",
6364
"@solidjs/testing-library": "^0.8.8",
6465
"@types/node": "^18.19.33",
6566
"@types/three": "^0.164.1",

‎playground/App.tsx‎

Lines changed: 58 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,76 @@
1-
import { createSignal, type ParentProps } from "solid-js"
1+
import { A, Route, Router } from "@solidjs/router"
2+
import type { ParentProps } from "solid-js"
23
import * as THREE from "three"
3-
import { Canvas, T, extend } from "../src/index.ts"
4+
import { Canvas, extend, T } from "../src/index.ts"
5+
import { Basic } from "./Basic.tsx"
46
import "./index.css"
57

68
extend(THREE)
79

8-
function Box(
9-
props: ParentProps<{
10-
name: string
11-
position: THREE.Vector3
12-
stopPropagation?: boolean
13-
noClick?: boolean
14-
}>,
15-
) {
16-
const mesh = new THREE.Mesh()
17-
const [hovered, setHovered] = createSignal(false)
18-
10+
function Layout(props: ParentProps) {
1911
return (
2012
<>
21-
<T.Primitive
22-
object={mesh}
23-
name={props.name}
24-
position={props.position}
25-
onContextMenu={event => console.debug("contextmenu", props.name, event)}
26-
onContextMenuMissed={event => console.debug("contextmenu missed", props.name, event)}
27-
onPointerEnter={event => {
28-
console.debug("enter", props.name, event)
29-
setHovered(true)
30-
}}
31-
onPointerLeave={event => {
32-
console.debug("leave", props.name, event)
33-
setHovered(false)
34-
}}
35-
onPointerMove={event => {
36-
console.debug("move", props.name, event)
37-
if (props.stopPropagation) {
38-
event.stopPropagation()
39-
}
13+
<nav
14+
style={{
15+
position: "absolute",
16+
top: "10px",
17+
left: "10px",
18+
"z-index": 1000,
19+
background: "rgba(0, 0, 0, 0.8)",
20+
padding: "10px",
21+
"border-radius": "8px",
4022
}}
41-
onClickMissed={event => console.debug("click missed!", props.name, event)}
42-
onClick={
43-
!props.noClick
44-
? event => {
45-
console.debug("click", props.name)
46-
if (props.stopPropagation) {
47-
event.stopPropagation()
48-
}
49-
}
50-
: undefined
51-
}
5223
>
53-
<T.BoxGeometry />
54-
<T.MeshBasicMaterial color={hovered() ? "green" : "red"} />
24+
<A
25+
href="/basic"
26+
style={{
27+
color: "white",
28+
"text-decoration": "none",
29+
padding: "5px 10px",
30+
display: "block",
31+
}}
32+
>
33+
Basic Example
34+
</A>
35+
<A
36+
href="/"
37+
style={{
38+
color: "white",
39+
"text-decoration": "none",
40+
padding: "5px 10px",
41+
display: "block",
42+
}}
43+
>
44+
Home
45+
</A>
46+
</nav>
47+
<Canvas
48+
style={{ width: "100vw", height: "100vh" }}
49+
camera={{ position: new THREE.Vector3(0, 0, 10) }}
50+
onClick={event => console.debug("canvas clicked", event)}
51+
onClickMissed={event => console.debug("canvas click missed", event)}
52+
onPointerLeave={event => console.debug("canvas pointer leave", event)}
53+
onPointerEnter={event => console.debug("canvas pointer enter", event)}
54+
>
5555
{props.children}
56-
</T.Primitive>
56+
</Canvas>
5757
</>
5858
)
5959
}
6060

6161
export function App() {
6262
return (
63-
<Canvas
64-
style={{ width: "100vw", height: "100vh" }}
65-
camera={{ position: new THREE.Vector3(0, 0, 10) }}
66-
onClick={event => console.debug("canvas clicked", event)}
67-
onClickMissed={event => console.debug("canvas click missed", event)}
68-
onPointerLeave={event => console.debug("canvas pointer leave", event)}
69-
onPointerEnter={event => console.debug("canvas pointer enter", event)}
70-
>
71-
<T.AmbientLight color={[0.2, 0.2, 0.2]} />
72-
<T.PointLight intensity={1.2} decay={1} position={[2, 2, 5]} rotation={[0, Math.PI / 3, 0]} />
73-
74-
<Box name="1" position={new THREE.Vector3(0, 0, 0)}>
75-
<Box name="2" position={new THREE.Vector3(0.5, 0, 1)}>
76-
<Box name="3" position={new THREE.Vector3(0.5, 0, 1)} stopPropagation />
77-
</Box>
78-
</Box>
79-
</Canvas>
63+
<Router root={Layout}>
64+
<Route path="/basic" component={Basic} />
65+
<Route
66+
path="/"
67+
component={() => (
68+
<T.Mesh>
69+
<T.BoxGeometry />
70+
<T.MeshBasicMaterial color="gray" />
71+
</T.Mesh>
72+
)}
73+
/>
74+
</Router>
8075
)
8176
}

‎playground/Basic.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { createSignal, type ParentProps } from "solid-js"
2+
import * as THREE from "three"
3+
import { T, useFrame } from "../src/index.ts"
4+
5+
function Box(
6+
props: ParentProps<{
7+
name: string
8+
position: THREE.Vector3
9+
stopPropagation?: boolean
10+
noClick?: boolean
11+
}>,
12+
) {
13+
const mesh = new THREE.Mesh()
14+
const [hovered, setHovered] = createSignal(false)
15+
16+
useFrame(() => {
17+
mesh.rotation.y += 0.01
18+
})
19+
20+
return (
21+
<T.Primitive
22+
object={mesh}
23+
name={props.name}
24+
position={props.position}
25+
onClick={
26+
!props.noClick
27+
? event => {
28+
console.debug("click", props.name)
29+
if (props.stopPropagation) {
30+
event.stopPropagation()
31+
}
32+
}
33+
: undefined
34+
}
35+
onClickMissed={event => {
36+
console.debug("click missed!", props.name, event)
37+
}}
38+
onContextMenu={event => {
39+
console.debug("contextmenu", props.name, event)
40+
}}
41+
onContextMenuMissed={event => {
42+
console.debug("contextmenu missed", props.name, event)
43+
}}
44+
onPointerEnter={event => {
45+
console.debug("enter", props.name, event)
46+
setHovered(true)
47+
}}
48+
onPointerLeave={event => {
49+
console.debug("leave", props.name, event)
50+
setHovered(false)
51+
}}
52+
onPointerMove={event => {
53+
console.debug("move", props.name, event)
54+
if (props.stopPropagation) {
55+
event.stopPropagation()
56+
}
57+
}}
58+
>
59+
<T.BoxGeometry />
60+
<T.MeshBasicMaterial color={hovered() ? "green" : "red"} />
61+
{props.children}
62+
</T.Primitive>
63+
)
64+
}
65+
66+
export function Basic() {
67+
return (
68+
<>
69+
<T.AmbientLight color={[0.2, 0.2, 0.2]} />
70+
<T.PointLight intensity={1.2} decay={1} position={[2, 2, 5]} rotation={[0, Math.PI / 3, 0]} />
71+
<Box name="1" position={new THREE.Vector3(0, 0, 0)}>
72+
<Box name="2" position={new THREE.Vector3(2, 0, 0)}>
73+
<Box name="3" position={new THREE.Vector3(2, 0, 0)} stopPropagation />
74+
</Box>
75+
</Box>
76+
</>
77+
)
78+
}

‎pnpm-lock.yaml‎

Lines changed: 16 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)