a-farme-球に文字test11
<!DOCTYPE html>
<html>
<head>
<title>A-Frame - Troika Text 日�{語表示 (エラー対策強化版)</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>
// --- カスタムコンポーネント定義 (tick内の準備完了チェックを強化) ---
AFRAME.registerComponent('camera-relative-controls', {
schema: { speed: { type: 'number', default: 3 }, enabled: { type: 'boolean', default: true } },
init: function () {
this.keys = {};
this.velocity = new THREE.Vector3();
this.direction = new THREE.Vector3();
this.cameraWorldQuaternion = new THREE.Quaternion();
this.rightDirection = new THREE.Vector3();
this.cameraEl = this.el.querySelector('[camera]'); // 先に取得試行
this.isReady = false; // ★★★ 準備完了フラグを追加 ★★★
if (!this.cameraEl) { console.error('camera-relative-controls requires a child entity with the [camera] component.'); }
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); },
tick: function (time, timeDelta) {
if (!this.data.enabled) return;
// ▼▼▼ 準備完了チェック ▼▼▼
if (!this.isReady) {
// cameraEl と object3D と matrixWorld が存在するか確認
if (this.cameraEl && this.cameraEl.object3D && this.cameraEl.object3D.matrixWorld) {
this.isReady = true; // 準備OKとする
} else {
// もし init で cameraEl が見つからなかった場合に再試行 (念のため)
if (!this.cameraEl) {
this.cameraEl = this.el.querySelector('[camera]');
}
return; // まだ準備できていないので tick 処理を中断
}
}
// ▲▲▲ 準備完了チェック ▲▲▲
// --- 準備完了後の処理 (元のtick処理) ---
// 念のためここでもチェック (より安全に)
if (!this.cameraEl || !this.cameraEl.object3D) { return; }
const el = this.el;
const data = this.data;
const position = el.object3D.position;
const dt = timeDelta / 1000;
// この呼び出しが安全になっているはず
this.cameraEl.object3D.getWorldQuaternion(this.cameraWorldQuaternion);
this.direction.set(0, 0, -1);
this.direction.applyQuaternion(this.cameraWorldQuaternion);
if (this.direction.lengthSq() > 0.0001) this.direction.normalize();
this.rightDirection.set(1, 0, 0);
this.rightDirection.applyQuaternion(this.cameraWorldQuaternion);
this.rightDirection.y = 0;
if (this.rightDirection.lengthSq() > 0.0001) this.rightDirection.normalize();
this.velocity.set(0, 0, 0);
if (this.keys['KeyW'] || this.keys['ArrowUp']) { this.velocity.add(this.direction); }
if (this.keys['KeyS'] || this.keys['ArrowDown']) { this.velocity.sub(this.direction); }
if (this.keys['KeyA'] || this.keys['ArrowLeft']) { this.velocity.sub(this.rightDirection); }
if (this.keys['KeyD'] || this.keys['ArrowRight']) { this.velocity.add(this.rightDirection); }
if (this.velocity.lengthSq() > 0.0001) {
this.velocity.normalize().multiplyScalar(data.speed * dt);
position.add(this.velocity);
}
},
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]; } }
});
// --- ここまでカスタムコンポーネント定義 ---
</script>
</head>
<body>
<a-scene id="myScene" background="color: #ECECEC">
<a-entity id="rig" position="0 0 5" camera-relative-controls="speed: 3">
<a-entity id="camera" camera look-controls position="0 1.6 0">
<a-entity cursor="rayOrigin: mouse; fuse: false;" raycaster="objects:.clickableSphere; far: 15;" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" material="color: black; shader: flat; opacity: 0.7"> <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation> </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="-1 1.5 1"></a-entity>
<a-entity id="infoPanel" visible="false" position="0 -1000 0" look-at="[camera]">
<a-plane id="panelBackground" width="2.5" height="1.2" color="#333" opacity="0.9" side="double"></a-plane>
<a-entity id="panelText"
troika-text="value: Placeholder; color: white; fontSize: 0.08; maxWidth: 2.3; align: left; anchorX: center; anchorY: middle; baseline: middle;"
position="0 0 0.05">
</a-entity>
</a-entity>
<script>
const sceneEl = document.getElementById('myScene');
const infoPanelEl = document.getElementById('infoPanel');
const panelTextEl = document.getElementById('panelText');
const cameraEl = document.getElementById('camera');
const numSpheres = 30;
const spread = 20;
const targetWorldPosition = new THREE.Vector3();
const cameraWorldPosition = new THREE.Vector3();
const direction = new THREE.Vector3();
const panelPosition = new THREE.Vector3();
for (let i = 0; i < numSpheres; i++) {
const sphereEl = document.createElement('a-sphere');
const radius = Math.random() * 0.4 + 0.2;
const x = (Math.random() - 0.5) * spread;
const y = Math.random() * (spread / 2) + radius;
const z = (Math.random() - 0.5) * spread;
const color = `hsl(${Math.random() * 360}, 70%, 60%)`;
sphereEl.setAttribute('radius', radius);
sphereEl.setAttribute('color', color);
sphereEl.setAttribute('position', { x: x, y: y, z: z });
sphereEl.classList.add('clickableSphere');
sphereEl.setAttribute('data-info', `球 ${i + 1}\n色: ${color}\n半径: ${radius.toFixed(2)}`);
sphereEl.addEventListener('click', handleSphereClick);
sceneEl.appendChild(sphereEl);
}
function handleSphereClick(event) {
const clickedSphere = event.target;
const sphereInfo = clickedSphere.dataset.info;
clickedSphere.object3D.getWorldPosition(targetWorldPosition);
cameraEl.object3D.getWorldPosition(cameraWorldPosition);
const sphereRadius = clickedSphere.getAttribute('geometry').radius;
const offsetDistance = sphereRadius + 0.5;
direction.subVectors(cameraWorldPosition, targetWorldPosition).normalize();
panelPosition.copy(targetWorldPosition).addScaledVector(direction, offsetDistance);
infoPanelEl.object3D.position.copy(panelPosition);
panelTextEl.setAttribute('troika-text', 'value', sphereInfo); // troika-text を更新
infoPanelEl.setAttribute('visible', true);
}
</script>
</a-scene>
</body>
</html>
使用変数
<!DOCTYPE html>
<html>
<head>
<title>A-Frame - Troika Text 日�{語表示 (エラー対策強化版)</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>
// --- カスタムコンポーネント定義 (tick内の準備完了チェックを強化) ---
AFRAME.registerComponent('camera-relative-controls', {
schema: { speed: { type: 'number', default: 3 }, enabled: { type: 'boolean', default: true } },
init: function () {
this.keys = {};
this.velocity = new THREE.Vector3();
this.direction = new THREE.Vector3();
this.cameraWorldQuaternion = new THREE.Quaternion();
this.rightDirection = new THREE.Vector3();
this.cameraEl = this.el.querySelector('[camera]'); // 先に取得試行
this.isReady = false; // ★★★ 準備完了フラグを追加 ★★★
if (!this.cameraEl) { console.error('camera-relative-controls requires a child entity with the [camera] component.'); }
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); },
tick: function (time, timeDelta) {
if (!this.data.enabled) return;
// ▼▼▼ 準備完了チェック ▼▼▼
if (!this.isReady) {
// cameraEl と object3D と matrixWorld が存在するか確認
if (this.cameraEl && this.cameraEl.object3D && this.cameraEl.object3D.matrixWorld) {
this.isReady = true; // 準備OKとする
} else {
// もし init で cameraEl が見つからなかった場合に再試行 (念のため)
if (!this.cameraEl) {
this.cameraEl = this.el.querySelector('[camera]');
}
return; // まだ準備できていないので tick 処理を中断
}
}
// ▲▲▲ 準備完了チェック ▲▲▲
// --- 準備完了後の処理 (元のtick処理) ---
// 念のためここでもチェック (より安全に)
if (!this.cameraEl || !this.cameraEl.object3D) { return; }
const el = this.el;
const data = this.data;
const position = el.object3D.position;
const dt = timeDelta / 1000;
// この呼び出しが安全になっているはず
this.cameraEl.object3D.getWorldQuaternion(this.cameraWorldQuaternion);
this.direction.set(0, 0, -1);
this.direction.applyQuaternion(this.cameraWorldQuaternion);
if (this.direction.lengthSq() > 0.0001) this.direction.normalize();
this.rightDirection.set(1, 0, 0);
this.rightDirection.applyQuaternion(this.cameraWorldQuaternion);
this.rightDirection.y = 0;
if (this.rightDirection.lengthSq() > 0.0001) this.rightDirection.normalize();
this.velocity.set(0, 0, 0);
if (this.keys['KeyW'] || this.keys['ArrowUp']) { this.velocity.add(this.direction); }
if (this.keys['KeyS'] || this.keys['ArrowDown']) { this.velocity.sub(this.direction); }
if (this.keys['KeyA'] || this.keys['ArrowLeft']) { this.velocity.sub(this.rightDirection); }
if (this.keys['KeyD'] || this.keys['ArrowRight']) { this.velocity.add(this.rightDirection); }
if (this.velocity.lengthSq() > 0.0001) {
this.velocity.normalize().multiplyScalar(data.speed * dt);
position.add(this.velocity);
}
},
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]; } }
});
// --- ここまでカスタムコンポーネント定義 ---
</script>
</head>
<body>
<a-scene id="myScene" background="color: #ECECEC">
<a-entity id="rig" position="0 0 5" camera-relative-controls="speed: 3">
<a-entity id="camera" camera look-controls position="0 1.6 0">
<a-entity cursor="rayOrigin: mouse; fuse: false;" raycaster="objects:.clickableSphere; far: 15;" position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" material="color: black; shader: flat; opacity: 0.7"> <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation> </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="-1 1.5 1"></a-entity>
<a-entity id="infoPanel" visible="false" position="0 -1000 0" look-at="[camera]">
<a-plane id="panelBackground" width="2.5" height="1.2" color="#333" opacity="0.9" side="double"></a-plane>
<a-entity id="panelText"
troika-text="value: Placeholder; color: white; fontSize: 0.08; maxWidth: 2.3; align: left; anchorX: center; anchorY: middle; baseline: middle;"
position="0 0 0.05">
</a-entity>
</a-entity>
<script>
const sceneEl = document.getElementById('myScene');
const infoPanelEl = document.getElementById('infoPanel');
const panelTextEl = document.getElementById('panelText');
const cameraEl = document.getElementById('camera');
const numSpheres = 30;
const spread = 20;
const targetWorldPosition = new THREE.Vector3();
const cameraWorldPosition = new THREE.Vector3();
const direction = new THREE.Vector3();
const panelPosition = new THREE.Vector3();
for (let i = 0; i < numSpheres; i++) {
const sphereEl = document.createElement('a-sphere');
const radius = Math.random() * 0.4 + 0.2;
const x = (Math.random() - 0.5) * spread;
const y = Math.random() * (spread / 2) + radius;
const z = (Math.random() - 0.5) * spread;
const color = `hsl(${Math.random() * 360}, 70%, 60%)`;
sphereEl.setAttribute('radius', radius);
sphereEl.setAttribute('color', color);
sphereEl.setAttribute('position', { x: x, y: y, z: z });
sphereEl.classList.add('clickableSphere');
sphereEl.setAttribute('data-info', `球 ${i + 1}\n色: ${color}\n半径: ${radius.toFixed(2)}`);
sphereEl.addEventListener('click', handleSphereClick);
sceneEl.appendChild(sphereEl);
}
function handleSphereClick(event) {
const clickedSphere = event.target;
const sphereInfo = clickedSphere.dataset.info;
clickedSphere.object3D.getWorldPosition(targetWorldPosition);
cameraEl.object3D.getWorldPosition(cameraWorldPosition);
const sphereRadius = clickedSphere.getAttribute('geometry').radius;
const offsetDistance = sphereRadius + 0.5;
direction.subVectors(cameraWorldPosition, targetWorldPosition).normalize();
panelPosition.copy(targetWorldPosition).addScaledVector(direction, offsetDistance);
infoPanelEl.object3D.position.copy(panelPosition);
panelTextEl.setAttribute('troika-text', 'value', sphereInfo); // troika-text を更新
infoPanelEl.setAttribute('visible', true);
}
</script>
</a-scene>
</body>
</html>
使用変数
| -------( Function ) | |
| ameraWorldPosition | |
| argetWorldPosition | |
| at | |
| attribute | |
| background | |
| begin | |
| cameraEl | |
| clickedSphere | |
| color | |
| controls | |
| cursor | |
| data | |
| direction | |
| dt | |
| dur | |
| easing | |
| el | |
| eraWorldQuaternion | |
| fill | |
| from | |
| geometry | |
| handleSphereClick -------( Function ) | |
| height | |
| i | |
| id | |
| infoPanelEl | |
| isReady | |
| keys | |
| light | |
| material | |
| numSpheres | |
| offsetDistance | |
| onKeyDown | |
| onKeyUp | |
| opacity | |
| panelPosition | |
| panelTextEl | |
| position | |
| radius | |
| raycaster | |
| rightDirection | |
| sceneEl | |
| side | |
| sphereEl | |
| sphereInfo | |
| sphereRadius | |
| spread | |
| src | |
| text | |
| to | |
| velocity | |
| visible | |
| width | |
| x | |
| y | |
| z |