vr-test3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A-Frame Cube Rotation Example (Timed and Converging)</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- 4x4 の立方体（上と横に並べる） -->
<a-entity id="cubes" position="0 1.5 -5">
<!-- 16個の明るくカラフルな立方体を4x4のグリッドで並べる -->
<!-- 横方向と上方向に配置 -->
<a-box position="0 0 0" color="#FF5733" class="cube"></a-box>
<a-box position="2 0 0" color="#FFBD33" class="cube"></a-box>
<a-box position="4 0 0" color="#33FF57" class="cube"></a-box>
<a-box position="6 0 0" color="#33B5FF" class="cube"></a-box>
<a-box position="0 2 0" color="#8E44AD" class="cube"></a-box>
<a-box position="2 2 0" color="#E74C3C" class="cube"></a-box>
<a-box position="4 2 0" color="#F39C12" class="cube"></a-box>
<a-box position="6 2 0" color="#1ABC9C" class="cube"></a-box>
<a-box position="0 4 0" color="#9B59B6" class="cube"></a-box>
<a-box position="2 4 0" color="#16A085" class="cube"></a-box>
<a-box position="4 4 0" color="#F1C40F" class="cube"></a-box>
<a-box position="6 4 0" color="#D35400" class="cube"></a-box>
<a-box position="0 6 0" color="#2980B9" class="cube"></a-box>
<a-box position="2 6 0" color="#27AE60" class="cube"></a-box>
<a-box position="4 6 0" color="#34495E" class="cube"></a-box>
<a-box position="6 6 0" color="#F5B041" class="cube"></a-box>
</a-entity>
<!-- 自分のカーソル（棒） -->
<a-camera>
<a-cursor color="black" raycaster="objects:.cube" fuse="false"></a-cursor>
</a-camera>
<!-- より強い照明 -->
<a-light type="directional" position="2 4 -3" intensity="1.5"></a-light>
<a-light type="ambient" position="0 5 0" intensity="0.7"></a-light>
</a-scene>
<script>
// 立方体が接触したときに回転する処理
document.querySelectorAll('.cube').forEach((cube, index) => {
cube.addEventListener('mouseenter', function () {
// �}ウスが立方体に触れたとき、時間差で回転を開始
setTimeout(() => {
cube.setAttribute('animation', {
property: 'rotation',
to: '360 360 360',
dur: 1000,
easing: 'easeInOutQuad',
loop: true // 回転を繰り返す設定
});
}, index * 300); // 各立方体に300msの遅延を追加
// しばらく経つと収束して回転が止まるようにする
setTimeout(() => {
cube.setAttribute('animation', {
property: 'rotation',
to: '0 0 0',
dur: 1500,
easing: 'easeInOutQuad',
loop: false // 停止
});
}, (index * 300) + 4000); // 各立方体に遅延後、4秒後に収束（停止）
});
});
</script>
</body>
</html>
使用変数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A-Frame Cube Rotation Example (Timed and Converging)</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- 4x4 の立方体（上と横に並べる） -->
<a-entity id="cubes" position="0 1.5 -5">
<!-- 16個の明るくカラフルな立方体を4x4のグリッドで並べる -->
<!-- 横方向と上方向に配置 -->
<a-box position="0 0 0" color="#FF5733" class="cube"></a-box>
<a-box position="2 0 0" color="#FFBD33" class="cube"></a-box>
<a-box position="4 0 0" color="#33FF57" class="cube"></a-box>
<a-box position="6 0 0" color="#33B5FF" class="cube"></a-box>
<a-box position="0 2 0" color="#8E44AD" class="cube"></a-box>
<a-box position="2 2 0" color="#E74C3C" class="cube"></a-box>
<a-box position="4 2 0" color="#F39C12" class="cube"></a-box>
<a-box position="6 2 0" color="#1ABC9C" class="cube"></a-box>
<a-box position="0 4 0" color="#9B59B6" class="cube"></a-box>
<a-box position="2 4 0" color="#16A085" class="cube"></a-box>
<a-box position="4 4 0" color="#F1C40F" class="cube"></a-box>
<a-box position="6 4 0" color="#D35400" class="cube"></a-box>
<a-box position="0 6 0" color="#2980B9" class="cube"></a-box>
<a-box position="2 6 0" color="#27AE60" class="cube"></a-box>
<a-box position="4 6 0" color="#34495E" class="cube"></a-box>
<a-box position="6 6 0" color="#F5B041" class="cube"></a-box>
</a-entity>
<!-- 自分のカーソル（棒） -->
<a-camera>
<a-cursor color="black" raycaster="objects:.cube" fuse="false"></a-cursor>
</a-camera>
<!-- より強い照明 -->
<a-light type="directional" position="2 4 -3" intensity="1.5"></a-light>
<a-light type="ambient" position="0 5 0" intensity="0.7"></a-light>
</a-scene>
<script>
// 立方体が接触したときに回転する処理
document.querySelectorAll('.cube').forEach((cube, index) => {
cube.addEventListener('mouseenter', function () {
// �}ウスが立方体に触れたとき、時間差で回転を開始
setTimeout(() => {
cube.setAttribute('animation', {
property: 'rotation',
to: '360 360 360',
dur: 1000,
easing: 'easeInOutQuad',
loop: true // 回転を繰り返す設定
});
}, index * 300); // 各立方体に300msの遅延を追加
// しばらく経つと収束して回転が止まるようにする
setTimeout(() => {
cube.setAttribute('animation', {
property: 'rotation',
to: '0 0 0',
dur: 1500,
easing: 'easeInOutQuad',
loop: false // 停止
});
}, (index * 300) + 4000); // 各立方体に遅延後、4秒後に収束（停止）
});
});
</script>
</body>
</html>
使用変数
| -------( Function ) | |
| charset | |
| class | |
| color | |
| content | |
| fuse | |
| id | |
| intensity | |
| lang | |
| name | |
| position | |
| raycaster | |
| scale | |
| src | |
| type | |
| width |