Skip to content

jp-pelletier/Aframe-Rounded-Box-Component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

THREE.JS - Aframe Rounded Angles Box Component

Light component for some rounded effects on A-FRAME boxes.

Click the cover below for a live demo... and look behind !

Usage

Example of code of the Wooden Cube :

<a-entity
    roundedanglesbox = "
    width: 1;
    height: 1;
    depth: 1;
    radius: 0.2;
    roughness: 0;
    metalness: 0;
    src: img/Wood.jpg;
    repeat: 4 4;"
    position = "-4 0.6 -0.5"
    rotation = "0 40 0">
</a-entity>
PROPERTY COMPONENT MAPPING
DESCRIPTION
DEFAULT VALUE
Width geometry.width 1
Height geometry.height 1
Depth geometry.depth 1
Radius Determines the radius of the rounded angles.
Value "1" produces a sphere for an equirectangular box.
0.05
Segments Determines the number of vertices for THREE.BoxBufferGeometry segments x, y, z. 9 9 9
Color material.color #AAA
Roughness material.roughness
How rough the material is from 0 to 1. A rougher material will scatter reflected light in more directions than a smooth material.
0
Metalness material.metalness
How metallic the material is from 0 to 1.
0.2
Transparent Whether material is transparent. Transparent entities are rendered after non-transparent entities. false
Opacity Extent of transparency. If the transparent property is not true, then the material will remain opaque and opacity will only affect color. 1
Src material.src
Image texture map. Requires an inline URL.
This simple texture map produces a very cool effect on edges !
None
Repeat material.repeat
How many times a texture (defined by src) repeats in the X and Y direction.
1 1
cubeMap Unlike textures, the envMap property takes a cubemap, six images put together to form a cube. The cubemap wraps around the mesh and applied as a texture.
Requires six images loaded with parameters :
cubeMap_negx
cubeMap_posz
cubeMap_posx
cubeMap_negz
cubeMap_posy
cubeMap_negy

Textures directory has to be configured in roundedanglesbox.js.

Using cubeMap switches the material from MeshStandardMaterial to MeshPhongMaterial and doesn't support metalness and roughness.
None

For porting @Fyrestar’s approach to JavaScript, look here : https://discourse.threejs.org/t/cheap-round-edged-box-vertex-shader/8066/21

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published