|
2 | 2 | import { onDestroy, onMount } from "svelte"; |
3 | 3 | import * as THREE from "three"; |
4 | 4 | import Smoother from "../../script/utils/Smoother"; |
5 | | - import Live3DUtility, { type Vector3 } from "./Live3DUtility"; |
6 | | - import { currentData } from '../../script/stores/mlStore'; |
| 5 | + import Live3DUtility, { type Vector3 } from "./View3DUtility"; |
7 | 6 |
|
8 | 7 | // TODO: The file has a lot of hardcoded (somewhat arbitrary) number values. Go through them and check if a refactor is in order |
9 | 8 |
|
|
13 | 12 | export let smoothing = false; |
14 | 13 | export let width: number; |
15 | 14 | export let height: number; |
| 15 | + export let dataPoint: Vector3; |
16 | 16 |
|
17 | 17 | /** |
18 | 18 | * VARIABLES DEFINED IN FUNCTIONS OR FROM ELEMENTS |
|
50 | 50 | /** |
51 | 51 | * Setup reactive functionality |
52 | 52 | */ |
53 | | - $: handleNewDataPoint($currentData); |
| 53 | + $: { |
| 54 | + lastDataPoint = dataPoint |
| 55 | + updateCameraTarget(dataPoint) |
| 56 | + } |
54 | 57 | $: updateCanvasSize(height, width); |
55 | 58 |
|
56 | 59 | function onMicrobitModelLoad(model: THREE.Scene) { |
|
61 | 64 | updateFrame(); |
62 | 65 | } |
63 | 66 |
|
64 | | - function handleNewDataPoint(data: Vector3) { |
65 | | - lastDataPoint = data; |
66 | | - updateCameraTarget(data); |
67 | | - } |
68 | | -
|
69 | 67 | // TODO: Consider refactoring this to use cam location params. |
70 | 68 | // If the camera location is changed to control where the model is in the canvas, the |
71 | 69 | // values in this function needs changing to match |
|
81 | 79 | // X and Y need different mappings than Z, as Z points up/downwards and therefore require different |
82 | 80 | // mapping. |
83 | 81 | const mapToCameraDistance = (val: number): number => { |
84 | | - if (val < 0) return val * -1.5; |
| 82 | + if (val < 0) { |
| 83 | + return val * -1.5; |
| 84 | + } |
85 | 85 | return val * 0.6; |
86 | 86 | }; |
87 | 87 |
|
88 | 88 | const mapToCameraDistanceZ = (val: number): number => { |
89 | | - if (val < 0) return val * -.7; |
| 89 | + if (val < 0) { |
| 90 | + return val * -.7; |
| 91 | + } |
90 | 92 | return val * 1.5; |
91 | 93 | }; |
92 | 94 |
|
|
97 | 99 | mapToCameraDistance(data.y), |
98 | 100 | mapToCameraDistanceZ(data.z) |
99 | 101 | ); |
100 | | - if (setCurrentDistance) cameraCurrentDistance = cameraTargetDistance; |
| 102 | + if (setCurrentDistance) { |
| 103 | + cameraCurrentDistance = cameraTargetDistance; |
| 104 | + } |
101 | 105 | } |
102 | 106 |
|
103 | 107 | /** |
|
121 | 125 | // When called. Update bars are updated with the latest information. |
122 | 126 | // Camera distance and position is updated and lastly three.JS renders a new frame |
123 | 127 | function updateFrame() { |
124 | | - if (microbitModel === undefined) return; // TODO: If microbit model can ever be undefined, it has the wrong type |
125 | | - if (canvas === undefined) return; // TODO: If canvas can ever be undefined, it has the wrong type |
| 128 | + if (microbitModel === undefined) { |
| 129 | + // TODO: If microbit model can ever be undefined, it has the wrong type |
| 130 | + return; |
| 131 | + } |
| 132 | + if (canvas === undefined) { |
| 133 | + // TODO: If canvas can ever be undefined, it has the wrong type |
| 134 | + return; |
| 135 | + } |
126 | 136 |
|
127 | 137 | updateBarSizes({ |
128 | 138 | x: xSmoother.process(lastDataPoint.x), |
|
142 | 152 | * Which moves towards the target |
143 | 153 | */ |
144 | 154 | function updateCameraDistanceVariable(): void { |
| 155 | + // TODO: What does the -0.07 and / 6 mean in this? Clean up code |
145 | 156 | const diff = Math.max( |
146 | 157 | -0.07, |
147 | 158 | (cameraTargetDistance - cameraCurrentDistance) / 6 |
148 | 159 | ); |
149 | 160 |
|
150 | | - if (diff < 0) lastIncrease++; |
| 161 | + if (diff < 0) { |
| 162 | + lastIncrease++; |
| 163 | + } |
151 | 164 | else { |
152 | 165 | cameraCurrentDistance += diff; |
153 | 166 | lastIncrease = 0; |
154 | 167 | } |
155 | 168 |
|
156 | | - if (25 < lastIncrease) cameraCurrentDistance += diff; |
| 169 | + if (25 < lastIncrease) { |
| 170 | + cameraCurrentDistance += diff; |
| 171 | + } |
157 | 172 | } |
158 | 173 |
|
159 | 174 | /** |
|
162 | 177 | */ |
163 | 178 | function updateCameraPosition(distance: number): void { |
164 | 179 | distance = distance * 1.6 - 0.6; |
165 | | - if (distance < 0.2) distance = 0.2; |
| 180 | + if (distance < 0.2) { |
| 181 | + distance = 0.2; |
| 182 | + } |
166 | 183 | camera.position.z = -2 + 7 * distance; |
167 | 184 | camera.position.x = -2 + 7 * distance; |
168 | 185 | camera.position.y = -4 + 5 * distance; |
169 | 186 | } |
170 | 187 |
|
171 | 188 | onDestroy(() => { |
172 | | - if (updater !== undefined) clearInterval(updater); |
| 189 | + if (updater !== undefined) { |
| 190 | + clearInterval(updater); |
| 191 | + } |
| 192 | + canvas.remove() |
173 | 193 | }); |
174 | 194 |
|
175 | 195 | onMount(() => { |
|
0 commit comments