{"id":14981329,"url":"https://github.com/aalavandhaann/three_reflector","last_synced_at":"2025-10-29T05:31:31.952Z","repository":{"id":33276478,"uuid":"124278759","full_name":"aalavandhaann/three_reflector","owner":"aalavandhaann","description":"A simple utility to reflect a threejs scene on an object. This module is still in beta. So use it with caution.","archived":false,"fork":false,"pushed_at":"2022-01-27T16:04:10.000Z","size":5354,"stargazers_count":20,"open_issues_count":3,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T22:51:10.516Z","etag":null,"topics":["aframe","aframe-component","aframe-reflection","aframe-reflector","aframevr","reflector","scene","texture-image","three-js","threejs","threejs-reflection","threejs-reflector"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aalavandhaann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-07T18:40:06.000Z","updated_at":"2024-06-28T09:27:27.000Z","dependencies_parsed_at":"2022-08-07T20:17:35.600Z","dependency_job_id":null,"html_url":"https://github.com/aalavandhaann/three_reflector","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aalavandhaann%2Fthree_reflector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aalavandhaann%2Fthree_reflector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aalavandhaann%2Fthree_reflector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aalavandhaann%2Fthree_reflector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aalavandhaann","download_url":"https://codeload.github.com/aalavandhaann/three_reflector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238777478,"owners_count":19528813,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aframe","aframe-component","aframe-reflection","aframe-reflector","aframevr","reflector","scene","texture-image","three-js","threejs","threejs-reflection","threejs-reflector"],"created_at":"2024-09-24T14:03:20.085Z","updated_at":"2025-10-29T05:31:31.494Z","avatar_url":"https://github.com/aalavandhaann.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# three_reflector\n\nA 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. \n\n[Example 1](https://aalavandhaann.github.io/three_reflector/examples/basic.html)\n[Example 2](https://aalavandhaann.github.io/three_reflector/examples/basic_animated.html)\n[Example 3](https://aalavandhaann.github.io/three_reflector/examples/onetexture.html)\n[Example 4](https://aalavandhaann.github.io/blueprint-js/build)\n\n### Installation via npm\n```npm install three-reflector2 ```\n\n### Using with threejs and es6 example\n```\nimport {Mesh, PlaneGeometry, MeshBasicMaterial, DoubleSide} from 'three';\nimport {GroundSceneReflector} from 'three-reflector2';\n\nvar ground = new Mesh(new PlaneGeometry(10000, 10000, 10), new MeshBasicMaterial({color: 0xEAEAEA, side: DoubleSide}));\nvar 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});\nscene.add(ground);\n```\n\n### API\n\n| Property   | Description | Default Value |\n| ---------- | ----------- | ------------- |\n| color | String – Color of the mesh without textures  | #848485\n| 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 |\n| blendIntensity | Number – A value between 0.0 to 1.0 that controls the blendIntensity between the two textures if given| 0.5 |\n| textureWidth | Number – The width of texture created with scene reflection| 256 |\n| textureHeight | Number – The height of texture created with scene reflection| 256 |\n| wrapOne | Vector2 – The wrap repeat value for the first texture image. Ignored if no textures are used.| {x:1, y:1}} |\n| wrapTwo | Vector2 – The wrap repeat value for second texture image. Ignored if no textures are used.| {x:1, y:1}} |\n| 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 |\n\n### A-Frame Example\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://aframe.io/releases/0.7.1/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/v0.1.14/dist/aframe-orbit-controls-component.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"../src/GroundSceneReflector.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"../src/aframe-mirror.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cinput type=\"button\" value=\"graphs\" onclick=\"showGraphs([1,2,3], [1,2,3], [1,2,3])\"\u003e\n    \u003ca-scene visible=\"true\" vr-mode-ui=\"enabled: false\"\u003e\n    \u003ca-entity id=\"camera\" camera=\"fov:35;near:1\" position=\"0 5 15; user-height:0.5; target:#directionaltarget\" orbit-controls=\"\n          target: #target;\n          enableDamping: true;\n          dampingFactor: 0.125;\n          rotateSpeed:0.25;\n          rotateToSpeed: 0.04;\n          logPosition: false;\n          minPolarAngle: 0;        \n          maxPolarAngle: 1.43\n          enableZoom:true;\n          enablePan:false;\n          \"\u003e\n      \u003c/a-entity\u003e\n\n      \u003ca-entity id=\"target\" position=\"0 1 0\"\u003e\n          \u003ca-box id=\"box\" position=\"-1 -0.25 1\" rotation=\"0 0 0\" color=\"#4CC3D9\"\u003e\u003c/a-box\u003e\n          \u003ca-sphere id=\"sphere\" position=\"0 0 -1\" radius=\"1\" color=\"#EF2D5E\"\u003e\u003c/a-sphere\u003e\n          \u003ca-cylinder id=\"cylinder\" position=\"1 0 1\" radius=\"1\" height=\"1\" rotation=\"0 0 0\" color=\"#FFC65D\"\u003e\u003c/a-cylinder\u003e          \n      \u003c/a-entity\u003e \n      \u003ca-plane position=\"0 0 0\" rotation=\"-90 0 0\" width=20 height=20 aframe-mirror=\"color:#848485;intensity:0.4;textureWidth:2048;textureHeight:2048;\"\u003e\u003c/a-plane\u003e\n    \u003c/a-scene\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n### THREE.JS example\nTo use this in threejs is as simple as creating an instance of GroundSceneReflection with the following parameters\n\n```\nvar gscenereflector = Ashok.GroundSceneReflector(mirrorObj, renderer, scene, data);\n```\n- ```mirrorObj``` - The mesh to be given the reflector material\n- ```renderer``` - Pointer to the renderer instance\n- ```scene``` - Pointer to the scene instance\n- ```data``` - An object with the named properties and values as mentioned in the above table\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faalavandhaann%2Fthree_reflector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faalavandhaann%2Fthree_reflector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faalavandhaann%2Fthree_reflector/lists"}