Merge pull request #11 from Team-1280/camera-overhaul-update

Sync camera-overhaul to latest chnages
This commit is contained in:
Youwen Wu 2024-02-27 19:39:20 -08:00 committed by GitHub
commit 39f5492d7d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 83 additions and 13 deletions

15
LICENSE
View file

@ -1,21 +1,22 @@
BSD 3-Clause License BSD 3-Clause License, Modified
Copyright (c) 2024, Youwen Wu Copyright (c) 2024, Youwen Wu
Redistribution and use in source and binary forms, with or without Redistribution and use in binary forms, with or without
modification, are permitted provided that the following conditions are met: modification, are permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this 1. Redistributions in binary form must reproduce the above copyright notice,
list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution. and/or other materials provided with the distribution.
3. Neither the name of the copyright holder nor the names of its 2. Neither the name of the copyright holder nor the names of its
contributors may be used to endorse or promote products derived from contributors may be used to endorse or promote products derived from
this software without specific prior written permission. this software without specific prior written permission.
Redistribution and use of source code without explicit permission granted by the
Owner of this repository (Team 1280, The Ragin' C-Biscuits, San Ramon Valley
High School, and Youwen Wu) is strictly prohibited.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE

View file

@ -4,6 +4,31 @@ A remastered version of the original Jankboard, with a focus on minimizing the J
The frontend is powered by Svelte 4 (unfortunately, we had to drop support for the bleeding edge Svelte 5 due to lack of Vite support). The frontend is powered by Svelte 4 (unfortunately, we had to drop support for the bleeding edge Svelte 5 due to lack of Vite support).
This project is closed source (for now) and licensed under a modified BSD 3.0 license. This project is closed source (for now) and licensed under a modified BSD 3.0 license.
## Installation guide
We recommend installing the latest stable release binaries from [our release page](https://github.com/Team-1280/Jankboard-2/releases/), if you're just looking to run the Jankboard. Currently, there is no stable release which includes telemetry uplink, which is in alpha.
## For developers
If you would like to contribute to Jankboard 2, there's only a few simple steps to get the development build up and running.
**Prerequisites**
- Rust and `cargo`. Check the [Rust docs](https://www.rust-lang.org/learn) for more information. We recommend you install Rust using `rustup`. Keep in mind that this is ONLY necessary for development, release binaries do not require Rust.
- NodeJS and `npm`, for installing dependencies and the `vite` development server.
- If you would like the install the (deprecated) Python backend, you will need to install the `poetry` package manager.
1. Clone the repository. The `app` folder contains most of the (soon to be deprecated) Python code that powers the telemetry. The `client` folder contains the code for the desktop app. The `client/src-tauri` contains the The python backend in `app` is currently being deprecated in favor of a Rust backend. If you need to run it for any reason, check the section below (**Troubleshooting common issues**).
2. `cd` into the `client` folder. The configuration files and `package.json`, as well as project code for the desktop app are all stored here. To install dependencies, simply run `npm i`.
3. To run the desktop app in developer mode (with automatic hot stateful reload and other useful features like error reporting), make sure you're in the `client` directory and run `npm run tauri dev`. This will install and build the Rust dependencies via `cargo` and initialize the `vite` development server for the frontend. Note that since this is basically just running the `vite` development server and then connecting the Tauri webview to it, there may be slightly inconsistent behavior in dev mode versus production mode.
4. To run the frontend, first `cd` into the `client` directory. This is where the project files for the frontend are stored, including `package.json` and various configuration files.
6. To create a production binary, run `npm run tauri dev`. Tauri cross-compilation is still in beta, so you should generally try to build targetting the same OS you're currently running. Check [the Tauri docs](https://tauri.app/v1/guides/building/) for more information.
## Troubleshooting common issues
- If you're experiencing issues with TypeScript type checking or dependency resolution, try opening your editor directly in the `client` directory so it picks up the `tsconfig.json` and uses the project's own TypeScript language server.
- If you don't have access to a development environment that supports running standalone executables (eg. Github Codespaces), you can try running `npm run dev` instead of `npm run tauri dev`, which will open a development server at `localhost:5173` with the frontend running in the web. However, this may break at any time as critical functionality is more directly attached to the Rust backend.
- If for some reason you need to install and use the Python backend while we are migrating to Rust, run `poetry install --no-root` in the root directory of the project to install dependencies. You can start the server with `poetry run flask --app app/server.py run --host localhost --port 1280` (it must be running at port `1280` for the frontend to detect it).
## Current progress and improvements over (original) Jankboard ## Current progress and improvements over (original) Jankboard
- Layout, toasts/notifications, music player, and app system ported. - Layout, toasts/notifications, music player, and app system ported.

View file

@ -87,9 +87,9 @@
object as unknown as { x: number; y: number; z: number } object as unknown as { x: number; y: number; z: number }
) )
const horizontalOffsetDistance = 12 // Distance behind the leading vector const horizontalOffsetDistance = 15 // Distance behind the leading vector
const direction = new Vector3(0, 0, 1) // Default forward direction in Three.js is negative z-axis, so behind is positive z-axis const direction = new Vector3(0, 0, 1) // Default forward direction in Three.js is negative z-axis, so behind is positive z-axis
const verticalOffset = new Vector3(0, -2.8, 0) const verticalOffset = new Vector3(0, -5, 0)
// Calculate the offset vector // Calculate the offset vector
const offsetVector = direction const offsetVector = direction
@ -100,14 +100,56 @@
// If the leading object is rotating, apply its rotation to the offset vector // If the leading object is rotating, apply its rotation to the offset vector
const rotatedOffsetVector = offsetVector.applyQuaternion(object.quaternion) const rotatedOffsetVector = offsetVector.applyQuaternion(object.quaternion)
const leftOffset = -1.5
function shiftVectorLeft(
vector: Vector3,
amount: number,
upDirection = axis
): void {
// Calculate the left direction. Assuming 'up' is the global up direction or a custom up vector.
// This creates a vector pointing to the "left" of the original vector, in a 3D context.
let leftDirection = new Vector3()
.crossVectors(upDirection, vector)
.normalize()
// Scale the left direction by the desired amount
leftDirection.multiplyScalar(amount)
// Add the scaled left direction to the original vector, mutating it
vector.add(leftDirection)
}
shiftVectorLeft(rotatedOffsetVector, leftOffset)
// Calculate the trailing vector's position // Calculate the trailing vector's position
const trailingVector = robotPosition.clone().sub(rotatedOffsetVector) const trailingVector = robotPosition.clone().sub(rotatedOffsetVector)
function shiftVectorLeftNonMutate(
vector: Vector3,
amount: number,
upDirection = axis
): Vector3 {
// Create a new vector to avoid mutating the original vector
let shiftedVector = vector.clone()
// Calculate the left direction. Assuming 'up' is the global up direction or a custom up vector.
// This creates a vector pointing to the "left" of the original vector, in a 3D context.
let leftDirection = new Vector3()
.crossVectors(upDirection, vector)
.normalize()
// Scale the left direction by the desired amount and add it to the original vector
leftDirection.multiplyScalar(amount)
shiftedVector.add(leftDirection)
return shiftedVector
}
if (!shouldOrbit) { if (!shouldOrbit) {
// then finally set the camera, a bit behind the model // then finally set the camera, a bit behind the model
$camera!.position.copy(trailingVector) $camera!.position.copy(trailingVector)
// Rotate the offset around the Y-axis // Rotate the offset around the Y-axis
$camera!.lookAt(currentLookAt) $camera!.lookAt(shiftVectorLeftNonMutate(currentLookAt, -leftOffset))
} }
}) })

View file

@ -2,6 +2,7 @@
import { T, useTask } from "@threlte/core"; import { T, useTask } from "@threlte/core";
import { ContactShadows, Float, Grid, OrbitControls } from "@threlte/extras"; import { ContactShadows, Float, Grid, OrbitControls } from "@threlte/extras";
import Controls from "./Controls.svelte"; import Controls from "./Controls.svelte";
import { import {
Vector3, Vector3,
type Camera, type Camera,
@ -137,18 +138,19 @@
cellColor="#ffffff" cellColor="#ffffff"
sectionColor="#ffffff" sectionColor="#ffffff"
sectionThickness={0} sectionThickness={0}
fadeDistance={75} fadeDistance={100}
cellSize={2} cellSize={6}
infiniteGrid infiniteGrid
/> />
<ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} /> <ContactShadows scale={10} blur={2} far={2.5} opacity={0.5} />
<!-- <Hornet <!-- <Hornet
position.y={2} position.y={2}
position.z={robotPos.z} position.z={robotPos.z}
position.x={robotPos.x} position.x={robotPos.x}
scale={[0.8, 0.8, 0.8]} scale={[5, 5, 5]}
bind:ref={capsule} bind:ref={capsule}
rotation.y={rot} rotation.y={rot}
/> --> /> -->