Ocean
Wrapper for the Three.js Water add-on with sky reflection support.
<Ocean /> is a wrapper for the Three.js Water add-on.
Ocean comes with a default texture, so it needs to be wrapped in a Suspense component.
Usage
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Ocean } from '@tresjs/cientos'
</script>
<template>
<TresCanvas>
<Suspense>
<Ocean />
</Suspense>
</TresCanvas>
</template>
SKY
<Ocean /> works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.
(<Sky /> is not required for making this component work.)
Fog
The <Ocean /> component also reacts when there's Fog or FogExp2 in your scene.
Custom Geometry
You can use custom geometry by adding it as a child.
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Ocean } from '@tresjs/cientos'
</script>
<template>
<TresCanvas>
<Suspense>
<Ocean>
<TresCircleGeometry :args="[50, 16]" />
</Ocean>
</Suspense>
</TresCanvas>
</template>
Props
All of the props of this component are not reactive.
| Prop | Description | Default |
|---|---|---|
| textureWidth | Width of the mirror texture | 512 |
| textureHeight | Height of the mirror texture | 512 |
| waterNormals | Normals of the water | https://raw.githubusercontent.com/Tresjs/assets/main/textures/water-normals/Water_1_M_Normal.jpg |
| sunDirection | Sun direction to be reflected on the water | Vector3(0,0,0) |
| sunColor | Sun color to be reflected on the water | 0xffffff |
| waterColor | Water Color | 0x001e0f |
| distortionScale | Distortion scale on reflected objects | 3.7 |
| size | Size of the water normals | 1 |
| clipBias | To use the clipBias property | 0.0 |
| alpha | To use the clipBias Alpha | 1.0 |
| side | Which size of the mesh will render the water | FrontSide |
