forked from EXT/VR180-Web-Player
This commit is contained in:
@@ -10,8 +10,8 @@ export type VrOverlayVisibilityOptions = {
|
||||
hideDelayMs?: number;
|
||||
};
|
||||
|
||||
export const INPUT_OVERLAY_HIDE_DELAY_MS = 2500;
|
||||
export const INPUT_OVERLAY_FADE_DURATION_MS = 200;
|
||||
export const INPUT_OVERLAY_HIDE_DELAY_MS = 1600;
|
||||
export const INPUT_OVERLAY_FADE_DURATION_MS = 260;
|
||||
export const INPUT_OVERLAY_RENDER_ORDER = 10000;
|
||||
export const POINTER_LENGTH = 5;
|
||||
export const POINTER_MIN_LENGTH = 0.06;
|
||||
@@ -19,29 +19,9 @@ export const POINTER_HIT_SURFACE_OFFSET = 0.015;
|
||||
|
||||
const HAND_JOINT_NAMES = [
|
||||
'wrist',
|
||||
'thumb-metacarpal',
|
||||
'thumb-phalanx-proximal',
|
||||
'thumb-phalanx-distal',
|
||||
'thumb-tip',
|
||||
'index-finger-metacarpal',
|
||||
'index-finger-phalanx-proximal',
|
||||
'index-finger-phalanx-intermediate',
|
||||
'index-finger-phalanx-distal',
|
||||
'index-finger-tip',
|
||||
'middle-finger-metacarpal',
|
||||
'middle-finger-phalanx-proximal',
|
||||
'middle-finger-phalanx-intermediate',
|
||||
'middle-finger-phalanx-distal',
|
||||
'middle-finger-tip',
|
||||
'ring-finger-metacarpal',
|
||||
'ring-finger-phalanx-proximal',
|
||||
'ring-finger-phalanx-intermediate',
|
||||
'ring-finger-phalanx-distal',
|
||||
'ring-finger-tip',
|
||||
'pinky-finger-metacarpal',
|
||||
'pinky-finger-phalanx-proximal',
|
||||
'pinky-finger-phalanx-intermediate',
|
||||
'pinky-finger-phalanx-distal',
|
||||
'pinky-finger-tip'
|
||||
];
|
||||
|
||||
@@ -123,7 +103,7 @@ export class VrOverlayVisibility {
|
||||
object.traverse?.((child: any) => {
|
||||
const materials = Array.isArray(child.material) ? child.material : [child.material];
|
||||
materials.filter(Boolean).forEach((material: any) => {
|
||||
material.opacity = opacity;
|
||||
material.opacity = opacity * getOverlayMaterialMaxOpacity(material);
|
||||
material.transparent = true;
|
||||
material.depthTest = false;
|
||||
material.depthWrite = false;
|
||||
@@ -153,7 +133,7 @@ export function createPointerOverlay(index: number, overlayVisibility: VrOverlay
|
||||
const group = new THREE.Group();
|
||||
group.name = `vrPointerOverlay${index}`;
|
||||
|
||||
const pointerMaterial = createOverlayLineMaterial(index === 0 ? 0x8fd8ff : 0xffc16b, 0.75);
|
||||
const pointerMaterial = createOverlayLineMaterial(index === 0 ? 0xb9e8ff : 0xffd99a, 0.28);
|
||||
const pointerGeometry = new THREE.BufferGeometry().setFromPoints([
|
||||
new THREE.Vector3(0, 0, 0),
|
||||
new THREE.Vector3(0, 0, -POINTER_LENGTH)
|
||||
@@ -163,8 +143,8 @@ export function createPointerOverlay(index: number, overlayVisibility: VrOverlay
|
||||
pointerLine.renderOrder = INPUT_OVERLAY_RENDER_ORDER;
|
||||
group.add(pointerLine);
|
||||
|
||||
const tipMaterial = createOverlayMeshMaterial(index === 0 ? 0x8fd8ff : 0xffc16b, 0.9);
|
||||
const tipMesh = new THREE.Mesh(new THREE.SphereGeometry(0.018, 12, 8), tipMaterial);
|
||||
const tipMaterial = createOverlayMeshMaterial(index === 0 ? 0xd8f5ff : 0xffe6ba, 0.42);
|
||||
const tipMesh = new THREE.Mesh(new THREE.SphereGeometry(0.01, 10, 6), tipMaterial);
|
||||
tipMesh.name = `vrPointerTip${index}`;
|
||||
tipMesh.position.z = -POINTER_LENGTH;
|
||||
tipMesh.renderOrder = INPUT_OVERLAY_RENDER_ORDER + 1;
|
||||
@@ -195,7 +175,7 @@ export function createControllerOverlay(index: number, overlayVisibility: VrOver
|
||||
const group = new THREE.Group();
|
||||
group.name = `vrControllerOverlay${index}`;
|
||||
|
||||
const material = createOverlayLineMaterial(index === 0 ? 0x8fd8ff : 0xffc16b, 0.8);
|
||||
const material = createOverlayLineMaterial(index === 0 ? 0xb9e8ff : 0xffd99a, 0.24);
|
||||
const outlineGeometry = new THREE.BufferGeometry().setFromPoints([
|
||||
new THREE.Vector3(-0.045, -0.025, -0.08),
|
||||
new THREE.Vector3(0.045, -0.025, -0.08),
|
||||
@@ -210,8 +190,8 @@ export function createControllerOverlay(index: number, overlayVisibility: VrOver
|
||||
outline.renderOrder = INPUT_OVERLAY_RENDER_ORDER;
|
||||
group.add(outline);
|
||||
|
||||
const originMaterial = createOverlayMeshMaterial(0xffffff, 0.75);
|
||||
const origin = new THREE.Mesh(new THREE.SphereGeometry(0.012, 10, 6), originMaterial);
|
||||
const originMaterial = createOverlayMeshMaterial(0xffffff, 0.28);
|
||||
const origin = new THREE.Mesh(new THREE.SphereGeometry(0.007, 8, 5), originMaterial);
|
||||
origin.name = `vrControllerOrigin${index}`;
|
||||
origin.renderOrder = INPUT_OVERLAY_RENDER_ORDER + 1;
|
||||
group.add(origin);
|
||||
@@ -226,7 +206,7 @@ export function createHandOverlay(hand: any, index: number, overlayVisibility: V
|
||||
return;
|
||||
}
|
||||
|
||||
const material = createOverlayMeshMaterial(index === 0 ? 0x8fd8ff : 0xffc16b, 0.85);
|
||||
const material = createOverlayMeshMaterial(index === 0 ? 0xb9e8ff : 0xffd99a, 0.26);
|
||||
joints.forEach(({ joint, name }) => {
|
||||
if (!joint || joint.userData?.vrwpHandOverlayMarker) {
|
||||
return;
|
||||
@@ -234,8 +214,8 @@ export function createHandOverlay(hand: any, index: number, overlayVisibility: V
|
||||
|
||||
const isTip = name.endsWith('tip');
|
||||
const isWrist = name === 'wrist';
|
||||
const radius = isWrist ? 0.014 : isTip ? 0.011 : 0.008;
|
||||
const marker = new THREE.Mesh(new THREE.SphereGeometry(radius, 10, 6), material);
|
||||
const radius = isWrist ? 0.008 : isTip ? 0.006 : 0.005;
|
||||
const marker = new THREE.Mesh(new THREE.SphereGeometry(radius, 8, 5), material);
|
||||
marker.name = `vrHandJointOverlay${index}-${name}`;
|
||||
marker.renderOrder = INPUT_OVERLAY_RENDER_ORDER + 2;
|
||||
marker.frustumCulled = false;
|
||||
@@ -289,23 +269,38 @@ export function setPointerOverlayLength(pointerOverlay: any, length: number): vo
|
||||
}
|
||||
|
||||
export function createOverlayLineMaterial(color: number, opacity: number): any {
|
||||
return new THREE.LineBasicMaterial({
|
||||
const material = new THREE.LineBasicMaterial({
|
||||
color,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
opacity,
|
||||
transparent: true
|
||||
});
|
||||
material.userData = {
|
||||
...material.userData,
|
||||
vrwpOverlayMaxOpacity: opacity
|
||||
};
|
||||
return material;
|
||||
}
|
||||
|
||||
export function createOverlayMeshMaterial(color: number, opacity: number): any {
|
||||
return new THREE.MeshBasicMaterial({
|
||||
const material = new THREE.MeshBasicMaterial({
|
||||
color,
|
||||
depthTest: false,
|
||||
depthWrite: false,
|
||||
opacity,
|
||||
transparent: true
|
||||
});
|
||||
material.userData = {
|
||||
...material.userData,
|
||||
vrwpOverlayMaxOpacity: opacity
|
||||
};
|
||||
return material;
|
||||
}
|
||||
|
||||
function getOverlayMaterialMaxOpacity(material: any): number {
|
||||
const maxOpacity = material.userData?.vrwpOverlayMaxOpacity;
|
||||
return Number.isFinite(maxOpacity) ? maxOpacity : 1;
|
||||
}
|
||||
|
||||
function getHandJoints(hand: any): Array<{ joint: any; name: string }> {
|
||||
|
||||
Reference in New Issue
Block a user