test2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Click Rotation (JavaScript)</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene id="scene">
<!-- 立方体 -->
<a-box position="0 1 -3" color="#4CC3D9" id="myBox"></a-box>
<!-- 地面 -->
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="lightgreen"></a-plane>
<!-- 背景 -->
<a-sky color="#ECECEC"></a-sky>
<!-- カメラ -->
<a-camera position="0 1.6 0" look-controls></a-camera>
</a-scene>
<script>
// A-Frameシーンと立方体の取得
const scene = document.getElementById('scene');
const box = document.getElementById('myBox');
let isRotating = false;
// クリックイベントの追加
scene.addEventListener('click', function (event) {
// �}ウスの座標を正規化
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// レイキャスターの作成
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, scene.camera);
// クリックした位置に立方体があるか確認
const intersects = raycaster.intersectObjects([box.object3D]);
// 立方体がクリックされたら回転アニメーションをトグル
if (intersects.length > 0) {
isRotating = !isRotating;
if (isRotating) {
// 回転アニメーションを追加
box.setAttribute('animation', {
property: 'rotation',
to: '0 360 0',
loop: true,
dur: 1000,
easing: 'linear'
});
} else {
// アニメーションを停止
box.removeAttribute('animation');
}
}
});
</script>
</body>
</html>
使用変数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Click Rotation (JavaScript)</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene id="scene">
<!-- 立方体 -->
<a-box position="0 1 -3" color="#4CC3D9" id="myBox"></a-box>
<!-- 地面 -->
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="lightgreen"></a-plane>
<!-- 背景 -->
<a-sky color="#ECECEC"></a-sky>
<!-- カメラ -->
<a-camera position="0 1.6 0" look-controls></a-camera>
</a-scene>
<script>
// A-Frameシーンと立方体の取得
const scene = document.getElementById('scene');
const box = document.getElementById('myBox');
let isRotating = false;
// クリックイベントの追加
scene.addEventListener('click', function (event) {
// �}ウスの座標を正規化
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// レイキャスターの作成
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, scene.camera);
// クリックした位置に立方体があるか確認
const intersects = raycaster.intersectObjects([box.object3D]);
// 立方体がクリックされたら回転アニメーションをトグル
if (intersects.length > 0) {
isRotating = !isRotating;
if (isRotating) {
// 回転アニメーションを追加
box.setAttribute('animation', {
property: 'rotation',
to: '0 360 0',
loop: true,
dur: 1000,
easing: 'linear'
});
} else {
// アニメーションを停止
box.removeAttribute('animation');
}
}
});
</script>
</body>
</html>
使用変数
| -------( Function ) | |
| box | |
| charset | |
| color | |
| height | |
| id | |
| intersects | |
| isRotating | |
| mouse | |
| position | |
| raycaster | |
| rotation | |
| scene | |
| src | |
| width | |
| x | |
| y |