mesh-refraction-material.mdx

order	category	name	sourcePath	type	componentSignature
9.7	@threlte/extras	<MeshRefractionMaterial>	packages/extras/src/lib/components/MeshRefractionMaterial/MeshRefractionMaterial.svelte	component	extends props type url ShaderMaterial https://threejs.org/docs/index.html#api/en/materials/ShaderMaterial name type required envMap CubeTexture | Texture true name type default required description bounces number 2 false Number of ray-cast bounces, it can be expensive to have too many name type default required description ior number 2.4 false Refraction index name type default required description fresnel number 0.0 false Fresnel (strip light) name type default required description aberrationStrength number 0.0 false RGB shift intensity, can be expensive name type default required color ColorRepresentation white false name type default required description fastChrome boolean true false If this is on it uses fewer ray casts for the RGB shift sacrificing physical accuracy

To use this component you need to install the seperate library `three-mesh-bhv`, please run `npm install three-mesh-bhv` before adding this component to your project. This material may not work reliably on some devices or browsers. We're investigating possible fixes.

This component is a port of drei's <MeshRefractionMaterial> component, a convincing Glass/Diamond refraction material.

Examples

Basic Example

You can either pass in a texture to use as the environment:

<script lang="ts">
  import { T, useLoader } from '@threlte/core'
  import { MeshRefractionMaterial } from '@threlte/extras'
  import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'

  const env = useLoader(RGBELoader).load('/hdr/aerodynamics_workshop_1k.hdr')
</script>

{#await env then texture}
	<T.Mesh>
		<MeshRefractionMaterial envMap={texture}/>
		<T.IcosahedronGeometry args={[4, 0]} />
	</T.Mesh>
{/await}

or you can use a cube camera to generate the environment:

<script lang="ts">
  import { T, useThrelte, useTask } from '@threlte/core'
  import { MeshRefractionMaterial } from '@threlte/extras'
  import { WebGLCubeRenderTarget, CubeCamera } from 'three'

  let renderTarget: WebGLCubeRenderTarget = new WebGLCubeRenderTarget(128)
  let cubeCamera: CubeCamera = new CubeCamera(0.1, 100, renderTarget)

  const { scene, renderer } = useThrelte()

  useTask(() => {
    if (cubeCamera) {
      cubeCamera.update(renderer, scene)
    }
  })
</script>

<T.Mesh>
  <MeshRefractionMaterial envMap={renderTarget.texture} />
  <T.IcosahedronGeometry args={[4, 0]} />
</T.Mesh>