<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vr</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<script>
AFRAME.registerComponent('move', {
init: function () {
var isMove = false;
var b = 0;
var s = 0;
var c = 0;
this.el.addEventListener('mousedown', function (evt) {
var mode = document.getElementById("mode");
isMove = !isMove;
mode.setAttribute('visible', isMove);
});
var box = document.getElementById("box1");
var sphere = document.getElementById("sphere1");
var cylinder = document.getElementById("cylinder1");
box.addEventListener('mouseup',function (ev) {
if(isMove){
b = 1;
s = 0;
c = 0;
sphere.setAttribute('material', 'color', 'blue');
cylinder.setAttribute('material', 'color', 'blue');
}else{
b = 0;
s = 0;
c = 0;
box.setAttribute('material', 'color', 'blue');
sphere.setAttribute('material', 'color', 'blue');
cylinder.setAttribute('material', 'color', 'blue');
}
});
sphere.addEventListener('mouseup',function (ev) {
if(isMove){
b = 0;
s = 1;
c = 0;
box.setAttribute('material', 'color', 'blue');
cylinder.setAttribute('material', 'color', 'blue');
}else{
b = 0;
s = 0;
c = 0;
box.setAttribute('material', 'color', 'blue');
sphere.setAttribute('material', 'color', 'blue');
cylinder.setAttribute('material', 'color', 'blue');
}
});
cylinder.addEventListener('mouseup',function (ev) {
if(isMove){
b = 0;
s = 0;
c = 1;
box.setAttribute('material', 'color', 'blue');
sphere.setAttribute('material', 'color', 'blue');
}else{
b = 0;
s = 0;
c = 0;
box.setAttribute('material', 'color', 'blue');
sphere.setAttribute('material', 'color', 'blue');
cylinder.setAttribute('material', 'color', 'blue');
}
});
var plane = document.getElementById('plane1');
plane.addEventListener('mouseenter', function (evt) {
if(isMove && b) {
evt.detail.intersection.point.y = box.getAttribute('height') / 2;
box.setAttribute('position', evt.detail.intersection.point);
box.setAttribute('material', 'color', 'red');
}
if(isMove && s){
evt.detail.intersection.point.y = sphere.getAttribute('radius') / 2;
sphere.setAttribute('position', evt.detail.intersection.point);
sphere.setAttribute('material', 'color', 'red');
}
if(isMove && c){
evt.detail.intersection.point.y = cylinder.getAttribute('height') / 2;
cylinder.setAttribute('position', evt.detail.intersection.point);
cylinder.setAttribute('material', 'color', 'red');
}
});
}
});
AFRAME.registerComponent('clear', {
init: function () {
var goal = document.getElementById("goal");
goal.addEventListener('mouseup',function(ev){
location.href = "cgg.html";
});
}
});
</script>
<a-sky src="koya.jpg" rotation="0 100 0"></a-sky>
<a-camera cursor="rayOrigin: mouse;"></a-camera>
<a-box move id="box1" value="clear" position="0 0.5 -3" height="1" color="#4CC3D9" shadow></a-box>
<a-sphere move camera-listener id="sphere1" position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder move camera-listener id="cylinder1" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane id="plane1" position="0 0 -4" rotation="-90 0 0" width="100" height="100" color="#7BC8A4" shadow visible="false"></a-plane>
<a-text id="mode" value="Move" color="green" position="-0.9 2 -3" scale="1.5 1.5 1.5" visible="false"></a-text>
<a-text clear id="goal" value="clear" color="gold" position="0 1.25 -5" scale="1.5 1.5 1.5"></a-text>
</a-scene>
</body>
</html>
