aframe-co-t1
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
</head>
<body style="background-color: black;">
<a-scene background="color: black">
<!-- カメラとコントローラー -->
<a-entity camera position="0 1.6 0">
<a-entity
id="leftController"
laser-controls="hand: left"
raycaster="objects: .clickable"></a-entity>
</a-entity>
<!-- 立方体 -->
<a-box
class="clickable"
position="0 1 -3"
color="blue"></a-box>
<!-- クリック後に表示されるテキストウィンドウ -->
<a-entity id="textWindow" position="0 1 -2" visible="false">
<a-plane width="1.5" height="1" color="black">
<a-text value="こんにちは！" position="0 0 0.1" align="center"></a-text>
</a-plane>
</a-entity>
<script>
const cube = document.querySelector('.clickable');
const textWindow = document.getElementById('textWindow');
// コントローラーによるクリック
cube.addEventListener('click', () => {
textWindow.setAttribute('visible', true);
});
// �}ウスクリック対応（PC用）
cube.addEventListener('mouseenter', () => {
cube.setAttribute('color', 'red'); // ホバー時に色変更
});
cube.addEventListener('mouseleave', () => {
cube.setAttribute('color', 'blue'); // 元の色に戻す
});
cube.addEventListener('mousedown', () => {
textWindow.setAttribute('visible', true);
});
</script>
</a-scene>
</body>
</html>
使用変数
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
</head>
<body style="background-color: black;">
<a-scene background="color: black">
<!-- カメラとコントローラー -->
<a-entity camera position="0 1.6 0">
<a-entity
id="leftController"
laser-controls="hand: left"
raycaster="objects: .clickable"></a-entity>
</a-entity>
<!-- 立方体 -->
<a-box
class="clickable"
position="0 1 -3"
color="blue"></a-box>
<!-- クリック後に表示されるテキストウィンドウ -->
<a-entity id="textWindow" position="0 1 -2" visible="false">
<a-plane width="1.5" height="1" color="black">
<a-text value="こんにちは！" position="0 0 0.1" align="center"></a-text>
</a-plane>
</a-entity>
<script>
const cube = document.querySelector('.clickable');
const textWindow = document.getElementById('textWindow');
// コントローラーによるクリック
cube.addEventListener('click', () => {
textWindow.setAttribute('visible', true);
});
// �}ウスクリック対応（PC用）
cube.addEventListener('mouseenter', () => {
cube.setAttribute('color', 'red'); // ホバー時に色変更
});
cube.addEventListener('mouseleave', () => {
cube.setAttribute('color', 'blue'); // 元の色に戻す
});
cube.addEventListener('mousedown', () => {
textWindow.setAttribute('visible', true);
});
</script>
</a-scene>
</body>
</html>
使用変数
| align | |
| background | |
| class | |
| color | |
| controls | |
| cube | |
| height | |
| id | |
| position | |
| raycaster | |
| src | |
| style | |
| textWindow | |
| value | |
| visible | |
| width |