junkerstock

vrz113s

<!DOCTYPE html>
<html>
<head>
<title>VRテスト環境 Ver11.3 quest3のコピーはまだ修正無。ラインとハンドの動きを統一　さらに上下追加および初期配置グリッド化、背景を手動変更</title>
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/MozillaReality/ammo.js@8bbc0ea/builds/ammo.wasm.js"></script>
<script src="./js2/aframe-physics-system.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);
}

//修正ECキー追加
let newY = position.y;
if (this.keys['KeyE']) { newY += data.verticalSpeed * dt; }
if (this.keys['KeyC']) { newY -= data.verticalSpeed * dt; }

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', 'KeyE', 'KeyC'].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;
}

// 掴んだオブジェクトを手にアタッチし、物理演算をkinematicにする
this.el.object3D.attach(this.grabbedEl.object3D);
if (this.grabbedEl.hasAttribute('ammo-body')) {
this.grabbedEl.setAttribute('ammo-body', 'type', 'kinematic');
}
}
},

// ★★★ 修正: ラインモードのロジックと完全に統一 ★★★
onTriggerUp: function () {
if (!this.data.enabled || !this.grabbedEl) return;

// シンプルなリリース処理（コピーでも通常でも同じ）
this.objectContainer.object3D.attach(this.grabbedEl.object3D);
if (this.grabbedEl.hasAttribute('ammo-body')) {
const physicsType = this.grabbedEl.dataset.physicsType || 'dynamic';
if (physicsType === 'static') {
window.alignSingleObject(this.grabbedEl);
}
this.grabbedEl.setAttribute('ammo-body', 'type', physicsType);
}
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;
}
#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-gravity-box-pc { background-color: #8E44AD; }
#create-gravity-sphere-pc { background-color: #D35400; }
#create-grid-box-pc { background-color: #2980B9; }
#create-grid-sphere-pc { background-color: #27AE60; }

.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;
}

#xr-buttons {
position: fixed;
bottom: 21px;
right: 100px;
display: flex;
flex-direction: row;
gap: 10px;
z-index: 1000;
}
#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: 60px;
text-align: center;
}
#xr-buttons button:hover {
background-color: rgba(255, 50, 100, 0.5);
}

.a-dom-overlay:not(.a-no-style) {
top: auto !important;
left: auto !important;
padding: 0em;
}
</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-gravity-box-pc">四角</div>
<div id="create-gravity-sphere-pc">球</div>
<div id="create-grid-box-pc">四角</div>
<div id="create-grid-sphere-pc">球</div>
</div>
</div>
</div>

<div id="xr-buttons">
<button id="ar-button">AR</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"
physics="driver: ammo; debug: false; gravity: -9.8;">

<a-assets>
<img id="skyTexture" src="./pic/h24.png">
<img id="gridTexture" src="https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/grid.png">
</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-gravity-box-vr" class="clickable" width="0.03" height="0.03" depth="0.03" position="-0.09 -0.07 0.01" material="color: #8E44AD; shader: flat"></a-box>
<a-sphere id="create-gravity-sphere-vr" class="clickable" radius="0.015" position="-0.03 -0.07 0.01" material="color: #D35400; shader: flat"></a-sphere>
<a-box id="create-grid-box-vr" class="clickable" width="0.03" height="0.03" depth="0.03" position="0.03 -0.07 0.01" material="color: #2980B9; shader: flat"></a-box>
<a-sphere id="create-grid-sphere-vr" class="clickable" radius="0.015" position="0.09 -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="16" height="16"
material="src: #gridTexture; repeat: 8 8;"
ammo-body="type: static;"
ammo-shape="type: box; halfExtents: 8 0.05 8;"></a-plane>

<a-entity id="object-container"></a-entity>

<a-sky src="#skyTexture"></a-sky>

</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.copyDragData = null;

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 createGravityBoxPC = document.getElementById('create-gravity-box-pc');
const createGravitySpherePC = document.getElementById('create-gravity-sphere-pc');
const createGridBoxPC = document.getElementById('create-grid-box-pc');
const createGridSpherePC = document.getElementById('create-grid-sphere-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, isGravity, color) {

// ★★★ ここから追加 ★★★
const snapSize = 0.1; // グリッドのサイズ（ボックスの幅に合わせる）
const snappedPosition = {
x: Math.round(position.x / snapSize) * snapSize,
y: Math.max(snapSize / 2, 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); // ★ 修正: snappedPosition を使う
box.setAttribute('width', 0.1);
box.setAttribute('height', 0.1);
box.setAttribute('depth', 0.1);
box.setAttribute('color', color || selectedColor);

if (isGravity) {
box.setAttribute('ammo-body', 'type: dynamic; mass: 2;');
box.dataset.physicsType = 'dynamic';
} else {
box.setAttribute('ammo-body', 'type: static;');
box.dataset.physicsType = 'static';
}
box.setAttribute('ammo-shape', 'type: box;');
objectContainer.appendChild(box);
}

function createSphere(position, isGravity, color) {

// ★★★ ここから追加 ★★★
const radius = 0.05;
const snapSize = radius * 2; // グリッドのサイズ（球の直径に合わせる）
const snappedPosition = {
x: Math.round(position.x / snapSize) * snapSize,
y: Math.max(radius, 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); // ★ 修正: snappedPosition を使う
sphere.setAttribute('radius', 0.05);
sphere.setAttribute('color', color || selectedColor);

if (isGravity) {
sphere.setAttribute('ammo-body', 'type: dynamic; mass: 2;');
sphere.dataset.physicsType = 'dynamic';
} else {
sphere.setAttribute('ammo-body', 'type: static;');
sphere.dataset.physicsType = 'static';
}
sphere.setAttribute('ammo-shape', 'type: sphere;');
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;
createGravityBoxPC.style.backgroundColor = newColor;
createGravitySpherePC.style.backgroundColor = newColor;
createGridBoxPC.style.backgroundColor = newColor;
createGridSpherePC.style.backgroundColor = newColor;
document.getElementById('create-gravity-box-vr').setAttribute('material', 'color', newColor);
document.getElementById('create-gravity-sphere-vr').setAttribute('material', 'color', newColor);
document.getElementById('create-grid-box-vr').setAttribute('material', 'color', newColor);
document.getElementById('create-grid-sphere-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) return;

if (window.copyDragData && !window.copyDragData.isVr) {
const data = window.copyDragData;

alignSingleObject(draggedObject);
const finalPosition = draggedObject.object3D.position.clone();
const originalPosition = data.originalPosition;
const isCopyCancelled = finalPosition.distanceTo(originalPosition) < 0.1;

data.originalEl.parentNode.removeChild(data.originalEl);
draggedObject.parentNode.removeChild(draggedObject);

const creatorFn = data.shape === 'box' ? createBox : createSphere;

creatorFn(originalPosition, data.isGravity, data.color);

if (!isCopyCancelled) {
creatorFn(finalPosition, data.isGravity, data.color);
}

window.copyDragData = null;
} else {
const physicsType = draggedObject.dataset.physicsType || 'dynamic';
if (physicsType === 'static') {
alignSingleObject(draggedObject);
}
draggedObject.setAttribute('ammo-body', 'type', physicsType);
}

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) {
window.copyDragData = {
originalEl: intersectedEl,
originalPosition: intersectedEl.object3D.position.clone(),
isGravity: intersectedEl.dataset.physicsType === 'dynamic',
shape: intersectedEl.tagName.toLowerCase() === 'a-box' ? 'box' : 'sphere',
color: intersectedEl.getAttribute('material').color,
isVr: false
};
intersectedEl.removeAttribute('ammo-body');
const dragClone = intersectedEl.cloneNode(true);

dragClone.setAttribute('position', intersectedEl.getAttribute('position'));
objectContainer.appendChild(dragClone);
draggedObject = dragClone;

} else {
draggedObject = intersectedEl;
if (draggedObject.hasAttribute('ammo-body')) {
draggedObject.setAttribute('ammo-body', 'type', 'kinematic');
}
}

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; }

const createActions = {
'create-gravity-box-vr': () => createBox(rightHand.object3D.getWorldPosition(new THREE.Vector3()), true),
'create-gravity-sphere-vr': () => createSphere(rightHand.object3D.getWorldPosition(new THREE.Vector3()), true),
'create-grid-box-vr': () => createBox(rightHand.object3D.getWorldPosition(new THREE.Vector3()), false),
'create-grid-sphere-vr': () => createSphere(rightHand.object3D.getWorldPosition(new THREE.Vector3()), false)
};

if (isGameStarted && createActions[hitEl.id]) {
createActions[hitEl.id]();
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);
if (grabbedObject.hasAttribute('ammo-body')) {
grabbedObject.setAttribute('ammo-body', 'type', 'kinematic');
}
}
}
});

rightHand.addEventListener('triggerup', function () {
if (isLaserGrabMode && grabbedObject) {
objectContainer.object3D.attach(grabbedObject.object3D);
if (grabbedObject.hasAttribute('ammo-body')) {
const physicsType = grabbedObject.dataset.physicsType || 'dynamic';
if (physicsType === 'static') {
alignSingleObject(grabbedObject);
}
grabbedObject.setAttribute('ammo-body', 'type', physicsType);
}
grabbedObject = null;
}
});
}

const createObjectPC = (creatorFn, isGravity) => {
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);
// --- ここから修正 ---
// PCでのオブジェクト生成位置を元に戻す
worldPos.add(direction.multiplyScalar(-0.5));
// --- ここまで修正 ---
creatorFn(worldPos, isGravity);
}
};

createGravityBoxPC.addEventListener('click', () => createObjectPC(createBox, true));
createGravitySpherePC.addEventListener('click', () => createObjectPC(createSphere, true));
createGridBoxPC.addEventListener('click', () => createObjectPC(createBox, false));
createGridSpherePC.addEventListener('click', () => createObjectPC(createSphere, false));

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
ateGravitySpherePC
background
backgroundColor
body
box
camera
cameraDirection
cameraEl
cameraObject
cameraRight
class
closestDistSq
closestEl
color
controls
copyDragData
copyEl
createActions
createBox -------( Function )
createGravityBoxPC
createGridBoxPC
createGridSpherePC
createObjectPC
createSphere -------( Function )
creatorFn
currentVelocity
cursor
data
deltaPosition
depth
desiredVelocity
direction
display
distSq
dragClone
dragDistance
draggedObject
dt
eatedObjectCounter
eftThumbstickInput
el
eraWorldQuaternion
euler
event) { if -------( Function )
evt) { if -------( Function )
ffectiveLerpFactor
finalPosition
geometry
ghtThumbstickInput
grabbableEls
grabbedEl
grabbedObject
groundEl
handleStartReplayClick -------( Function )
handPos
height
hitEl
hue
i
id
innerHTML
intersectedEl
intersectedEls
intersection
isAButtonPressed
isBButtonPressed
isCopyCancelled
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
originalPosition
originalType
paletteContainerPC
paletteContainerVR
PALETTE_COLS
PALETTE_ROWS
pcHud
physics
physicsType
pos
position
radius
raycaster
raycasterComponent
renderer
replayGame -------( Function )
rigEl
rightHand
rotation
rotationDegrees
sceneEl
selectColor -------( Function )
selectedColor
setupGame -------( Function )
shape
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テスト環境 Ver11.3 quest3のコピーはまだ修正無。ラインとハンドの動きを統一　さらに上下追加および初期配置グリッド化、背景を手動変更</title>
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/MozillaReality/ammo.js@8bbc0ea/builds/ammo.wasm.js"></script>
<script src="./js2/aframe-physics-system.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);
        }

//修正ECキー追加
let newY = position.y;
if (this.keys['KeyE']) { newY += data.verticalSpeed * dt; }
if (this.keys['KeyC']) { newY -= data.verticalSpeed * dt; }

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', 'KeyE', 'KeyC'].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;
            }

// 掴んだオブジェクトを手にアタッチし、物理演算をkinematicにする
            this.el.object3D.attach(this.grabbedEl.object3D);
            if (this.grabbedEl.hasAttribute('ammo-body')) {
                this.grabbedEl.setAttribute('ammo-body', 'type', 'kinematic');
            }
        }
    },

// ★★★ 修正: ラインモードのロジックと完全に統一 ★★★
    onTriggerUp: function () {
        if (!this.data.enabled || !this.grabbedEl) return;
        
        // シンプルなリリース処理（コピーでも通常でも同じ）
        this.objectContainer.object3D.attach(this.grabbedEl.object3D);
        if (this.grabbedEl.hasAttribute('ammo-body')) {
            const physicsType = this.grabbedEl.dataset.physicsType || 'dynamic';
            if (physicsType === 'static') {
                window.alignSingleObject(this.grabbedEl);
            }
            this.grabbedEl.setAttribute('ammo-body', 'type', physicsType);
        }
        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;
    }
    #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-gravity-box-pc { background-color: #8E44AD; }
    #create-gravity-sphere-pc { background-color: #D35400; }
    #create-grid-box-pc { background-color: #2980B9; }
    #create-grid-sphere-pc { background-color: #27AE60; }
    
    .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;
    }
    
    #xr-buttons {
        position: fixed;
        bottom: 21px; 
        right: 100px; 
        display: flex;
        flex-direction: row;
        gap: 10px;
        z-index: 1000;
    }
    #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: 60px;
        text-align: center;
    }
    #xr-buttons button:hover {
        background-color: rgba(255, 50, 100, 0.5);
    }

.a-dom-overlay:not(.a-no-style) {
        top: auto !important;
        left: auto !important;
        padding: 0em;
    }
</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-gravity-box-pc">四角</div>
            <div id="create-gravity-sphere-pc">球</div>
            <div id="create-grid-box-pc">四角</div>
            <div id="create-grid-sphere-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"
    physics="driver: ammo; debug: false; gravity: -9.8;">

<a-assets>
    <img id="skyTexture" src="./pic/h24.png">
    <img id="gridTexture" src="https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/grid.png">
</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-gravity-box-vr" class="clickable" width="0.03" height="0.03" depth="0.03" position="-0.09 -0.07 0.01" material="color: #8E44AD; shader: flat"></a-box>
                    <a-sphere id="create-gravity-sphere-vr" class="clickable" radius="0.015" position="-0.03 -0.07 0.01" material="color: #D35400; shader: flat"></a-sphere>
                    <a-box id="create-grid-box-vr" class="clickable" width="0.03" height="0.03" depth="0.03" position="0.03 -0.07 0.01" material="color: #2980B9; shader: flat"></a-box>
                    <a-sphere id="create-grid-sphere-vr" class="clickable" radius="0.015" position="0.09 -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="16" height="16"
         material="src: #gridTexture; repeat: 8 8;"
         ammo-body="type: static;"
         ammo-shape="type: box; halfExtents: 8 0.05 8;"></a-plane>

<a-entity id="object-container"></a-entity>

<a-sky src="#skyTexture"></a-sky>

</a-scene>

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

window.copyDragData = null;

const rightHand = document.getElementById('rightHand');
    const rigEl = document.getElementById('rig');
    const objectContainer = document.getElementById('object-container');
    
    const createGravityBoxPC = document.getElementById('create-gravity-box-pc');
    const createGravitySpherePC = document.getElementById('create-gravity-sphere-pc');
    const createGridBoxPC = document.getElementById('create-grid-box-pc');
    const createGridSpherePC = document.getElementById('create-grid-sphere-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, isGravity, color) {

// ★★★ ここから追加 ★★★
    const snapSize = 0.1; // グリッドのサイズ（ボックスの幅に合わせる）
    const snappedPosition = {
        x: Math.round(position.x / snapSize) * snapSize,
        y: Math.max(snapSize / 2, 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); // ★ 修正: snappedPosition を使う
        box.setAttribute('width', 0.1);
        box.setAttribute('height', 0.1);
        box.setAttribute('depth', 0.1);
        box.setAttribute('color', color || selectedColor);

if (isGravity) {
            box.setAttribute('ammo-body', 'type: dynamic; mass: 2;');
            box.dataset.physicsType = 'dynamic';
        } else {
            box.setAttribute('ammo-body', 'type: static;');
            box.dataset.physicsType = 'static';
        }
        box.setAttribute('ammo-shape', 'type: box;');
        objectContainer.appendChild(box);
    }
    
    function createSphere(position, isGravity, color) {

// ★★★ ここから追加 ★★★
    const radius = 0.05;
    const snapSize = radius * 2; // グリッドのサイズ（球の直径に合わせる）
    const snappedPosition = {
        x: Math.round(position.x / snapSize) * snapSize,
        y: Math.max(radius, 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); // ★ 修正: snappedPosition を使う
        sphere.setAttribute('radius', 0.05);
        sphere.setAttribute('color', color || selectedColor);

if (isGravity) {
            sphere.setAttribute('ammo-body', 'type: dynamic; mass: 2;');
            sphere.dataset.physicsType = 'dynamic';
        } else {
            sphere.setAttribute('ammo-body', 'type: static;');
            sphere.dataset.physicsType = 'static';
        }
        sphere.setAttribute('ammo-shape', 'type: sphere;');
        objectContainer.appendChild(sphere);
    }

function selectColor(newColor) {
        selectedColor = newColor;
        createGravityBoxPC.style.backgroundColor = newColor;
        createGravitySpherePC.style.backgroundColor = newColor;
        createGridBoxPC.style.backgroundColor = newColor;
        createGridSpherePC.style.backgroundColor = newColor;
        document.getElementById('create-gravity-box-vr').setAttribute('material', 'color', newColor);
        document.getElementById('create-gravity-sphere-vr').setAttribute('material', 'color', newColor);
        document.getElementById('create-grid-box-vr').setAttribute('material', 'color', newColor);
        document.getElementById('create-grid-sphere-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) return;

if (window.copyDragData && !window.copyDragData.isVr) {
            const data = window.copyDragData;

alignSingleObject(draggedObject);
            const finalPosition = draggedObject.object3D.position.clone();
            const originalPosition = data.originalPosition;
            const isCopyCancelled = finalPosition.distanceTo(originalPosition) < 0.1;

data.originalEl.parentNode.removeChild(data.originalEl);
            draggedObject.parentNode.removeChild(draggedObject);

const creatorFn = data.shape === 'box' ? createBox : createSphere;
            
            creatorFn(originalPosition, data.isGravity, data.color);

if (!isCopyCancelled) {
                creatorFn(finalPosition, data.isGravity, data.color);
            }

window.copyDragData = null;
        } else {
            const physicsType = draggedObject.dataset.physicsType || 'dynamic';
            if (physicsType === 'static') {
                alignSingleObject(draggedObject);
            }
            draggedObject.setAttribute('ammo-body', 'type', physicsType);
        }

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) {
                    window.copyDragData = {
                        originalEl: intersectedEl,
                        originalPosition: intersectedEl.object3D.position.clone(),
                        isGravity: intersectedEl.dataset.physicsType === 'dynamic',
                        shape: intersectedEl.tagName.toLowerCase() === 'a-box' ? 'box' : 'sphere',
                        color: intersectedEl.getAttribute('material').color,
                        isVr: false
                    };
                    intersectedEl.removeAttribute('ammo-body');
                    const dragClone = intersectedEl.cloneNode(true);
                    
                    dragClone.setAttribute('position', intersectedEl.getAttribute('position'));
                    objectContainer.appendChild(dragClone);
                    draggedObject = dragClone;

} else {
                    draggedObject = intersectedEl;
                    if (draggedObject.hasAttribute('ammo-body')) {
                        draggedObject.setAttribute('ammo-body', 'type', 'kinematic');
                    }
                }
                
                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; }
                
                const createActions = {
                    'create-gravity-box-vr': () => createBox(rightHand.object3D.getWorldPosition(new THREE.Vector3()), true),
                    'create-gravity-sphere-vr': () => createSphere(rightHand.object3D.getWorldPosition(new THREE.Vector3()), true),
                    'create-grid-box-vr': () => createBox(rightHand.object3D.getWorldPosition(new THREE.Vector3()), false),
                    'create-grid-sphere-vr': () => createSphere(rightHand.object3D.getWorldPosition(new THREE.Vector3()), false)
                };

if (isGameStarted && createActions[hitEl.id]) {
                    createActions[hitEl.id]();
                    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);
                        if (grabbedObject.hasAttribute('ammo-body')) {
                            grabbedObject.setAttribute('ammo-body', 'type', 'kinematic');
                        }
                    }
                }
            });

rightHand.addEventListener('triggerup', function () {
                if (isLaserGrabMode && grabbedObject) {
                    objectContainer.object3D.attach(grabbedObject.object3D);
                    if (grabbedObject.hasAttribute('ammo-body')) {
                        const physicsType = grabbedObject.dataset.physicsType || 'dynamic';
                        if (physicsType === 'static') {
                            alignSingleObject(grabbedObject);
                        }
                        grabbedObject.setAttribute('ammo-body', 'type', physicsType);
                    }
                    grabbedObject = null;
                }
            });
        }
        
        const createObjectPC = (creatorFn, isGravity) => {
            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);
                // --- ここから修正 ---
                // PCでのオブジェクト生成位置を元に戻す
                worldPos.add(direction.multiplyScalar(-0.5));
                // --- ここまで修正 ---
                creatorFn(worldPos, isGravity);
            }
        };

createGravityBoxPC.addEventListener('click', () => createObjectPC(createBox, true));
        createGravitySpherePC.addEventListener('click', () => createObjectPC(createSphere, true));
        createGridBoxPC.addEventListener('click', () => createObjectPC(createBox, false));
        createGridSpherePC.addEventListener('click', () => createObjectPC(createSphere, false));
        
        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>