Interior mapping with shader in Three.js. Color and texture of all surfaces can be individually changed using shader uniform.
import ThreeCustomInteriorPlane from "./ThreeCustomInteriorPlane";Create a new plane as an Object3D class (ThreeInteriorPlane derivative) and then add it to the scene.
const customInteriorPlane = new ThreeInteriorPlane();
scene.add(customInteriorPlane);You can change any parameter in runtime(color, texture, depth, shadow...).
// Set interior depth scale
customInteriorPlane.uniforms.uInteriorDepth.value = 10;
// Set color parameter
customInteriorPlane.uniforms.uBackWallColor.value = new Color("#FF0000");
// or
customInteriorPlane.uniforms.uBackWallColor.value.set("#FF0000");
// Set face texture parameter(optional)
customInteriorPlane.uniforms.uBackWallTexture.value = texture;
customInteriorPlane.uniforms.uBackWallHasTexture.value = true;
// Enable/Disable texture visibility(true = texture, false = solid color)
customInteriorPlane.uniforms.uBackWallTextureEnabled.value = true;| Uniform Name | Description | Type |
|---|---|---|
| uInteriorRowCount | Same interior grid row count[1-infinity] | Number |
| uInteriorColCount | Same interior grid column count[1-infinity] | Number |
| uInteriorDepth | Interior z depth[0-infinite], for long interiors | Number |
| uShadowIntensity | Interior shadow power[0-1], greater z value -> stronger shadow | Number |
| uFrontWallHasTexture | If any front wall texture uploaded, set value to true.(depended to uFrontWallTexture uniform) | Boolean |
| uFrontWallTexture | Front wall texture data | Texture |
| uFrontWallTextureEnabled | Front wall texture visibility | Boolean |
| uBackWallColor | If any back wall texture not uploaded, then use solid color | Color |
| uBackWallHasTexture | If any back wall texture uploaded, set value to true.(depended to uBackWallTexture uniform) | Boolean |
| uBackWallTexture | Back wall texture data | Texture |
| uBackWallTextureEnabled | Back wall texture visibility | Boolean |
| uLeftWallColor | If any left wall texture not uploaded, then use solid color | Color |
| uLeftWallHasTexture | If any left wall texture uploaded, set value to true.(depended to uLeftWallTexture uniform) | Boolean |
| uLeftWallTexture | Left wall texture data | Texture |
| uLeftWallTextureEnabled | Left wall texture visibility | Boolean |
| uRightWallColor | If any back wall texture not uploaded, then use solid color | Color |
| uRightWallHasTexture | If any right wall texture uploaded, set value to true.(depended to uRightWallTexture uniform) | Boolean |
| uRightWallTexture | Right wall texture data | Texture |
| uRightWallTextureEnabled | Right wall texture visibility | Boolean |
| uCeilWallColor | If any ceil wall texture not uploaded, then use solid color | Color |
| uCeilWallHasTexture | If any ceil wall texture uploaded, set value to true.(depended to uCeilWallTexture uniform) | Boolean |
| uCeilWallTexture | Ceil wall texture data | Texture |
| uCeilWallTextureEnabled | Ceil wall texture visibility | Boolean |
| uFloorWallColor | If any floor wall texture not uploaded, then use solid color | Color |
| uFloorWallHasTexture | If any floor wall texture uploaded, set value to true.(depended to uFloorWallTexture uniform) | Boolean |
| uFloorWallTexture | Floor wall texture data | Texture |
| uFloorWallTextureEnabled | Floor wall texture visibility | Boolean |