A simple utility to make a mesh reflect its sorroundings. This can be used in three.js as well as as an aframe component. This utility can be used with a color, or one texture image, or two texture images. USeful in a scenario to reflect the ground with the scene. This shader is an extension of threejs mirror example.
Example 1 Example 2 Example 3 Example 4
npm install three-reflector2
import {Mesh, PlaneGeometry, MeshBasicMaterial, DoubleSide} from 'three';
import {GroundSceneReflector} from 'three-reflector2';
var ground = new Mesh(new PlaneGeometry(10000, 10000, 10), new MeshBasicMaterial({color: 0xEAEAEA, side: DoubleSide}));
var reflector = new GroundSceneReflector(ground, renderer, scene,{textureOne:'pathtotextureone.png', textureTwo:'pathtotexturetwo.png', wrapOne:{x:10, y:10}, wrapTwo:{x:1, y:1}, intensity: 0.5});
scene.add(ground);
| Property | Description | Default Value |
|---|---|---|
| color | String – Color of the mesh without textures | #848485 |
| intensity | Number – A value between 0.0 to 1.0 that controls the intensity of the reflection. 0 implies no reflection and 1.0 implies a mirror | 0.5 |
| blendIntensity | Number – A value between 0.0 to 1.0 that controls the blendIntensity between the two textures if given | 0.5 |
| textureWidth | Number – The width of texture created with scene reflection | 256 |
| textureHeight | Number – The height of texture created with scene reflection | 256 |
| wrapOne | Vector2 – The wrap repeat value for the first texture image. Ignored if no textures are used. | {x:1, y:1}} |
| wrapTwo | Vector2 – The wrap repeat value for second texture image. Ignored if no textures are used. | {x:1, y:1}} |
| invertedUV | Boolean – For models exported from Blender or tools with Z-Up, this is an ugly hack to invert the Y-coordinates of the UV map. | False |
<!DOCTYPE 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="../src/GroundSceneReflector.js"></script>
<script src="../src/aframe-mirror.js"></script>
</head>
</head>
<body>
<input type="button" value="graphs" onclick="showGraphs([1,2,3], [1,2,3], [1,2,3])">
<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-box>
<a-sphere id="sphere" position="0 0 -1" radius="1" color="#EF2D5E"></a-sphere>
<a-cylinder id="cylinder" position="1 0 1" radius="1" height="1" rotation="0 0 0" color="#FFC65D"></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>
To use this in threejs is as simple as creating an instance of GroundSceneReflection with the following parameters
var gscenereflector = Ashok.GroundSceneReflector(mirrorObj, renderer, scene, data);
mirrorObj- The mesh to be given the reflector materialrenderer- Pointer to the renderer instancescene- Pointer to the scene instancedata- An object with the named properties and values as mentioned in the above table