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:
parent
a4836605e7
commit
217af65121
@ -1,10 +1,10 @@
|
|||||||
/**
|
/**
|
||||||
* 全息镭射卡预览组合式函数
|
* 全息镭射卡预览组合式函数
|
||||||
*
|
*
|
||||||
* 集成 WebGL HolographicEngine + 陀螺仪/触摸交互
|
* 集成 WebGL HolographicEngine + 触摸交互
|
||||||
* 与现有 useLenticularPreview / useLenticularStudioTilt 架构保持一致
|
* 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 clamp(v, min, max) { return Math.max(min, Math.min(max, v)) }
|
||||||
function lerp(a, b, t) { return a + (b - a) * t }
|
function lerp(a, b, t) { return a + (b - a) * t }
|
||||||
@ -18,17 +18,10 @@ export function useHolographicPreview() {
|
|||||||
gyroSimEnabled: true,
|
gyroSimEnabled: true,
|
||||||
})
|
})
|
||||||
const viewAngle = reactive({ x: 0, y: 0, z: 0 })
|
const viewAngle = reactive({ x: 0, y: 0, z: 0 })
|
||||||
const gyroSource = ref('simulation')
|
|
||||||
const isWebGLReady = ref(false)
|
const isWebGLReady = ref(false)
|
||||||
const hasWebGLError = ref(false)
|
const hasWebGLError = ref(false)
|
||||||
const fps = ref(0)
|
const fps = ref(0)
|
||||||
|
|
||||||
let accelHandler = null
|
|
||||||
let accelSmoothed = 0
|
|
||||||
let accelBaselineReady = false
|
|
||||||
let accelBaseX = 0
|
|
||||||
let accelBaseY = 0
|
|
||||||
|
|
||||||
function simulate(x, y) {
|
function simulate(x, y) {
|
||||||
viewAngle.x = clamp(x, -1, 1)
|
viewAngle.x = clamp(x, -1, 1)
|
||||||
viewAngle.y = clamp(y != null ? y : 0, -1, 1)
|
viewAngle.y = clamp(y != null ? y : 0, -1, 1)
|
||||||
@ -41,73 +34,14 @@ export function useHolographicPreview() {
|
|||||||
viewAngle.z *= factor
|
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 onWebGLReady() { isWebGLReady.value = true; hasWebGLError.value = false }
|
||||||
function onWebGLError() { hasWebGLError.value = true; isWebGLReady.value = false }
|
function onWebGLError() { hasWebGLError.value = true; isWebGLReady.value = false }
|
||||||
function onFPSUpdate(v) { fps.value = v }
|
function onFPSUpdate(v) { fps.value = v }
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (physics.gyroSimEnabled) setTimeout(startGyro, 600)
|
|
||||||
})
|
|
||||||
onUnmounted(() => { stopGyro() })
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
physics, viewAngle, gyroSource,
|
physics, viewAngle,
|
||||||
isWebGLReady, hasWebGLError, fps,
|
isWebGLReady, hasWebGLError, fps,
|
||||||
simulate, relax, startGyro, stopGyro,
|
simulate, relax,
|
||||||
onWebGLReady, onWebGLError, onFPSUpdate,
|
onWebGLReady, onWebGLError, onFPSUpdate,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user