three-reflector2
v0.0.6
Published
Reflection of environment on any item in the scene
Downloads
76
Maintainers
aalavandhaannReadme
three_reflector
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
Installation via npm
npm install three-reflector2
Using with threejs and es6 example
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);API
| 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 |
A-Frame Example
<!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>THREE.JS example
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