moji
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Text with A-Frame</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
// カスタムコンポーネント：ホバー時に長文を表示
AFRAME.registerComponent('hover-text', {
init: function () {
const el = this.el;
// イベントリスナーの設定
el.addEventListener('mouseenter', function () {
// 長文を表示
document.querySelector('#long-text').setAttribute('visible', true);
});
el.addEventListener('mouseleave', function () {
// 長文を非表示
document.querySelector('#long-text').setAttribute('visible', false);
});
}
});
</script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene>
<!-- 背景を設定 -->
<a-plane color="#ECECEC" width="10" height="10" position="0 0 -5"></a-plane>
<!-- カメラ設定 -->
<a-camera position="0 1.6 3">
<!-- カーソルの設定 -->
<a-cursor color="#FF0000" position="0 0 -2"></a-cursor>
</a-camera>
<!-- 浮かんでいるテキスト -->
<a-text value="Hover over me!" position="0 1 -3" hover-text color="#000"></a-text>
<!-- 初めは非表示の長文 -->
<a-text id="long-text" value="This is a longer piece of text that appears when you hover over the floating text." position="0 -1 -3" visible="false" color="#000"></a-text>
</a-scene>
</body>
</html>
使用変数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Text with A-Frame</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
// カスタムコンポーネント：ホバー時に長文を表示
AFRAME.registerComponent('hover-text', {
init: function () {
const el = this.el;
// イベントリスナーの設定
el.addEventListener('mouseenter', function () {
// 長文を表示
document.querySelector('#long-text').setAttribute('visible', true);
});
el.addEventListener('mouseleave', function () {
// 長文を非表示
document.querySelector('#long-text').setAttribute('visible', false);
});
}
});
</script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene>
<!-- 背景を設定 -->
<a-plane color="#ECECEC" width="10" height="10" position="0 0 -5"></a-plane>
<!-- カメラ設定 -->
<a-camera position="0 1.6 3">
<!-- カーソルの設定 -->
<a-cursor color="#FF0000" position="0 0 -2"></a-cursor>
</a-camera>
<!-- 浮かんでいるテキスト -->
<a-text value="Hover over me!" position="0 1 -3" hover-text color="#000"></a-text>
<!-- 初めは非表示の長文 -->
<a-text id="long-text" value="This is a longer piece of text that appears when you hover over the floating text." position="0 -1 -3" visible="false" color="#000"></a-text>
</a-scene>
</body>
</html>
使用変数
| -------( Function ) | |
| charset | |
| color | |
| content | |
| el | |
| height | |
| id | |
| lang | |
| name | |
| position | |
| scale | |
| src | |
| style | |
| value | |
| visible | |
| width |