https://github.com/aalavandhaann/three_reflector

A simple utility to reflect a threejs scene on an object. This module is still in beta. So use it with caution.
https://github.com/aalavandhaann/three_reflector

aframe aframe-component aframe-reflection aframe-reflector aframevr reflector scene texture-image three-js threejs threejs-reflection threejs-reflector

Last synced: about 1 month ago
JSON representation

A simple utility to reflect a threejs scene on an object. This module is still in beta. So use it with caution.

• Host: GitHub
• URL: https://github.com/aalavandhaann/three_reflector
• Owner: aalavandhaann
• Created: 2018-03-07T18:40:06.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-01-27T16:04:10.000Z (almost 3 years ago)
• Last Synced: 2024-09-29T05:23:28.557Z (about 2 months ago)
• Topics: aframe, aframe-component, aframe-reflection, aframe-reflector, aframevr, reflector, scene, texture-image, three-js, threejs, threejs-reflection, threejs-reflector
• Language: JavaScript
• Size: 5.11 MB
• Stars: 20
• Watchers: 3
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://aalavandhaann.github.io/three_reflector/examples/basic.html)

[Example 2](https://aalavandhaann.github.io/three_reflector/examples/basic_animated.html)

[Example 3](https://aalavandhaann.github.io/three_reflector/examples/onetexture.html)

[Example 4](https://aalavandhaann.github.io/blueprint-js/build)

### 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

```