junkerstock

vrz81

<!DOCTYPE html>
<html>
<head>
<title>VRテスト環境 Ver8.1 ARVRボタン修正2</title>
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js"></script>

<script>
// --- Component: Player Controls ---
AFRAME.registerComponent('camera-relative-controls', {
schema: {
targetSpeed: { type: 'number', default: 2 },
acceleration: { type: 'number', default: 3 },
damping: { type: 'number', default: 8 },
brakingDeceleration: { type: 'number', default: 20 },
enabled: { type: 'boolean', default: true },
rotationSpeed: { type: 'number', default: 1.5 },
pitchLimit: { type: 'number', default: 85 },
verticalSpeed: { type: 'number', default: 2 },
groundY: { type: 'number', default: 0 },
ceilingY: { type: 'number', default: 50 },
gravity: { type: 'number', default: 0 }
},
init: function () {
this.keys = {};
this.leftThumbstickInput = { x: 0, y: 0 };
this.rightThumbstickInput = { x: 0, y: 0 };
this.currentVelocity = new THREE.Vector3();
this.ZERO_VECTOR = new THREE.Vector3();
this.cameraDirection = new THREE.Vector3();
this.cameraRight = new THREE.Vector3();
this.moveDirection = new THREE.Vector3();
this.desiredVelocity = new THREE.Vector3();
this.cameraWorldQuaternion = new THREE.Quaternion();
this.rigEl = this.el;
this.cameraEl = this.el.querySelector('[camera]');
this.isReady = false;

if (!this.cameraEl) { console.error('camera-relative-controls: カメラエンティティが見つかりません。'); }

this.el.sceneEl.addEventListener('loaded', () => {
this.leftHand = document.getElementById('leftHand');
if (this.leftHand) { this.leftHand.addEventListener('thumbstickmoved', this.onLeftThumbstickMoved.bind(this)); }
this.rightHand = document.getElementById('rightHand');
if (this.rightHand) { this.rightHand.addEventListener('thumbstickmoved', this.onRightThumbstickMoved.bind(this)); }
});

this.onKeyDown = this.onKeyDown.bind(this);
this.onKeyUp = this.onKeyUp.bind(this);
window.addEventListener('keydown', this.onKeyDown);
window.addEventListener('keyup', this.onKeyUp);
},
remove: function () {
window.removeEventListener('keydown', this.onKeyDown);
window.removeEventListener('keyup', this.onKeyUp);
if (this.leftHand) { try { this.leftHand.removeEventListener('thumbstickmoved', this.onLeftThumbstickMoved.bind(this)); } catch(e){} }
if (this.rightHand) { try { this.rightHand.removeEventListener('thumbstickmoved', this.onRightThumbstickMoved.bind(this)); } catch(e){} }
},
onLeftThumbstickMoved: function (evt) { this.leftThumbstickInput.x = evt.detail.x; this.leftThumbstickInput.y = evt.detail.y; },
onRightThumbstickMoved: function (evt) { this.rightThumbstickInput.x = evt.detail.x; this.rightThumbstickInput.y = evt.detail.y; },
tick: function (time, timeDelta) {
if (!this.data.enabled) return;
if (!this.isReady) {
if (this.cameraEl && this.cameraEl.object3D && this.cameraEl.object3D.matrixWorld) { this.isReady = true; }
else { return; }
}
if (!this.cameraEl || !this.cameraEl.object3D || !this.rigEl || !this.rigEl.object3D) { return; }

const data = this.data;
const dt = timeDelta / 1000;
const position = this.rigEl.object3D.position;

if (this.rigEl.sceneEl.is('vr-mode') || this.rigEl.sceneEl.is('ar-mode')) {
// 左右回転
if (Math.abs(this.rightThumbstickInput.x) > 0.1) {
this.rigEl.object3D.rotation.y += -this.rightThumbstickInput.x * data.rotationSpeed * dt;
}
// 上下移動
if (Math.abs(this.rightThumbstickInput.y) > 0.1) {
const verticalMovement = this.rightThumbstickInput.y * data.verticalSpeed * dt;
this.rigEl.object3D.position.y -= verticalMovement;
}
}

const cameraObject = this.cameraEl.object3D;
cameraObject.getWorldQuaternion(this.cameraWorldQuaternion);
this.cameraDirection.set(0, 0, -1).applyQuaternion(this.cameraWorldQuaternion); this.cameraDirection.normalize();
this.cameraRight.set(1, 0, 0).applyQuaternion(this.cameraWorldQuaternion); this.cameraRight.y = 0; this.cameraRight.normalize();
this.moveDirection.set(0, 0, 0);

if (this.keys['KeyW'] || this.keys['ArrowUp']) { this.moveDirection.add(this.cameraDirection); }
if (this.keys['KeyS'] || this.keys['ArrowDown']) { this.moveDirection.sub(this.cameraDirection); }
if (this.keys['KeyA'] || this.keys['ArrowLeft']) { this.moveDirection.sub(this.cameraRight); }
if (this.keys['KeyD'] || this.keys['ArrowRight']) { this.moveDirection.add(this.cameraRight); }
if (Math.abs(this.leftThumbstickInput.y) > 0.1) { this.moveDirection.add(this.cameraDirection.clone().multiplyScalar(-this.leftThumbstickInput.y)); }
if (Math.abs(this.leftThumbstickInput.x) > 0.1) { this.moveDirection.add(this.cameraRight.clone().multiplyScalar(this.leftThumbstickInput.x)); }

const isInputting = this.moveDirection.lengthSq() > 0.0001;
let lerpFactor = data.damping;
if (isInputting) {
if (this.currentVelocity.dot(this.moveDirection) < -0.1) { this.desiredVelocity.set(0,0,0); lerpFactor = data.brakingDeceleration; }
else { this.desiredVelocity.copy(this.moveDirection).multiplyScalar(data.targetSpeed); lerpFactor = data.acceleration; }
} else { this.desiredVelocity.set(0,0,0); lerpFactor = data.damping; }

const effectiveLerpFactor = 1.0 - Math.exp(-lerpFactor * dt);
this.currentVelocity.lerp(this.desiredVelocity, effectiveLerpFactor);
if (this.currentVelocity.lengthSq() < 0.0001) { this.currentVelocity.set(0,0,0); }

if (this.currentVelocity.lengthSq() > 0) {
const deltaPosition = this.currentVelocity.clone().multiplyScalar(dt);
position.add(deltaPosition);
}

let newY = position.y;
if (position.y > data.groundY && data.gravity > 0) {
newY -= data.gravity * dt;
}
position.y = Math.max(data.groundY, Math.min(newY, data.ceilingY));
},
onKeyDown: function (event) { if (!this.data.enabled) { return; } if (['KeyW', 'ArrowUp', 'KeyS', 'ArrowDown', 'KeyA', 'ArrowLeft', 'KeyD', 'ArrowRight'].includes(event.code)) { this.keys[event.code] = true; } },
onKeyUp: function (event) { if (this.keys[event.code] !== undefined) { delete this.keys[event.code]; } }
});

AFRAME.registerComponent('hand-grab', {
schema: {
enabled: { type: 'boolean', default: false },
grabRadius: { type: 'number', default: 0.1 }
},
init: function () {
this.grabbedEl = null;
this.objectContainer = document.getElementById('object-container');
this.handPos = new THREE.Vector3();
this.objPos = new THREE.Vector3();
this.isAButtonPressed = false;
this.isBButtonPressed = false;

this.onAButtonDown = this.onAButtonDown.bind(this);
this.onAButtonUp = this.onAButtonUp.bind(this);
this.onBButtonDown = this.onBButtonDown.bind(this);
this.onBButtonUp = this.onBButtonUp.bind(this);
this.onTriggerDown = this.onTriggerDown.bind(this);
this.onTriggerUp = this.onTriggerUp.bind(this);
this.el.addEventListener('triggerdown', this.onTriggerDown);
this.el.addEventListener('triggerup', this.onTriggerUp);
this.el.addEventListener('abuttondown', this.onAButtonDown);
this.el.addEventListener('abuttonup', this.onAButtonUp);
this.el.addEventListener('bbuttondown', this.onBButtonDown);
this.el.addEventListener('bbuttonup', this.onBButtonUp);
},
remove: function () {
this.el.removeEventListener('triggerdown', this.onTriggerDown);
this.el.removeEventListener('triggerup', this.onTriggerUp);
this.el.removeEventListener('abuttondown', this.onAButtonDown);
this.el.removeEventListener('abuttonup', this.onAButtonUp);
this.el.removeEventListener('bbuttondown', this.onBButtonDown);
this.el.removeEventListener('bbuttonup', this.onBButtonUp);
},
onAButtonDown: function() {
this.isAButtonPressed = true;
},
onAButtonUp: function() {
this.isAButtonPressed = false;
},
onBButtonDown: function() {
this.isBButtonPressed = true;
},
onBButtonUp: function() {
this.isBButtonPressed = false;
},
onTriggerDown: function () {
if (!this.data.enabled || this.grabbedEl) return;

this.el.object3D.getWorldPosition(this.handPos);
const grabbableEls = this.objectContainer.children;
let closestEl = null;
let closestDistSq = this.data.grabRadius * this.data.grabRadius;

for (let i = 0; i < grabbableEls.length; i++) {
const el = grabbableEls[i];
el.object3D.getWorldPosition(this.objPos);
const distSq = this.handPos.distanceToSquared(this.objPos);
if (distSq < closestDistSq) {
closestDistSq = distSq;
closestEl = el;
}
}

if (closestEl) {
if (this.isBButtonPressed) {
closestEl.parentNode.removeChild(closestEl);
return;
}

if (this.isAButtonPressed) {
const worldPos = new THREE.Vector3();
const worldQuat = new THREE.Quaternion();
closestEl.object3D.getWorldPosition(worldPos);
closestEl.object3D.getWorldQuaternion(worldQuat);

const copyEl = closestEl.cloneNode(true);
const originalType = copyEl.tagName.toLowerCase() === 'a-box' ? 'box' : 'sphere';
copyEl.setAttribute('id', `${originalType}-${window.createdObjectCounter++}`);

this.objectContainer.appendChild(copyEl);

const euler = new THREE.Euler().setFromQuaternion(worldQuat, 'YXZ');
const rotationDegrees = {
x: THREE.MathUtils.radToDeg(euler.x),
y: THREE.MathUtils.radToDeg(euler.y),
z: THREE.MathUtils.radToDeg(euler.z)
};
copyEl.setAttribute('position', worldPos);
copyEl.setAttribute('rotation', rotationDegrees);

this.grabbedEl = closestEl;
} else {
this.grabbedEl = closestEl;
}
this.el.object3D.attach(this.grabbedEl.object3D);
}
},
onTriggerUp: function () {
if (!this.data.enabled || !this.grabbedEl) return;

this.objectContainer.object3D.attach(this.grabbedEl.object3D);
window.alignSingleObject(this.grabbedEl);
this.grabbedEl = null;
}
});
</script>
<style>
#hud-pc {
position: fixed; bottom: 20px; left: 20px; color: white;
background-color: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 10px;
font-family: sans-serif; font-size: 26px; font-weight: bold; z-index: 10; min-width: 300px;
}
#hud-pc > div:not(:last-child) { margin-bottom: 12px; }
.hud-buttons { display: flex; gap: 10px; }
.hud-buttons > div {
flex-grow: 1; cursor: pointer; padding: 10px; text-align: center; border-radius: 5px;
}
#replay-button-pc { background-color: #C0392B; }
#replay-button-pc:hover { background-color: #A93226; }
#create-box-button-pc { background-color: #2980B9; transition: background-color 0.3s; }
#create-sphere-button-pc { background-color: #27AE60; transition: background-color 0.3s; }

.color-palette-pc {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
margin-bottom: 10px;
}
.color-swatch-pc {
width: 100%;
height: 30px;
border-radius: 4px;
cursor: pointer;
border: 2px solid rgba(255, 255, 255, 0.5);
box-sizing: border-box;
}
.color-swatch-pc:hover {
border-color: white;
}

/* --- ここから修正 --- */
/* AR/VRボタンの位置を中央下に、レイアウトを横並びに変更 */
#xr-buttons {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%); /* 中央揃えのための調整 */
z-index: 1000;
display: flex;
flex-direction: row;
gap: 10px;
}
/* ボタンのサイズを小さく、長細くならないように調整 */
#xr-buttons button {
padding: 6px 12px;
font-size: 14px;
border: 2px solid white;
background-color: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
border-radius: 8px;
width: 80px; /* ボタンの幅を固定 */
text-align: center; /* テキストを中央揃え */
}
#xr-buttons button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
/* --- ここまで修正 --- */
</style>
</head>
<body>
<div id="hud-pc">
<div id="hud-main-content-pc">
<div id="color-palette-pc" class="color-palette-pc"></div>
<div class="hud-buttons">
<div id="replay-button-pc" onclick="handleStartReplayClick()">スタート</div>
<div id="create-box-button-pc">四角</div>
<div id="create-sphere-button-pc">球</div>
</div>
</div>
</div>

<div id="xr-buttons">
<button id="ar-button">AR</button>
<button id="vr-button">VR</button>
</div>

<a-scene id="myScene"
vr-mode-ui="enabled: false"
webxr="optionalFeatures: dom-overlay; overlayElement: #xr-buttons;"
background="color: #87CEEB"
renderer="colorManagement: true"
cursor="rayOrigin: mouse">
<a-assets></a-assets>

<a-entity id="rig" position="0 0 5"
camera-relative-controls="targetSpeed: 2; acceleration: 3; verticalSpeed: 2;">
<a-entity id="player" position="0 0 0">
<a-entity id="camera" camera="far: 20000;" look-controls="pointerLockEnabled: false; touchEnabled: false" position="0 1.6 0">
<a-entity id="mouseCursor" cursor="rayOrigin: mouse;" raycaster="objects: .clickable, .grabbable;" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" material="color: black; shader: flat; opacity: 0.7;"></a-entity>
</a-entity>

<a-entity id="leftHand" hand-controls="hand: left;">
<a-entity id="vr-hud" position="0.02 0.04 -0.35" rotation="-60 0 0">
<a-plane id="hud-background" width="0.4" height="0.22" color="#FAFAFA" opacity="0.8" side="double"></a-plane>

<a-entity id="color-palette-vr" position="0 0.04 0.01"></a-entity>

<a-box id="replay-button-vr" class="clickable" position="-0.15 -0.07 0.01"
width="0.07" height="0.03" depth="0.01" material="color: red; shader: flat"></a-box>
<a-entity id="replay-text-vr" troika-text="value: スタート; color: black; fontSize: 0.012; align: center; anchor: center;"
position="-0.15 -0.07 0.016"></a-entity>

<a-box id="create-box-button-vr" class="clickable" width="0.03" height="0.03" depth="0.03" position="-0.05 -0.07 0.01" material="color: #3498DB; shader: flat"></a-box>

<a-sphere id="create-sphere-button-vr" class="clickable" radius="0.015" position="0.05 -0.07 0.01" material="color: #27AE60; shader: flat"></a-sphere>

<a-box id="toggle-grab-mode-vr" class="clickable" position="0.15 -0.07 0.01"
width="0.07" height="0.03" depth="0.01" material="color: yellow; shader: flat"></a-box>
<a-entity id="grab-mode-text-vr" troika-text="value: ライン; color: black; fontSize: 0.012; align: center; anchor: center;"
position="0.15 -0.07 0.016"></a-entity>
</a-entity>
</a-entity>

<a-entity id="rightHand"
hand-controls="hand: right;"
laser-controls="hand: right; model: false;"
raycaster="objects: .clickable, .grabbable; lineColor: white; lineOpacity: 0.75"
hand-grab>
</a-entity>
</a-entity>
</a-entity>

<a-entity light="type: ambient; color: #888"></a-entity>
<a-entity light="type: directional; color: #FFF; intensity: 0.8;" position="-100 200 100"></a-entity>
<a-plane id="ground" position="0 0 0" rotation="-90 0 0" width="500" height="500" color="#7BC8A4"></a-plane>
<a-entity id="object-container"></a-entity>
</a-scene>

<script>
// --- Main Scene Logic ---
document.addEventListener('DOMContentLoaded', function () {
const sceneEl = document.querySelector('a-scene');
let isGameStarted = false;
window.createdObjectCounter = 0;
let grabbedObject = null;
let draggedObject = null;
let dragDistance = 0;
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const worldPosition = new THREE.Vector3();
let isLaserGrabMode = true;
let selectedColor = '#CCCCCC';

let isAButtonPressed = false;
let isShiftKeyPressed = false;
let isCtrlKeyPressed = false;
let isBButtonPressed = false;

window.addEventListener('keydown', function(event) {
if (event.key === 'Shift') { isShiftKeyPressed = true; }
if (event.key === 'Control') { isCtrlKeyPressed = true; }
});
window.addEventListener('keyup', function(event) {
if (event.key === 'Shift') { isShiftKeyPressed = false; }
if (event.key === 'Control') { isCtrlKeyPressed = false; }
});

const rightHand = document.getElementById('rightHand');
const rigEl = document.getElementById('rig');
const objectContainer = document.getElementById('object-container');
const createBoxButtonPC = document.getElementById('create-box-button-pc');
const createSphereButtonPC = document.getElementById('create-sphere-button-pc');

function handleStartReplayClick() {
if (!isGameStarted) {
startGame();
} else {
replayGame();
}
}
window.handleStartReplayClick = handleStartReplayClick;

function startGame() {
if (isGameStarted) return;
isGameStarted = true;
console.log("Game started!");
document.getElementById('replay-button-pc').textContent = 'リプレイ';
document.getElementById('replay-text-vr').setAttribute('troika-text', 'value', 'リプレイ');
replayGame();
}

function replayGame() {
console.log("Replaying game...");
objectContainer.innerHTML = '';
window.createdObjectCounter = 0;
if (rigEl && rigEl.components['camera-relative-controls']) {
rigEl.setAttribute('camera-relative-controls', 'enabled', true);
}
rigEl.setAttribute('position', '0 0 5');
rigEl.setAttribute('rotation', '0 0 0');
}

function createBox(position) {
const snapSize = 0.1;
const snappedPosition = {
x: Math.round(position.x / snapSize) * snapSize,
y: Math.round(position.y / snapSize) * snapSize,
z: Math.round(position.z / snapSize) * snapSize
};

const box = document.createElement('a-box');
box.setAttribute('id', `box-${window.createdObjectCounter++}`);
box.classList.add('grabbable');
box.setAttribute('position', snappedPosition);
box.setAttribute('width', 0.1);
box.setAttribute('height', 0.1);
box.setAttribute('depth', 0.1);
box.setAttribute('color', selectedColor);
objectContainer.appendChild(box);
}

function createSphere(position) {
const snapSize = 0.1;
const snappedPosition = {
x: Math.round(position.x / snapSize) * snapSize,
y: Math.round(position.y / snapSize) * snapSize,
z: Math.round(position.z / snapSize) * snapSize
};

const sphere = document.createElement('a-sphere');
sphere.setAttribute('id', `sphere-${window.createdObjectCounter++}`);
sphere.classList.add('grabbable');
sphere.setAttribute('position', snappedPosition);
sphere.setAttribute('radius', 0.05);
sphere.setAttribute('color', selectedColor);
objectContainer.appendChild(sphere);
}

function alignSingleObject(obj) {
if (!obj) return;
const pos = obj.getAttribute('position');
let snapSize = 1;
if (obj.tagName.toLowerCase() === 'a-box') {
snapSize = obj.getAttribute('width');
} else if (obj.tagName.toLowerCase() === 'a-sphere') {
snapSize = obj.getAttribute('radius') * 2;
}
const newPos = {
x: Math.round(pos.x / snapSize) * snapSize,
y: Math.round(pos.y / snapSize) * snapSize,
z: Math.round(pos.z / snapSize) * snapSize
};
obj.setAttribute('position', newPos);
obj.setAttribute('rotation', '0 0 0');
}
window.alignSingleObject = alignSingleObject;

function toggleGrabMode() {
isLaserGrabMode = !isLaserGrabMode;
console.log("Grab mode toggled. Laser enabled:", isLaserGrabMode);
const lineEl = rightHand.querySelector('[line]');
const modeTextEl = document.getElementById('grab-mode-text-vr');
if (isLaserGrabMode) {
rightHand.setAttribute('laser-controls', 'enabled', true);
rightHand.setAttribute('hand-grab', 'enabled', false);
if (lineEl) lineEl.setAttribute('visible', true);
if (modeTextEl) modeTextEl.setAttribute('troika-text', 'value', 'ライン');
} else {
rightHand.setAttribute('laser-controls', 'enabled', false);
rightHand.setAttribute('hand-grab', 'enabled', true);
if (lineEl) lineEl.setAttribute('visible', false);
if (modeTextEl) modeTextEl.setAttribute('troika-text', 'value', 'ハンド');
}
}

function selectColor(newColor) {
selectedColor = newColor;
createBoxButtonPC.style.backgroundColor = newColor;
createSphereButtonPC.style.backgroundColor = newColor;
document.getElementById('create-box-button-vr').setAttribute('material', 'color', newColor);
document.getElementById('create-sphere-button-vr').setAttribute('material', 'color', newColor);
}

function onMouseMove(event) {
if (!draggedObject) return;
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
const camera = sceneEl.camera;
raycaster.setFromCamera(mouse, camera);
raycaster.ray.at(dragDistance, worldPosition);
draggedObject.object3D.parent.worldToLocal(worldPosition);
draggedObject.object3D.position.copy(worldPosition);
}

function onMouseUp() {
if (draggedObject) {
alignSingleObject(draggedObject);
}
draggedObject = null;
dragDistance = 0;
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
}

function setupGame() {
const paletteContainerPC = document.getElementById('color-palette-pc');
const paletteContainerVR = document.getElementById('color-palette-vr');
const PALETTE_COLS = 5;
const PALETTE_ROWS = 3;

for (let i = 0; i < PALETTE_ROWS * PALETTE_COLS; i++) {
const hue = Math.floor((i / (PALETTE_ROWS * PALETTE_COLS)) * 360);
const color = `hsl(${hue}, 90%, 60%)`;

const swatchPC = document.createElement('div');
swatchPC.classList.add('color-swatch-pc');
swatchPC.style.backgroundColor = color;
swatchPC.addEventListener('click', () => selectColor(color));
paletteContainerPC.appendChild(swatchPC);

const swatchVR = document.createElement('a-box');
swatchVR.classList.add('clickable');
swatchVR.setAttribute('color', color);
swatchVR.setAttribute('width', '0.06');
swatchVR.setAttribute('height', '0.03');
swatchVR.setAttribute('depth', '0.01');
const x = (i % PALETTE_COLS - (PALETTE_COLS - 1) / 2) * 0.08;
const y = (Math.floor(i / PALETTE_COLS) - (PALETTE_ROWS - 1) / 2) * -0.05;
swatchVR.setAttribute('position', `${x} ${y} 0`);
swatchVR.dataset.color = color;
paletteContainerVR.appendChild(swatchVR);
}
selectColor(selectedColor);

sceneEl.addEventListener('mousedown', function(evt) {
if (sceneEl.is('vr-mode') || !isGameStarted) return;
const intersectedEl = evt.detail.intersectedEl;
if (intersectedEl && intersectedEl.classList.contains('color-swatch-pc')) {
selectColor(intersectedEl.style.backgroundColor);
return;
}
if (intersectedEl && intersectedEl.classList.contains('grabbable')) {
if (isCtrlKeyPressed) {
intersectedEl.parentNode.removeChild(intersectedEl);
return;
}

if (isShiftKeyPressed) {
const worldPos = new THREE.Vector3();
const worldQuat = new THREE.Quaternion();
intersectedEl.object3D.getWorldPosition(worldPos);
intersectedEl.object3D.getWorldQuaternion(worldQuat);

const copyEl = intersectedEl.cloneNode(true);
const originalType = copyEl.tagName.toLowerCase() === 'a-box' ? 'box' : 'sphere';
copyEl.setAttribute('id', `${originalType}-${window.createdObjectCounter++}`);

objectContainer.appendChild(copyEl);

const euler = new THREE.Euler().setFromQuaternion(worldQuat, 'YXZ');
const rotationDegrees = {
x: THREE.MathUtils.radToDeg(euler.x),
y: THREE.MathUtils.radToDeg(euler.y),
z: THREE.MathUtils.radToDeg(euler.z)
};
copyEl.setAttribute('position', worldPos);
copyEl.setAttribute('rotation', rotationDegrees);

draggedObject = intersectedEl;
} else {
draggedObject = intersectedEl;
}

const intersection = evt.detail.intersection;
if (!intersection) return;
dragDistance = intersection.distance;
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('mouseup', onMouseUp);
}
});

if (rightHand) {
rightHand.addEventListener('abuttondown', function() { isAButtonPressed = true; });
rightHand.addEventListener('abuttonup', function() { isAButtonPressed = false; });
rightHand.addEventListener('bbuttondown', function() { isBButtonPressed = true; });
rightHand.addEventListener('bbuttonup', function() { isBButtonPressed = false; });

rightHand.addEventListener('triggerdown', function () {
const raycasterComponent = rightHand.components.raycaster;
if (!raycasterComponent) return;
const intersectedEls = raycasterComponent.intersectedEls;
if (intersectedEls.length === 0) return;

const hitEl = intersectedEls[0];

if (isBButtonPressed && hitEl.classList.contains('grabbable')) {
hitEl.parentNode.removeChild(hitEl);
return;
}

if (hitEl.dataset.color) { selectColor(hitEl.dataset.color); return; }
if (hitEl.id === 'replay-button-vr') { handleStartReplayClick(); return; }
if (hitEl.id === 'toggle-grab-mode-vr') { toggleGrabMode(); return; }
if (hitEl.id === 'create-box-button-vr' || hitEl.id === 'create-sphere-button-vr') {
if (isGameStarted) {
const controllerPos = new THREE.Vector3();
rightHand.object3D.getWorldPosition(controllerPos);
if (hitEl.id === 'create-box-button-vr') createBox(controllerPos);
else createSphere(controllerPos);
}
return;
}

if (isLaserGrabMode && isGameStarted) {
if (hitEl.classList.contains('grabbable') && !grabbedObject) {
if (isAButtonPressed) {
const worldPos = new THREE.Vector3();
const worldQuat = new THREE.Quaternion();
hitEl.object3D.getWorldPosition(worldPos);
hitEl.object3D.getWorldQuaternion(worldQuat);

const copyEl = hitEl.cloneNode(true);
const originalType = copyEl.tagName.toLowerCase() === 'a-box' ? 'box' : 'sphere';
copyEl.setAttribute('id', `${originalType}-${window.createdObjectCounter++}`);

objectContainer.appendChild(copyEl);

const euler = new THREE.Euler().setFromQuaternion(worldQuat, 'YXZ');
const rotationDegrees = {
x: THREE.MathUtils.radToDeg(euler.x),
y: THREE.MathUtils.radToDeg(euler.y),
z: THREE.MathUtils.radToDeg(euler.z)
};
copyEl.setAttribute('position', worldPos);
copyEl.setAttribute('rotation', rotationDegrees);

grabbedObject = hitEl;
} else {
grabbedObject = hitEl;
}
rightHand.object3D.attach(grabbedObject.object3D);
}
}
});

rightHand.addEventListener('triggerup', function () {
if (isLaserGrabMode && grabbedObject) {
objectContainer.object3D.attach(grabbedObject.object3D);
alignSingleObject(grabbedObject);
grabbedObject = null;
}
});
}

createBoxButtonPC.addEventListener('click', () => {
if (isGameStarted) {
const camera = document.getElementById('camera');
const worldPos = new THREE.Vector3();
const direction = new THREE.Vector3();
camera.object3D.getWorldPosition(worldPos);
camera.object3D.getWorldDirection(direction);
worldPos.add(direction.multiplyScalar(-0.5));
createBox(worldPos);
}
});

createSphereButtonPC.addEventListener('click', () => {
if (isGameStarted) {
const camera = document.getElementById('camera');
const worldPos = new THREE.Vector3();
const direction = new THREE.Vector3();
camera.object3D.getWorldPosition(worldPos);
camera.object3D.getWorldDirection(direction);
worldPos.add(direction.multiplyScalar(-0.5));
createSphere(worldPos);
}
});

const pcHud = document.getElementById('hud-pc');
const groundEl = document.getElementById('ground');
const arButton = document.getElementById('ar-button');
const vrButton = document.getElementById('vr-button');
const xrButtons = document.getElementById('xr-buttons');

if (arButton) {
arButton.addEventListener('click', async () => {
pcHud.style.display = 'none';
xrButtons.style.display = 'none';
sceneEl.setAttribute('background', 'transparent', true);
if(groundEl) groundEl.setAttribute('visible', false);
try {
await sceneEl.enterAR();
} catch (e) {
console.error("ARモードへの移行に失敗しました", e);
pcHud.style.display = 'block';
xrButtons.style.display = 'flex';
sceneEl.setAttribute('background', 'color', '#87CEEB');
if(groundEl) groundEl.setAttribute('visible', true);
}
});
}

if (vrButton) {
vrButton.addEventListener('click', async () => {
pcHud.style.display = 'none';
xrButtons.style.display = 'none';
sceneEl.setAttribute('background', 'color', '#87CEEB');
if(groundEl) groundEl.setAttribute('visible', true);
try {
await sceneEl.enterVR();
} catch (e) {
console.error("VRモードへの移行に失敗しました", e);
pcHud.style.display = 'block';
xrButtons.style.display = 'flex';
}
});
}

sceneEl.addEventListener('exit-vr', () => {
pcHud.style.display = 'block';
xrButtons.style.display = 'flex';
sceneEl.setAttribute('background', 'color', '#87CEEB');
if(groundEl) groundEl.setAttribute('visible', true);
});
}

if (sceneEl.hasLoaded) { setupGame(); } else { sceneEl.addEventListener('loaded', setupGame, {once: true}); }
});
</script>
</body>
</html>

使用変数

-------( Function )
) { isAButtonPressed = false; }); rightHand.addEventListener -------( Function )
) { isAButtonPressed = true; }); rightHand.addEventListener -------( Function )
) { isBButtonPressed = false; }); rightHand.addEventListener -------( Function )
) { isBButtonPressed = true; }); rightHand.addEventListener -------( Function )
) { this.isAButtonPressed = true; }, onAButtonUp: function -------( Function )
) { this.isBButtonPressed = true; }, onBButtonUp: function -------( Function )
alignSingleObject -------( Function )
alignSingleObject
arButton
background
backgroundColor
box
camera
cameraDirection
cameraEl
cameraObject
cameraRight
class
closestDistSq
closestEl
color
controllerPos
controls
copyEl
createBox -------( Function )
createBoxButtonPC
createSphere -------( Function )
currentVelocity
cursor
data
deltaPosition
depth
desiredVelocity
direction
display
distSq
dragDistance
draggedObject
dt
eatedObjectCounter
eateSphereButtonPC
eftThumbstickInput
el
eraWorldQuaternion
euler
event) { if -------( Function )
evt) { if -------( Function )
ffectiveLerpFactor
geometry
ghtThumbstickInput
grabbableEls
grabbedEl
grabbedObject
groundEl
handleStartReplayClick -------( Function )
handPos
height
hitEl
hue
i
id
innerHTML
intersectedEl
intersectedEls
intersection
isAButtonPressed
isBButtonPressed
isCtrlKeyPressed
isGameStarted
isInputting
isLaserGrabMode
isReady
isShiftKeyPressed
key
keys
leftHand
length
lerpFactor
leStartReplayClick
light
lineEl
material
modeTextEl
mouse
moveDirection
newPos
newY
objectContainer
objPos
onAButtonDown
onAButtonUp
onBButtonDown
onBButtonUp
onclick
onKeyDown
onKeyUp
onMouseMove -------( Function )
onMouseUp -------( Function )
onTriggerDown
onTriggerUp
opacity
originalType
paletteContainerPC
paletteContainerVR
PALETTE_COLS
PALETTE_ROWS
pcHud
pos
position
radius
raycaster
raycasterComponent
renderer
replayGame -------( Function )
rigEl
rightHand
rotation
rotationDegrees
sceneEl
selectColor -------( Function )
selectedColor
setupGame -------( Function )
side
snappedPosition
snapSize
sphere
src
startGame -------( Function )
swatchPC
swatchVR
text
textContent
toggleGrabMode -------( Function )
ui
verticalMovement
vrButton
webxr
width
worldPos
worldPosition
worldQuat
x
xrButtons
y
ZERO_VECTOR

<!DOCTYPE html>
<html>
<head>
<title>VRテスト環境 Ver8.1 ARVRボタン修正2</title>
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
<script src="https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js"></script>

if (!this.cameraEl) { console.error('camera-relative-controls: カメラエンティティが見つかりません。'); }

this.el.sceneEl.addEventListener('loaded', () => {
            this.leftHand = document.getElementById('leftHand');
            if (this.leftHand) { this.leftHand.addEventListener('thumbstickmoved', this.onLeftThumbstickMoved.bind(this)); }
            this.rightHand = document.getElementById('rightHand');
            if (this.rightHand) { this.rightHand.addEventListener('thumbstickmoved', this.onRightThumbstickMoved.bind(this)); }
        });

this.onKeyDown = this.onKeyDown.bind(this);
        this.onKeyUp = this.onKeyUp.bind(this);
        window.addEventListener('keydown', this.onKeyDown);
        window.addEventListener('keyup', this.onKeyUp);
    },
    remove: function () {
        window.removeEventListener('keydown', this.onKeyDown);
        window.removeEventListener('keyup', this.onKeyUp);
        if (this.leftHand) { try { this.leftHand.removeEventListener('thumbstickmoved', this.onLeftThumbstickMoved.bind(this)); } catch(e){} }
        if (this.rightHand) { try { this.rightHand.removeEventListener('thumbstickmoved', this.onRightThumbstickMoved.bind(this)); } catch(e){} }
    },
    onLeftThumbstickMoved: function (evt) { this.leftThumbstickInput.x = evt.detail.x; this.leftThumbstickInput.y = evt.detail.y; },
    onRightThumbstickMoved: function (evt) { this.rightThumbstickInput.x = evt.detail.x; this.rightThumbstickInput.y = evt.detail.y; },
    tick: function (time, timeDelta) {
        if (!this.data.enabled) return;
        if (!this.isReady) {
            if (this.cameraEl && this.cameraEl.object3D && this.cameraEl.object3D.matrixWorld) { this.isReady = true; }
            else { return; }
        }
        if (!this.cameraEl || !this.cameraEl.object3D || !this.rigEl || !this.rigEl.object3D) { return; }

const data = this.data;
        const dt = timeDelta / 1000;
        const position = this.rigEl.object3D.position;

if (this.rigEl.sceneEl.is('vr-mode') || this.rigEl.sceneEl.is('ar-mode')) {
            // 左右回転
            if (Math.abs(this.rightThumbstickInput.x) > 0.1) {
                this.rigEl.object3D.rotation.y += -this.rightThumbstickInput.x * data.rotationSpeed * dt;
            }
            // 上下移動
            if (Math.abs(this.rightThumbstickInput.y) > 0.1) {
                const verticalMovement = this.rightThumbstickInput.y * data.verticalSpeed * dt;
                this.rigEl.object3D.position.y -= verticalMovement;
            }
        }

const cameraObject = this.cameraEl.object3D;
        cameraObject.getWorldQuaternion(this.cameraWorldQuaternion);
        this.cameraDirection.set(0, 0, -1).applyQuaternion(this.cameraWorldQuaternion); this.cameraDirection.normalize();
        this.cameraRight.set(1, 0, 0).applyQuaternion(this.cameraWorldQuaternion); this.cameraRight.y = 0; this.cameraRight.normalize();
        this.moveDirection.set(0, 0, 0);

if (this.keys['KeyW'] || this.keys['ArrowUp']) { this.moveDirection.add(this.cameraDirection); }
        if (this.keys['KeyS'] || this.keys['ArrowDown']) { this.moveDirection.sub(this.cameraDirection); }
        if (this.keys['KeyA'] || this.keys['ArrowLeft']) { this.moveDirection.sub(this.cameraRight); }
        if (this.keys['KeyD'] || this.keys['ArrowRight']) { this.moveDirection.add(this.cameraRight); }
        if (Math.abs(this.leftThumbstickInput.y) > 0.1) { this.moveDirection.add(this.cameraDirection.clone().multiplyScalar(-this.leftThumbstickInput.y)); }
        if (Math.abs(this.leftThumbstickInput.x) > 0.1) { this.moveDirection.add(this.cameraRight.clone().multiplyScalar(this.leftThumbstickInput.x)); }

const effectiveLerpFactor = 1.0 - Math.exp(-lerpFactor * dt);
        this.currentVelocity.lerp(this.desiredVelocity, effectiveLerpFactor);
        if (this.currentVelocity.lengthSq() < 0.0001) { this.currentVelocity.set(0,0,0); }

if (this.currentVelocity.lengthSq() > 0) {
            const deltaPosition = this.currentVelocity.clone().multiplyScalar(dt);
            position.add(deltaPosition);
        }

AFRAME.registerComponent('hand-grab', {
    schema: {
        enabled: { type: 'boolean', default: false },
        grabRadius: { type: 'number', default: 0.1 }
    },
    init: function () {
        this.grabbedEl = null;
        this.objectContainer = document.getElementById('object-container');
        this.handPos = new THREE.Vector3();
        this.objPos = new THREE.Vector3();
        this.isAButtonPressed = false;
        this.isBButtonPressed = false;

this.onAButtonDown = this.onAButtonDown.bind(this);
        this.onAButtonUp = this.onAButtonUp.bind(this);
        this.onBButtonDown = this.onBButtonDown.bind(this);
        this.onBButtonUp = this.onBButtonUp.bind(this);
        this.onTriggerDown = this.onTriggerDown.bind(this);
        this.onTriggerUp = this.onTriggerUp.bind(this);
        this.el.addEventListener('triggerdown', this.onTriggerDown);
        this.el.addEventListener('triggerup', this.onTriggerUp);
        this.el.addEventListener('abuttondown', this.onAButtonDown);
        this.el.addEventListener('abuttonup', this.onAButtonUp);
        this.el.addEventListener('bbuttondown', this.onBButtonDown);
        this.el.addEventListener('bbuttonup', this.onBButtonUp);
    },
    remove: function () {
        this.el.removeEventListener('triggerdown', this.onTriggerDown);
        this.el.removeEventListener('triggerup', this.onTriggerUp);
        this.el.removeEventListener('abuttondown', this.onAButtonDown);
        this.el.removeEventListener('abuttonup', this.onAButtonUp);
        this.el.removeEventListener('bbuttondown', this.onBButtonDown);
        this.el.removeEventListener('bbuttonup', this.onBButtonUp);
    },
    onAButtonDown: function() {
        this.isAButtonPressed = true;
    },
    onAButtonUp: function() {
        this.isAButtonPressed = false;
    },
    onBButtonDown: function() {
        this.isBButtonPressed = true;
    },
    onBButtonUp: function() {
        this.isBButtonPressed = false;
    },
    onTriggerDown: function () {
        if (!this.data.enabled || this.grabbedEl) return;

this.el.object3D.getWorldPosition(this.handPos);
        const grabbableEls = this.objectContainer.children;
        let closestEl = null;
        let closestDistSq = this.data.grabRadius * this.data.grabRadius;

for (let i = 0; i < grabbableEls.length; i++) {
            const el = grabbableEls[i];
            el.object3D.getWorldPosition(this.objPos);
            const distSq = this.handPos.distanceToSquared(this.objPos);
            if (distSq < closestDistSq) {
                closestDistSq = distSq;
                closestEl = el;
            }
        }

if (closestEl) {
            if (this.isBButtonPressed) {
                closestEl.parentNode.removeChild(closestEl);
                return;
            }

if (this.isAButtonPressed) {
                const worldPos = new THREE.Vector3();
                const worldQuat = new THREE.Quaternion();
                closestEl.object3D.getWorldPosition(worldPos);
                closestEl.object3D.getWorldQuaternion(worldQuat);
                
                const copyEl = closestEl.cloneNode(true);
                const originalType = copyEl.tagName.toLowerCase() === 'a-box' ? 'box' : 'sphere';
                copyEl.setAttribute('id', `${originalType}-${window.createdObjectCounter++}`);
                
                this.objectContainer.appendChild(copyEl);

this.grabbedEl = closestEl;
            } else {
                this.grabbedEl = closestEl;
            }
            this.el.object3D.attach(this.grabbedEl.object3D);
        }
    },
    onTriggerUp: function () {
        if (!this.data.enabled || !this.grabbedEl) return;
        
        this.objectContainer.object3D.attach(this.grabbedEl.object3D);
        window.alignSingleObject(this.grabbedEl);
        this.grabbedEl = null;
    }
});
</script>
<style>
    #hud-pc {
        position: fixed; bottom: 20px; left: 20px; color: white;
        background-color: rgba(0, 0, 0, 0.4); padding: 20px; border-radius: 10px;
        font-family: sans-serif; font-size: 26px; font-weight: bold; z-index: 10; min-width: 300px;
    }
    #hud-pc > div:not(:last-child) { margin-bottom: 12px; }
    .hud-buttons { display: flex; gap: 10px; }
    .hud-buttons > div {
        flex-grow: 1; cursor: pointer; padding: 10px; text-align: center; border-radius: 5px;
    }
    #replay-button-pc { background-color: #C0392B; }
    #replay-button-pc:hover { background-color: #A93226; }
    #create-box-button-pc { background-color: #2980B9; transition: background-color 0.3s; }
    #create-sphere-button-pc { background-color: #27AE60; transition: background-color 0.3s; }
    
    .color-palette-pc {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        margin-bottom: 10px;
    }
    .color-swatch-pc {
        width: 100%;
        height: 30px;
        border-radius: 4px;
        cursor: pointer;
        border: 2px solid rgba(255, 255, 255, 0.5);
        box-sizing: border-box;
    }
    .color-swatch-pc:hover {
        border-color: white;
    }
    
    /* --- ここから修正 --- */
    /* AR/VRボタンの位置を中央下に、レイアウトを横並びに変更 */
    #xr-buttons {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%); /* 中央揃えのための調整 */
        z-index: 1000;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    /* ボタンのサイズを小さく、長細くならないように調整 */
    #xr-buttons button {
        padding: 6px 12px;
        font-size: 14px;
        border: 2px solid white;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        cursor: pointer;
        border-radius: 8px;
        width: 80px; /* ボタンの幅を固定 */
        text-align: center; /* テキストを中央揃え */
    }
    #xr-buttons button:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }
    /* --- ここまで修正 --- */
</style>
</head>
<body>
<div id="hud-pc">
    <div id="hud-main-content-pc">
        <div id="color-palette-pc" class="color-palette-pc"></div>
        <div class="hud-buttons">
            <div id="replay-button-pc" onclick="handleStartReplayClick()">スタート</div>
            <div id="create-box-button-pc">四角</div>
            <div id="create-sphere-button-pc">球</div>
        </div>
    </div>
</div>

<a-scene id="myScene" 
    vr-mode-ui="enabled: false" 
    webxr="optionalFeatures: dom-overlay; overlayElement: #xr-buttons;"
    background="color: #87CEEB"
    renderer="colorManagement: true"
    cursor="rayOrigin: mouse">
    <a-assets></a-assets>

<a-entity id="rig" position="0 0 5" 
        camera-relative-controls="targetSpeed: 2; acceleration: 3; verticalSpeed: 2;">
        <a-entity id="player" position="0 0 0">
            <a-entity id="camera" camera="far: 20000;" look-controls="pointerLockEnabled: false; touchEnabled: false" position="0 1.6 0">
                <a-entity id="mouseCursor" cursor="rayOrigin: mouse;" raycaster="objects: .clickable, .grabbable;" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" material="color: black; shader: flat; opacity: 0.7;"></a-entity>
            </a-entity>
            
            <a-entity id="leftHand" hand-controls="hand: left;">
                <a-entity id="vr-hud" position="0.02 0.04 -0.35" rotation="-60 0 0">
                    <a-plane id="hud-background" width="0.4" height="0.22" color="#FAFAFA" opacity="0.8" side="double"></a-plane>
                    
                    <a-entity id="color-palette-vr" position="0 0.04 0.01"></a-entity>

<a-box id="replay-button-vr" class="clickable" position="-0.15 -0.07 0.01"
                           width="0.07" height="0.03" depth="0.01" material="color: red; shader: flat"></a-box>
                    <a-entity id="replay-text-vr" troika-text="value: スタート; color: black; fontSize: 0.012; align: center; anchor: center;"
                              position="-0.15 -0.07 0.016"></a-entity>
                    
                    <a-box id="create-box-button-vr" class="clickable" width="0.03" height="0.03" depth="0.03" position="-0.05 -0.07 0.01" material="color: #3498DB; shader: flat"></a-box>

<a-sphere id="create-sphere-button-vr" class="clickable" radius="0.015" position="0.05 -0.07 0.01" material="color: #27AE60; shader: flat"></a-sphere>

<a-box id="toggle-grab-mode-vr" class="clickable" position="0.15 -0.07 0.01"
                           width="0.07" height="0.03" depth="0.01" material="color: yellow; shader: flat"></a-box>
                    <a-entity id="grab-mode-text-vr" troika-text="value: ライン; color: black; fontSize: 0.012; align: center; anchor: center;"
                              position="0.15 -0.07 0.016"></a-entity>
                </a-entity>
            </a-entity>
            
            <a-entity id="rightHand"
                      hand-controls="hand: right;"
                      laser-controls="hand: right; model: false;"
                      raycaster="objects: .clickable, .grabbable; lineColor: white; lineOpacity: 0.75"
                      hand-grab>
            </a-entity>
        </a-entity>
    </a-entity>

<a-entity light="type: ambient; color: #888"></a-entity>
    <a-entity light="type: directional; color: #FFF; intensity: 0.8;" position="-100 200 100"></a-entity>
    <a-plane id="ground" position="0 0 0" rotation="-90 0 0" width="500" height="500" color="#7BC8A4"></a-plane>
    <a-entity id="object-container"></a-entity>
</a-scene>

let isAButtonPressed = false;
    let isShiftKeyPressed = false;
    let isCtrlKeyPressed = false;
    let isBButtonPressed = false;

const rightHand = document.getElementById('rightHand');
    const rigEl = document.getElementById('rig');
    const objectContainer = document.getElementById('object-container');
    const createBoxButtonPC = document.getElementById('create-box-button-pc');
    const createSphereButtonPC = document.getElementById('create-sphere-button-pc');

function startGame() {
        if (isGameStarted) return;
        isGameStarted = true;
        console.log("Game started!");
        document.getElementById('replay-button-pc').textContent = 'リプレイ';
        document.getElementById('replay-text-vr').setAttribute('troika-text', 'value', 'リプレイ');
        replayGame();
    }

function replayGame() {
        console.log("Replaying game...");
        objectContainer.innerHTML = '';
        window.createdObjectCounter = 0;
        if (rigEl && rigEl.components['camera-relative-controls']) {
            rigEl.setAttribute('camera-relative-controls', 'enabled', true);
        }
        rigEl.setAttribute('position', '0 0 5');
        rigEl.setAttribute('rotation', '0 0 0');
    }

function createBox(position) {
        const snapSize = 0.1;
        const snappedPosition = {
            x: Math.round(position.x / snapSize) * snapSize,
            y: Math.round(position.y / snapSize) * snapSize,
            z: Math.round(position.z / snapSize) * snapSize
        };

const sphere = document.createElement('a-sphere');
        sphere.setAttribute('id', `sphere-${window.createdObjectCounter++}`);
        sphere.classList.add('grabbable');
        sphere.setAttribute('position', snappedPosition);
        sphere.setAttribute('radius', 0.05);
        sphere.setAttribute('color', selectedColor);
        objectContainer.appendChild(sphere);
    }

function selectColor(newColor) {
        selectedColor = newColor;
        createBoxButtonPC.style.backgroundColor = newColor;
        createSphereButtonPC.style.backgroundColor = newColor;
        document.getElementById('create-box-button-vr').setAttribute('material', 'color', newColor);
        document.getElementById('create-sphere-button-vr').setAttribute('material', 'color', newColor);
    }

function onMouseMove(event) {
        if (!draggedObject) return;
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
        const camera = sceneEl.camera;
        raycaster.setFromCamera(mouse, camera);
        raycaster.ray.at(dragDistance, worldPosition);
        draggedObject.object3D.parent.worldToLocal(worldPosition);
        draggedObject.object3D.position.copy(worldPosition);
    }

function onMouseUp() {
        if (draggedObject) {
            alignSingleObject(draggedObject);
        }
        draggedObject = null;
        dragDistance = 0;
        window.removeEventListener('mousemove', onMouseMove);
        window.removeEventListener('mouseup', onMouseUp);
    }

sceneEl.addEventListener('mousedown', function(evt) {
            if (sceneEl.is('vr-mode') || !isGameStarted) return;
            const intersectedEl = evt.detail.intersectedEl;
            if (intersectedEl && intersectedEl.classList.contains('color-swatch-pc')) {
                selectColor(intersectedEl.style.backgroundColor);
                return;
            }
            if (intersectedEl && intersectedEl.classList.contains('grabbable')) {
                if (isCtrlKeyPressed) {
                    intersectedEl.parentNode.removeChild(intersectedEl);
                    return;
                }

if (isShiftKeyPressed) {
                    const worldPos = new THREE.Vector3();
                    const worldQuat = new THREE.Quaternion();
                    intersectedEl.object3D.getWorldPosition(worldPos);
                    intersectedEl.object3D.getWorldQuaternion(worldQuat);

const copyEl = intersectedEl.cloneNode(true);
                    const originalType = copyEl.tagName.toLowerCase() === 'a-box' ? 'box' : 'sphere';
                    copyEl.setAttribute('id', `${originalType}-${window.createdObjectCounter++}`);
                    
                    objectContainer.appendChild(copyEl);

const euler = new THREE.Euler().setFromQuaternion(worldQuat, 'YXZ');
                    const rotationDegrees = {
                        x: THREE.MathUtils.radToDeg(euler.x),
                        y: THREE.MathUtils.radToDeg(euler.y),
                        z: THREE.MathUtils.radToDeg(euler.z)
                    };
                    copyEl.setAttribute('position', worldPos);
                    copyEl.setAttribute('rotation', rotationDegrees);
                    
                    draggedObject = intersectedEl;
                } else {
                    draggedObject = intersectedEl;
                }

const intersection = evt.detail.intersection;
                if (!intersection) return;
                dragDistance = intersection.distance;
                window.addEventListener('mousemove', onMouseMove);
                window.addEventListener('mouseup', onMouseUp);
            }
        });

if (rightHand) {
            rightHand.addEventListener('abuttondown', function() { isAButtonPressed = true; });
            rightHand.addEventListener('abuttonup', function() { isAButtonPressed = false; });
            rightHand.addEventListener('bbuttondown', function() { isBButtonPressed = true; });
            rightHand.addEventListener('bbuttonup', function() { isBButtonPressed = false; });

rightHand.addEventListener('triggerdown', function () {
                const raycasterComponent = rightHand.components.raycaster;
                if (!raycasterComponent) return;
                const intersectedEls = raycasterComponent.intersectedEls;
                if (intersectedEls.length === 0) return;
                
                const hitEl = intersectedEls[0];
                
                if (isBButtonPressed && hitEl.classList.contains('grabbable')) {
                    hitEl.parentNode.removeChild(hitEl);
                    return;
                }

if (hitEl.dataset.color) { selectColor(hitEl.dataset.color); return; }
                if (hitEl.id === 'replay-button-vr') { handleStartReplayClick(); return; }
                if (hitEl.id === 'toggle-grab-mode-vr') { toggleGrabMode(); return; }
                if (hitEl.id === 'create-box-button-vr' || hitEl.id === 'create-sphere-button-vr') {
                    if (isGameStarted) {
                        const controllerPos = new THREE.Vector3();
                        rightHand.object3D.getWorldPosition(controllerPos);
                        if (hitEl.id === 'create-box-button-vr') createBox(controllerPos);
                        else createSphere(controllerPos);
                    }
                    return;
                }

if (isLaserGrabMode && isGameStarted) {
                    if (hitEl.classList.contains('grabbable') && !grabbedObject) {
                        if (isAButtonPressed) {
                            const worldPos = new THREE.Vector3();
                            const worldQuat = new THREE.Quaternion();
                            hitEl.object3D.getWorldPosition(worldPos);
                            hitEl.object3D.getWorldQuaternion(worldQuat);
                            
                            const copyEl = hitEl.cloneNode(true);
                            const originalType = copyEl.tagName.toLowerCase() === 'a-box' ? 'box' : 'sphere';
                            copyEl.setAttribute('id', `${originalType}-${window.createdObjectCounter++}`);
                            
                            objectContainer.appendChild(copyEl);

const euler = new THREE.Euler().setFromQuaternion(worldQuat, 'YXZ');
                            const rotationDegrees = {
                                x: THREE.MathUtils.radToDeg(euler.x),
                                y: THREE.MathUtils.radToDeg(euler.y),
                                z: THREE.MathUtils.radToDeg(euler.z)
                            };
                            copyEl.setAttribute('position', worldPos);
                            copyEl.setAttribute('rotation', rotationDegrees);

grabbedObject = hitEl;
                        } else {
                            grabbedObject = hitEl;
                        }
                        rightHand.object3D.attach(grabbedObject.object3D);
                    }
                }
            });

rightHand.addEventListener('triggerup', function () {
                if (isLaserGrabMode && grabbedObject) {
                    objectContainer.object3D.attach(grabbedObject.object3D);
                    alignSingleObject(grabbedObject);
                    grabbedObject = null;
                }
            });
        }
        
        createBoxButtonPC.addEventListener('click', () => {
             if (isGameStarted) {
                 const camera = document.getElementById('camera');
                 const worldPos = new THREE.Vector3();
                 const direction = new THREE.Vector3();
                 camera.object3D.getWorldPosition(worldPos);
                 camera.object3D.getWorldDirection(direction);
                 worldPos.add(direction.multiplyScalar(-0.5));
                 createBox(worldPos);
             }
        });

createSphereButtonPC.addEventListener('click', () => {
             if (isGameStarted) {
                 const camera = document.getElementById('camera');
                 const worldPos = new THREE.Vector3();
                 const direction = new THREE.Vector3();
                 camera.object3D.getWorldPosition(worldPos);
                 camera.object3D.getWorldDirection(direction);
                 worldPos.add(direction.multiplyScalar(-0.5));
                 createSphere(worldPos);
             }
        });
        
        const pcHud = document.getElementById('hud-pc');
        const groundEl = document.getElementById('ground');
        const arButton = document.getElementById('ar-button');
        const vrButton = document.getElementById('vr-button');
        const xrButtons = document.getElementById('xr-buttons');

if (arButton) {
            arButton.addEventListener('click', async () => {
                pcHud.style.display = 'none';
                xrButtons.style.display = 'none';
                sceneEl.setAttribute('background', 'transparent', true);
                if(groundEl) groundEl.setAttribute('visible', false);
                try {
                    await sceneEl.enterAR();
                } catch (e) {
                    console.error("ARモードへの移行に失敗しました", e);
                    pcHud.style.display = 'block';
                    xrButtons.style.display = 'flex';
                    sceneEl.setAttribute('background', 'color', '#87CEEB');
                    if(groundEl) groundEl.setAttribute('visible', true);
                }
            });
        }

if (vrButton) {
            vrButton.addEventListener('click', async () => {
                pcHud.style.display = 'none';
                xrButtons.style.display = 'none';
                sceneEl.setAttribute('background', 'color', '#87CEEB');
                if(groundEl) groundEl.setAttribute('visible', true);
                try {
                    await sceneEl.enterVR();
                } catch (e) {
                    console.error("VRモードへの移行に失敗しました", e);
                    pcHud.style.display = 'block';
                    xrButtons.style.display = 'flex';
                }
            });
        }

sceneEl.addEventListener('exit-vr', () => {
            pcHud.style.display = 'block';
            xrButtons.style.display = 'flex';
            sceneEl.setAttribute('background', 'color', '#87CEEB');
            if(groundEl) groundEl.setAttribute('visible', true);
        });
    }
    
    if (sceneEl.hasLoaded) { setupGame(); } else { sceneEl.addEventListener('loaded', setupGame, {once: true}); }
});
</script>
</body>
</html>