vr-test2
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width">
<title>A-Frame</title>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/aframe-gradient-sky@1.0.4/dist/gradientsky.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body>
<a-scene>
<!-- 1つ目の立方体 -->
<a-box position="-2 3.5 -2" rotation="30 30 0" color="skyblue"
event-set__enter="_event: mouseenter; material.color: yellowgreen; scale: 3 1 1"
event-set__leave="_event: mouseleave; material.color: skyblue; scale: 1 1 1">
<a-animation attribute="rotation" begin="click" dur="500" fill="backwards" to="30 30 360"></a-animation>
<a-text id="cube1-text" value="Cube 1" position="0 1.5 0" align="center" visible="false"></a-text>
</a-box>
<!-- 2つ目の立方体 -->
<a-box position="0 3.5 -2" rotation="30 30 0" color="skyblue"
event-set__enter="_event: mouseenter; material.color: yellowgreen; scale: 3 1 1"
event-set__leave="_event: mouseleave; material.color: skyblue; scale: 1 1 1">
<a-animation attribute="rotation" begin="click" dur="500" fill="backwards" to="30 30 360"></a-animation>
<a-text id="cube2-text" value="Cube 2" position="0 1.5 0" align="center" visible="false"></a-text>
</a-box>
<!-- 3つ目の立方体 -->
<a-box position="2 3.5 -2" rotation="30 30 0" color="skyblue"
event-set__enter="_event: mouseenter; material.color: yellowgreen; scale: 3 1 1"
event-set__leave="_event: mouseleave; material.color: skyblue; scale: 1 1 1">
<a-animation attribute="rotation" begin="click" dur="500" fill="backwards" to="30 30 360"></a-animation>
<a-text id="cube3-text" value="Cube 3" position="0 1.5 0" align="center" visible="false"></a-text>
</a-box>
<a-sky color="pink"></a-sky>
<!-- カメラの動きのためのコンポーネント -->
<a-entity position="0 1.8 4">
<a-entity camera look-controls="pointerLockEnabled: true" wasd-controls="enabled: true" mouse-cursor>
<a-cursor fuse="true" color="yellow"></a-cursor>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>
使用変数
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width">
<title>A-Frame</title>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component@3.2.1/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="https://unpkg.com/aframe-extras.ocean@%5E3.5.x/dist/aframe-extras.ocean.min.js"></script>
<script src="https://unpkg.com/aframe-gradient-sky@1.0.4/dist/gradientsky.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body>
<a-scene>
<!-- 1つ目の立方体 -->
<a-box position="-2 3.5 -2" rotation="30 30 0" color="skyblue"
event-set__enter="_event: mouseenter; material.color: yellowgreen; scale: 3 1 1"
event-set__leave="_event: mouseleave; material.color: skyblue; scale: 1 1 1">
<a-animation attribute="rotation" begin="click" dur="500" fill="backwards" to="30 30 360"></a-animation>
<a-text id="cube1-text" value="Cube 1" position="0 1.5 0" align="center" visible="false"></a-text>
</a-box>
<!-- 2つ目の立方体 -->
<a-box position="0 3.5 -2" rotation="30 30 0" color="skyblue"
event-set__enter="_event: mouseenter; material.color: yellowgreen; scale: 3 1 1"
event-set__leave="_event: mouseleave; material.color: skyblue; scale: 1 1 1">
<a-animation attribute="rotation" begin="click" dur="500" fill="backwards" to="30 30 360"></a-animation>
<a-text id="cube2-text" value="Cube 2" position="0 1.5 0" align="center" visible="false"></a-text>
</a-box>
<!-- 3つ目の立方体 -->
<a-box position="2 3.5 -2" rotation="30 30 0" color="skyblue"
event-set__enter="_event: mouseenter; material.color: yellowgreen; scale: 3 1 1"
event-set__leave="_event: mouseleave; material.color: skyblue; scale: 1 1 1">
<a-animation attribute="rotation" begin="click" dur="500" fill="backwards" to="30 30 360"></a-animation>
<a-text id="cube3-text" value="Cube 3" position="0 1.5 0" align="center" visible="false"></a-text>
</a-box>
<a-sky color="pink"></a-sky>
<!-- カメラの動きのためのコンポーネント -->
<a-entity position="0 1.8 4">
<a-entity camera look-controls="pointerLockEnabled: true" wasd-controls="enabled: true" mouse-cursor>
<a-cursor fuse="true" color="yellow"></a-cursor>
</a-entity>
</a-entity>
</a-scene>
</body>
</html>
使用変数
align | |
attribute | |
begin | |
charset | |
color | |
content | |
controls | |
dur | |
fill | |
fuse | |
id | |
name | |
position | |
rotation | |
scalable | |
scale | |
set__enter | |
set__leave | |
src | |
to | |
value | |
visible | |
width |