mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
lain speaking issue and other minor bugfixes
This commit is contained in:
parent
7f993dbac3
commit
f9c5a7ce69
7 changed files with 35 additions and 27 deletions
|
@ -1,9 +1,9 @@
|
|||
import React from "react";
|
||||
import React, { memo } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import mainCylinder from "../../static/sprites/end/end_cylinder_1.png";
|
||||
|
||||
const EndCylinder = () => {
|
||||
const EndCylinder = memo(() => {
|
||||
const mainCylinderTex = useLoader(THREE.TextureLoader, mainCylinder);
|
||||
|
||||
return (
|
||||
|
@ -54,6 +54,6 @@ const EndCylinder = () => {
|
|||
</mesh>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default EndCylinder;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useRef } from "react";
|
||||
import React, { useRef, memo } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import secondCylinder from "../../static/sprites/end/end_cylinder_2.png";
|
||||
|
@ -8,7 +8,7 @@ type EndSphereProps = {
|
|||
outroAnim: boolean;
|
||||
};
|
||||
|
||||
const EndSphere = (props: EndSphereProps) => {
|
||||
const EndSphere = memo((props: EndSphereProps) => {
|
||||
const secondCylinderTex = useLoader(THREE.TextureLoader, secondCylinder);
|
||||
|
||||
const meshRef = useRef<THREE.Object3D>();
|
||||
|
@ -46,6 +46,6 @@ const EndSphere = (props: EndSphereProps) => {
|
|||
/>
|
||||
</mesh>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default EndSphere;
|
||||
|
|
|
@ -44,14 +44,22 @@ const LainSpeak = (props: LainTaKProps) => {
|
|||
|
||||
useFrame(() => {
|
||||
if (audioAnalyser) {
|
||||
const freq = audioAnalyser.getAverageFrequency() * 1.2;
|
||||
const buffer = new Uint8Array(audioAnalyser.analyser.fftSize / 2);
|
||||
audioAnalyser.analyser.getByteTimeDomainData(buffer);
|
||||
|
||||
let rms = 0;
|
||||
for (let i = 0; i < buffer.length; i++) {
|
||||
rms += buffer[i] * buffer[i];
|
||||
}
|
||||
|
||||
rms = Math.sqrt(rms / buffer.length);
|
||||
|
||||
if (mouthRef.current) {
|
||||
if (freq >= 50) {
|
||||
if (rms >= 130) {
|
||||
mouthRef.current.map = mouth4Tex;
|
||||
} else if (freq >= 40 && freq <= 50) {
|
||||
} else if (rms >= 129 && rms <= 130) {
|
||||
mouthRef.current.map = mouth3Tex;
|
||||
} else if (freq >= 30 && freq <= 40) {
|
||||
} else if (rms > 128 && rms <= 129) {
|
||||
mouthRef.current.map = mouth2Tex;
|
||||
} else {
|
||||
mouthRef.current.map = mouth1Tex;
|
||||
|
|
|
@ -67,7 +67,7 @@ const MediaPlayer = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<video id="media" ref={videoRef}>
|
||||
<video id="media" ref={videoRef} disablePictureInPicture>
|
||||
<track id={"track"} ref={trackRef} kind="metadata" default />
|
||||
</video>
|
||||
<div id={"subtitle-container"}>
|
||||
|
|
|
@ -5,7 +5,7 @@ import AudioVisualizerColumn from "./AudioVisualizerColumn";
|
|||
import { useStore } from "../../../store";
|
||||
|
||||
const AudioVisualizer = memo(() => {
|
||||
const audioAnalyser = useStore(state=> state.audioAnalyser)
|
||||
const audioAnalyser = useStore((state) => state.audioAnalyser);
|
||||
const columnRefs = useMemo(
|
||||
() =>
|
||||
Array.from({ length: 15 }, () => [
|
||||
|
@ -27,9 +27,7 @@ const AudioVisualizer = memo(() => {
|
|||
const ref3 = refArray[2];
|
||||
const ref4 = refArray[3];
|
||||
|
||||
// we up it by 1.2 just so it becomes a bit more noticable, otherwise
|
||||
// the visualizer is a bit too "calm"
|
||||
const currentFrequency = frequencyData[16 * idx] * 1.2;
|
||||
const currentFrequency = frequencyData[16 * idx];
|
||||
|
||||
switch (true) {
|
||||
case currentFrequency >= 255:
|
||||
|
|
|
@ -1,7 +1,4 @@
|
|||
import {
|
||||
findNodeFromWord,
|
||||
playMediaElement,
|
||||
} from "../../helpers/media-helpers";
|
||||
import { findNodeFromWord } from "../../helpers/media-helpers";
|
||||
import {
|
||||
changeLeftMediaComponent,
|
||||
changeMediaSide,
|
||||
|
|
|
@ -49,17 +49,22 @@ const Notes = () => {
|
|||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>Browser settings</p>
|
||||
<p>Browser Settings</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>
|
||||
This part might be updated from time to time as more issues pop
|
||||
up. <br />
|
||||
<span className="text-center">Firefox</span>
|
||||
<div className="browser-notes">
|
||||
privacy.resistFingerprinting should be set to false (it should
|
||||
be by default). Otherwise, it limits the maximum WebGL texture
|
||||
size to 2048, resulting in poor sprite quality.
|
||||
<br />
|
||||
Firefox: <br />
|
||||
privacy.resistFingerprinting needs to be set to false (it should
|
||||
be by default). Otherwise, it limits the maximum WebGL texture size to
|
||||
2048, resulting in poor sprite quality.
|
||||
<br />
|
||||
Picture-In-Picture functionality should not be used (you most
|
||||
likely have it disabled already). Just having it enabled won't
|
||||
break anything, but actually using it might lead to some funny
|
||||
visual bugs with media files.
|
||||
</div>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
Loading…
Reference in a new issue