three-reflector2
Version:
Reflection of environment on any item in the scene
46 lines (40 loc) • 2.31 kB
HTML
<html>
<head>
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/v0.1.14/dist/aframe-orbit-controls-component.min.js"></script>
<script src="https://cdn.rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
<script src="https://aalavandhaann.github.io/three_reflector/src/GroundSceneReflector.js"></script>
<script src="https://aalavandhaann.github.io/three_reflector/src/aframe-mirror.js"></script>
</head>
</head>
<body>
<a-scene visible="true" vr-mode-ui="enabled: false">
<a-entity id="camera" camera="fov:35;near:1" position="0 5 15; user-height:0.5; target:#directionaltarget" orbit-controls="
target: #target;
enableDamping: true;
dampingFactor: 0.125;
rotateSpeed:0.25;
rotateToSpeed: 0.04;
logPosition: false;
minPolarAngle: 0;
maxPolarAngle: 1.43
enableZoom:true;
enablePan:false;
">
</a-entity>
<a-entity id="target" position="0 1 0">
<a-box id="box" position="-1 -0.25 1" rotation="0 0 0" color="#4CC3D9">
<a-animation dur="2000" direction="alternate" attribute="rotation" to="360 360 360" repeat="indefinite" yoyo="true" easing="ease"/>
</a-box>
<a-sphere id="sphere" position="0 0 -1" radius="1" color="#EF2D5E" aframe-mirror="intensity:0.5;textureWidth:2048;textureHeight:2048;textureOne:https://aalavandhaann.github.io/three_reflector/examples/textures/earthmap1k.jpg;invertedUV:false; wrapOne:">
<a-animation dur="2000" direction="alternate" attribute="position" to="0 3 -1" repeat="indefinite" yoyo="true" easing="ease"/>
</a-sphere>
<a-cylinder id="cylinder" position="1 0 1" radius="1" height="1" rotation="0 0 0" color="#FFC65D">
<a-animation dur="2000" direction="alternate" attribute="rotation" to="45 0 45" repeat="indefinite" yoyo="true" easing="ease"/>
</a-cylinder>
</a-entity>
<a-plane position="0 0 0" rotation="-90 0 0" width=20 height=20 aframe-mirror="color:#848485;intensity:0.4;textureWidth:2048;textureHeight:2048;"></a-plane>
</a-scene>
</body>
</html>