Skip to content
This repository was archived by the owner on Jun 24, 2023. It is now read-only.

Commit 8780ea0

Browse files
krispyakrispya
authored
Merge pull request #39 from Nicetouchco/better-loop
Add `ThreeEventManager`
2 parents d0cc1ee + 2bd3b34 commit 8780ea0

28 files changed

+777
-317
lines changed

‎examples/example/src/demos/Animation.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
1-
import React, { useState } from 'react'
2-
import { Canvas } from '@react-three/fiber'
3-
import { a, useSpring } from '@react-spring/three'
4-
import { OrbitControls } from '@react-three/drei'
1+
import React, { useState } from "react"
2+
import { Canvas } from "@react-three/fiber"
3+
import { a, useSpring } from "@react-spring/three"
4+
import { OrbitControls } from "@react-three/drei"
55

66
export default function Box() {
77
const [active, setActive] = useState(0)
88
// create a common spring that will be used later to interpolate other values
99
const { spring } = useSpring({
1010
spring: active,
11-
config: { mass: 5, tension: 400, friction: 50, precision: 0.0001 },
11+
config: { mass: 5, tension: 400, friction: 50, precision: 0.0001 }
1212
})
1313
// interpolate values from commong spring
1414
const scale = spring.to([0, 1], [1, 2])
1515
const rotation = spring.to([0, 1], [0, Math.PI])
16-
const color = spring.to([0, 1], ['#6246ea', '#e45858'])
16+
const color = spring.to([0, 1], ["#6246ea", "#e45858"])
1717
return (
1818
<Canvas>
19-
<a.mesh rotation-y={rotation} scale-x={scale} scale-z={scale} onClick={() => setActive(Number(!active))}>
19+
<a.mesh
20+
rotation-y={rotation}
21+
scale-x={scale}
22+
scale-z={scale}
23+
onClick={() => setActive(Number(!active))}
24+
>
2025
<boxGeometry />
2126
<a.meshBasicMaterial color={color} />
2227
</a.mesh>

‎examples/example/src/demos/ClickAndHover.tsx

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
import * as THREE from 'three'
2-
import React, { useState, useRef } from 'react'
3-
import { Canvas, useFrame } from '@react-three/fiber'
1+
import * as THREE from "three"
2+
import React, { useState, useRef } from "react"
3+
import { Canvas, useFrame } from "@react-three/fiber"
44

5-
const mesh = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 'red' }))
5+
const mesh = new THREE.Mesh(
6+
new THREE.BoxGeometry(),
7+
new THREE.MeshBasicMaterial({ color: "red" })
8+
)
69
const group = new THREE.Group()
710
group.add(mesh)
811

@@ -20,15 +23,18 @@ function Box(props: any) {
2023
onPointerOut={(e) => setHovered(false)}
2124
onClick={() => setClicked(!clicked)}
2225
scale={clicked ? [1.5, 1.5, 1.5] : [1, 1, 1]}
23-
{...props}>
26+
{...props}
27+
>
2428
<boxGeometry />
25-
<meshBasicMaterial color={hovered ? 'hotpink' : 'aquamarine'} />
29+
<meshBasicMaterial color={hovered ? "hotpink" : "aquamarine"} />
2630
</mesh>
2731
)
2832
}
2933

3034
function Box2(props: any) {
31-
return <primitive object={group} {...props} onClick={() => console.log('hi')} />
35+
return (
36+
<primitive object={group} {...props} onClick={() => console.log("hi")} />
37+
)
3238
}
3339

3440
export default function App() {

‎examples/example/src/demos/ContextMenuOverride.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useState } from 'react'
2-
import { Canvas } from '@react-three/fiber'
1+
import React, { useState } from "react"
2+
import { Canvas } from "@react-three/fiber"
33

44
export default function App() {
55
const [state, set] = useState(false)
@@ -8,7 +8,8 @@ export default function App() {
88
<Canvas
99
orthographic
1010
camera={{ zoom: 150, fov: 75, position: [0, 0, 25] }}
11-
onPointerMissed={() => console.log('canvas.missed')}>
11+
onPointerMissed={() => console.log("canvas.missed")}
12+
>
1213
<ambientLight />
1314
<pointLight position={[10, 10, 10]} />
1415
<mesh
@@ -17,9 +18,10 @@ export default function App() {
1718
ev.nativeEvent.preventDefault()
1819
set((value) => !value)
1920
}}
20-
onPointerMissed={() => console.log('mesh.missed')}>
21+
onPointerMissed={() => console.log("mesh.missed")}
22+
>
2123
<boxBufferGeometry args={[1, 1, 1]} />
22-
<meshPhysicalMaterial color={state ? 'hotpink' : 'blue'} />
24+
<meshPhysicalMaterial color={state ? "hotpink" : "blue"} />
2325
</mesh>
2426
</Canvas>
2527
)

‎examples/example/src/demos/Inject.tsx

+20-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
import * as THREE from 'three'
2-
import React, { useState, useEffect } from 'react'
3-
import { Canvas, createPortal, useThree, getRootState } from '@react-three/fiber'
1+
import * as THREE from "three"
2+
import React, { useState, useEffect } from "react"
3+
import {
4+
Canvas,
5+
createPortal,
6+
useThree,
7+
getRootState
8+
} from "@react-three/fiber"
49

510
const customCamera1 = new THREE.PerspectiveCamera()
611
const customCamera2 = new THREE.PerspectiveCamera()
@@ -19,10 +24,14 @@ export default function App() {
1924
{createPortal(
2025
<group>
2126
{mounted && <Cube position={[0, 0.5, 0]} color="lightblue" />}
22-
{createPortal(<Cube position={[0.5, 0, 0]} color="aquamarine" />, scene2, { camera: customCamera2 })}
27+
{createPortal(
28+
<Cube position={[0.5, 0, 0]} color="aquamarine" />,
29+
scene2,
30+
{ camera: customCamera2 }
31+
)}
2332
</group>,
2433
scene1,
25-
{ camera: customCamera1 },
34+
{ camera: customCamera1 }
2635
)}
2736
<primitive object={scene1} />
2837
<primitive object={scene2} />
@@ -34,7 +43,12 @@ function Cube({ color, ...props }: any) {
3443
const camera = useThree((state) => state.camera)
3544
const ref = React.useRef<THREE.Mesh>(null!)
3645
useEffect(() => {
37-
console.log(`from within ${color}.useEffect`, getRootState(ref.current)?.camera, 'camera', camera.uuid)
46+
console.log(
47+
`from within ${color}.useEffect`,
48+
getRootState(ref.current)?.camera,
49+
"camera",
50+
camera.uuid
51+
)
3852
}, [])
3953
return (
4054
<mesh ref={ref} {...props}>

‎examples/example/src/demos/Layers.tsx

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import * as THREE from 'three'
2-
import React, { useEffect, useReducer } from 'react'
3-
import { Canvas } from '@react-three/fiber'
1+
import * as THREE from "three"
2+
import React, { useEffect, useReducer } from "react"
3+
import { Canvas } from "@react-three/fiber"
44

55
const invisibleLayer = new THREE.Layers()
66
invisibleLayer.set(4)
@@ -35,8 +35,14 @@ export default function App() {
3535
})
3636
return (
3737
<Canvas camera={{ layers: visibleLayers }}>
38-
<Box position={[-0.5, 0, 0]} layers={!visible ? invisibleLayer : visibleLayers} />
39-
<Sphere position={[0.5, 0, 0]} layers={visible ? invisibleLayer : visibleLayers} />
38+
<Box
39+
position={[-0.5, 0, 0]}
40+
layers={!visible ? invisibleLayer : visibleLayers}
41+
/>
42+
<Sphere
43+
position={[0.5, 0, 0]}
44+
layers={visible ? invisibleLayer : visibleLayers}
45+
/>
4046
</Canvas>
4147
)
4248
}

‎examples/example/src/demos/Lines.tsx

+47-19
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
1-
import React, { useRef, useEffect, useState, useCallback, useContext, useMemo } from 'react'
2-
import { extend, Canvas, useThree } from '@react-three/fiber'
3-
import { OrbitControls } from 'three-stdlib'
1+
import React, {
2+
useRef,
3+
useEffect,
4+
useState,
5+
useCallback,
6+
useContext,
7+
useMemo
8+
} from "react"
9+
import { extend, Canvas, useThree } from "@react-three/fiber"
10+
import { OrbitControls } from "three-stdlib"
411
extend({ OrbitControls })
512

613
function useHover(stopPropagation = true) {
@@ -10,16 +17,19 @@ function useHover(stopPropagation = true) {
1017
if (stopPropagation) e.stopPropagation()
1118
setHover(true)
1219
},
13-
[stopPropagation],
20+
[stopPropagation]
1421
)
1522
const unhover = useCallback(
1623
(e) => {
1724
if (stopPropagation) e.stopPropagation()
1825
setHover(false)
1926
},
20-
[stopPropagation],
27+
[stopPropagation]
2128
)
22-
const [bind] = useState(() => ({ onPointerOver: hover, onPointerOut: unhover }))
29+
const [bind] = useState(() => ({
30+
onPointerOver: hover,
31+
onPointerOut: unhover
32+
}))
2333
return [bind, hovered]
2434
}
2535

@@ -29,25 +39,25 @@ function useDrag(onDrag: any, onEnd: any) {
2939

3040
const down = useCallback(
3141
(e) => {
32-
console.log('down')
42+
console.log("down")
3343
setActive(true)
3444
toggle(false)
3545
e.stopPropagation()
3646
e.target.setPointerCapture(e.pointerId)
3747
},
38-
[toggle],
48+
[toggle]
3949
)
4050

4151
const up = useCallback(
4252
(e) => {
43-
console.log('up')
53+
console.log("up")
4454
setActive(false)
4555
toggle(true)
4656
e.stopPropagation()
4757
e.target.releasePointerCapture(e.pointerId)
4858
if (onEnd) onEnd()
4959
},
50-
[onEnd, toggle],
60+
[onEnd, toggle]
5161
)
5262

5363
const activeRef = useRef<any>()
@@ -59,10 +69,14 @@ function useDrag(onDrag: any, onEnd: any) {
5969
onDrag(event.unprojectedPoint)
6070
}
6171
},
62-
[onDrag],
72+
[onDrag]
6373
)
6474

65-
const [bind] = useState(() => ({ onPointerDown: down, onPointerUp: up, onPointerMove: move }))
75+
const [bind] = useState(() => ({
76+
onPointerDown: down,
77+
onPointerUp: up,
78+
onPointerMove: move
79+
}))
6680
return bind
6781
}
6882

@@ -72,15 +86,18 @@ function EndPoint({ position, onDrag, onEnd }: any) {
7286
return (
7387
<mesh position={position} {...bindDrag} {...bindHover}>
7488
<sphereGeometry args={[7.5, 16, 16]} />
75-
<meshBasicMaterial color={hovered ? 'hotpink' : [0.1, 0.2, 0.9]} />
89+
<meshBasicMaterial color={hovered ? "hotpink" : [0.1, 0.2, 0.9]} />
7690
</mesh>
7791
)
7892
}
7993

8094
function Line({ defaultStart, defaultEnd }: any) {
8195
const [start, setStart] = useState(defaultStart)
8296
const [end, setEnd] = useState(defaultEnd)
83-
const positions = useMemo(() => new Float32Array([...start, ...end]), [start, end])
97+
const positions = useMemo(
98+
() => new Float32Array([...start, ...end]),
99+
[start, end]
100+
)
84101
const lineRef = useRef<THREE.Line>(null!)
85102
useEffect(() => {
86103
const { current } = lineRef
@@ -92,7 +109,12 @@ function Line({ defaultStart, defaultEnd }: any) {
92109
<>
93110
<line ref={lineRef as any}>
94111
<bufferGeometry>
95-
<bufferAttribute attach="attributes-position" count={positions.length / 3} array={positions} itemSize={3} />
112+
<bufferAttribute
113+
attach="attributes-position"
114+
count={positions.length / 3}
115+
array={positions}
116+
itemSize={3}
117+
/>
96118
</bufferGeometry>
97119
<lineBasicMaterial color="black" />
98120
</line>
@@ -111,13 +133,18 @@ function Controls({ children }: any) {
111133
const current = ref.current
112134
const onChange = () => invalidate()
113135

114-
current.addEventListener('change', onChange)
115-
return () => current.removeEventListener('change', onChange)
136+
current.addEventListener("change", onChange)
137+
return () => current.removeEventListener("change", onChange)
116138
}, [invalidate])
117139

118140
return (
119141
<>
120-
<orbitControls ref={ref} args={[camera, gl.domElement]} enableDamping enabled={api[0]} />
142+
<orbitControls
143+
ref={ref}
144+
args={[camera, gl.domElement]}
145+
enableDamping
146+
enabled={api[0]}
147+
/>
121148
<camContext.Provider value={api as any}>{children}</camContext.Provider>
122149
</>
123150
)
@@ -129,7 +156,8 @@ export default function App() {
129156
frameloop="demand"
130157
orthographic
131158
raycaster={{ params: { Line: { threshold: 5 } } }}
132-
camera={{ position: [0, 0, 500], zoom: 1 }}>
159+
camera={{ position: [0, 0, 500], zoom: 1 }}
160+
>
133161
<Controls>
134162
<Line defaultStart={[-100, -100, 0]} defaultEnd={[0, 100, 0]} />
135163
<Line defaultStart={[0, 100, 0]} defaultEnd={[100, -100, 0]} />

0 commit comments

Comments
 (0)