refactor(holographic): 移除 DeviceOrientationEvent 路径

- 删 startGyro / startDeviceOrientation / stopGyro
- 删 accelHandler / accelBaselineReady 等基线追踪状态
- simulate(x, y) 成为唯一驱动入口
- 保留 onMounted / onUnmounted 钩子(如果外部有需要可保留,否则删)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zerosaturation 2026-07-06 18:57:13 +08:00
parent a4836605e7
commit 217af65121

View File

@ -1,10 +1,10 @@
/**
* 全息镭射卡预览组合式函数
*
* 集成 WebGL HolographicEngine + 陀螺仪/触摸交互
* 与现有 useLenticularPreview / useLenticularStudioTilt 架构保持一致
* 集成 WebGL HolographicEngine + 触摸交互
* simulate(x, y) 是唯一驱动入口
*/
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ref, reactive } from 'vue'
function clamp(v, min, max) { return Math.max(min, Math.min(max, v)) }
function lerp(a, b, t) { return a + (b - a) * t }
@ -18,17 +18,10 @@ export function useHolographicPreview() {
gyroSimEnabled: true,
})
const viewAngle = reactive({ x: 0, y: 0, z: 0 })
const gyroSource = ref('simulation')
const isWebGLReady = ref(false)
const hasWebGLError = ref(false)
const fps = ref(0)
let accelHandler = null
let accelSmoothed = 0
let accelBaselineReady = false
let accelBaseX = 0
let accelBaseY = 0
function simulate(x, y) {
viewAngle.x = clamp(x, -1, 1)
viewAngle.y = clamp(y != null ? y : 0, -1, 1)
@ -41,73 +34,14 @@ export function useHolographicPreview() {
viewAngle.z *= factor
}
function startGyro() {
gyroSource.value = 'simulation'
if (typeof DeviceOrientationEvent === 'undefined') return
if (typeof DeviceOrientationEvent.requestPermission === 'function') {
gyroSource.value = 'deviceorientation-requesting'
DeviceOrientationEvent.requestPermission()
.then(state => { if (state === 'granted') startDeviceOrientation() })
.catch(() => { gyroSource.value = 'simulation' })
} else {
startDeviceOrientation()
}
}
function startDeviceOrientation() {
gyroSource.value = 'deviceorientation'
const handler = (e) => {
if (e.gamma == null || e.beta == null) return
const gamma = e.gamma || 0
const beta = e.beta || 0
if (!accelBaselineReady) {
accelBaseX = lerp(accelBaseX, gamma, 0.08)
accelBaseY = lerp(accelBaseY, beta, 0.08)
if (Math.abs(accelBaseX - gamma) < 0.3 && Math.abs(accelBaseY - beta) < 0.3) {
accelBaselineReady = true
}
return
}
const stab = clamp(physics.angleStability / 100, 0, 1)
const sens = physics.tiltSensitivity / 100
const k = 0.02 + (1 - stab) * 0.08
const dx = (gamma - accelBaseX) / 45 * sens
const dy = (beta - accelBaseY) / 45 * sens
accelSmoothed = lerp(accelSmoothed, dx, k)
const dead = physics.sensorDeadzoneStrength || 1
const db = 0.08 * dead
simulate(
Math.abs(accelSmoothed) < db ? 0 : clamp(accelSmoothed, -1, 1),
clamp(dy, -1, 1)
)
}
window.addEventListener('deviceorientation', handler, true)
accelHandler = handler
}
function stopGyro() {
if (accelHandler) {
window.removeEventListener('deviceorientation', accelHandler, true)
accelHandler = null
}
gyroSource.value = 'simulation'
accelBaselineReady = false
}
function onWebGLReady() { isWebGLReady.value = true; hasWebGLError.value = false }
function onWebGLError() { hasWebGLError.value = true; isWebGLReady.value = false }
function onFPSUpdate(v) { fps.value = v }
onMounted(() => {
if (physics.gyroSimEnabled) setTimeout(startGyro, 600)
})
onUnmounted(() => { stopGyro() })
return {
physics, viewAngle, gyroSource,
physics, viewAngle,
isWebGLReady, hasWebGLError, fps,
simulate, relax, startGyro, stopGyro,
simulate, relax,
onWebGLReady, onWebGLError, onFPSUpdate,
}
}