<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Orbit Controls + click sur objet</title>
<!-- Include framework aframe -->
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<!-- Include Environnement sol + ciel -->
<script src="https://cdn.rawgit.com/feiss/aframe-environment-component/76b2bbf3/aframe-environment-component.min.js"></script>
<!-- Include framework Orbit Controls -->
<script src="https://unpkg.com/[email protected]/dist/aframe-orbit-controls.min.js"></script>
<script type="text/javascript">
window.onload = function() {
}
</script>
</head>
<body>
<a-scene stats shadow="type: pcfsoft" vr-mode-ui="enabled: true" cursor="rayOrigin: mouse" raycaster="objects: .interactive">
<a-entity environment shadow="receive: true"></a-entity>
<a-entity id="box" class="interactive" geometry="primitive: box;
height: 1;
width: 1;
depth: 1" material="color: #AA00AA" position="0 0.5 -5" shadow="cast: true" animation__rotation="property: rotation;
from: 0 0 0;
to: 0 360 0;
dur: 2000;
startEvents: click;
easing: easeInOutElastic;" animation__colorIn="property: material.color;
to: #FF0000;
startEvents: mouseenter;
dur: 0;" animation__colorOut="property: material.color;
to: #AA00AA;
startEvents: mouseleave;
dur: 0;"></a-entity>
<a-entity camera orbit-controls="target: 0 0 0;
minDistance: 2;
maxDistance: 50;
initialPosition: 0 5 15;
enablePan: false;
enableKeys: false;
maxPolarAngle: 89;"></a-entity>
</a-scene>
</body>
</html>