feat: 252 ocean component #363

JaimeTorrealba · 2024-03-11T16:44:22Z

closes #252

stackblitz · 2024-03-11T16:44:25Z

Run & review this pull request in StackBlitz Codeflow.

alvarosabu

This opens an "Ocean" of opportunities 😂. Sorry, only chance to drop a bad pun

alvarosabu · 2024-03-11T17:20:50Z

src/core/staging/Ocean.vue

+
+extend({ Water })
+
+const WaterRef = shallowRef()


Suggested change

const WaterRef = shallowRef()

const waterRef = shallowRef()

alvarosabu · 2024-03-11T17:22:42Z

src/core/staging/Ocean.vue

+const _fog = scene.value.fog !== undefined
+
+defineExpose({
+  WaterRef,


I would align this to the decision made on #160 (comment) to be consistent

alvarosabu · 2024-03-11T17:23:01Z

src/core/staging/Ocean.vue

+  await nextTick()
+  if (sunRef.value) {
+    const sunPosition = sunRef.value.material.uniforms.sunPosition.value
+    WaterRef.value.material.uniforms.sunDirection.value.copy(sunPosition)


Suggested change

WaterRef.value.material.uniforms.sunDirection.value.copy(sunPosition)

waterRef.value.material.uniforms.sunDirection.value.copy(sunPosition)

alvarosabu · 2024-03-11T17:23:12Z

src/core/staging/Ocean.vue

+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta }) => {
+  WaterRef.value.material.uniforms.time.value += delta


Suggested change

WaterRef.value.material.uniforms.time.value += delta

waterRef.value.material.uniforms.time.value += delta

alvarosabu · 2024-03-11T17:23:24Z

src/core/staging/Ocean.vue

+
+<template>
+  <TresWater
+    ref="WaterRef"


Suggested change

ref="WaterRef"

ref="waterRef"

alvarosabu · 2024-03-11T17:25:26Z

src/core/staging/Sky.vue

@@ -56,10 +57,16 @@ function getSunPosition(azimuth: number, elevation: number) {
  const theta = MathUtils.degToRad(azimuth)
  return new Vector3().setFromSphericalCoords(1, phi, theta)
 }
+
+defineExpose({
+  value: skyRef,


#160 (comment) ?

Lol I come with the idea and I forget it hahaha sorry I'll fix it :D

alvarosabu · 2024-03-11T17:29:02Z

Looks amazing! @JaimeTorrealba is sun direction always required?

andretchen0 · 2024-03-11T18:02:52Z

Currently reviewing. But just wanted to say that it looks great!

andretchen0

Hey @JaimeTorrealba !

Just a few changes. Mostly typos and/or non-blocking.

Looks great!

andretchen0 · 2024-03-11T17:58:41Z

docs/guide/staging/ocean.md

+
+| Prop                | Description                                 | Default                                                                                          |
+| :------------------ | :------------------------------------------ | ------------------------------------------------------------------------------------------------ |
+| **textureWidth**    | With of the mirror texture                  | 512                                                                                              |


With of the mirror texture

Width of the mirror texture

andretchen0 · 2024-03-11T18:09:12Z

docs/guide/staging/ocean.md

+`<Ocean />` is a wrapper for the [Three.js `Water` add-on](https://threejs.org/examples/?q=ocean#webgl_shaders_ocean).
+
+::: warning
+Smoke componente comes with a default texture abstraction it needs to be wrapped by a Suspense component


Smoke componente

I think this should be one of

The <Ocean /> component

The Ocean component

<Ocean />

Ocean

I guess I prefer <Ocean />.

(Sometimes we use <Tag />. We should probably come up with a "rule" for ourselves.)

Also, maybe add a period at the end of the sentence.

andretchen0 · 2024-03-11T18:17:44Z

docs/guide/staging/ocean.md

+All of the props of this component are not reactive
+:::
+
+| Prop                | Description                                 | Default                                                                                          |


(Non-blocking)

Just in case this component slipped by you: you can use the CientosPropsTable like so:

<CientosPropsTable component-path="src/core/staging/Ocean.vue" :fields="['name', 'description', 'default']" />

That will create a formatted table like the one you've typed, but it'll stay updated with the JSDoc comments in the component's source code. (Unfortunately, it doesn't help with translations, though.)

No worries if you don't want to use it though. Just mark as "resolved".

Though if you have ideas for improving <CientosPropsTable />, I'm all ears.

I couldn't make it works, Andre. I don't know what happen (I have a new computer) the cientosPropsTable is just not working for me even after build the repo.

I got.

So I just use the manual approach, any idea what it could be?

any idea

As far as I can remember, problems I've run into in the past have been resolved by doing this:

Stop all running servers – including vitepress

Check out the git branch that has the new component

pnpm i

pnpm run build

pnpm run docs:dev

As long as the component is 'built', usually just stopping vitepress and restarting works – the plugin loads/parses the JSDoc metadata when the vitepress server starts.

So I just use the manual approach

No problem using the manual approach if that makes life easier.

andretchen0 · 2024-03-11T18:23:30Z

docs/guide/staging/ocean.md

+
+### SKY
+
+The `<Ocean />` work pair to pair with the [Sky](https://cientos.tresjs.org/guide/staging/sky.html) component, detecting the position of the sun and reflecting on the water.


The <Ocean /> work pair to pair with the

The <Ocean /> component works hand in hand with the

andretchen0 · 2024-03-11T18:23:59Z

docs/guide/staging/ocean.md

+### SKY
+
+The `<Ocean />` work pair to pair with the [Sky](https://cientos.tresjs.org/guide/staging/sky.html) component, detecting the position of the sun and reflecting on the water.
+(`<Sky />` component is not required for making this component work)


(<Sky /> component is not required for making this component work)

(<Sky /> is not required for making this component work.)

andretchen0 · 2024-03-11T18:24:32Z

docs/guide/staging/ocean.md

+
+### Fog
+
+The `<Ocean />` component also react when there's [Fog](https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog) or [FogExp2](https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2) on your scene.


react

reacts

on your scene.

in your scene.

andretchen0 · 2024-03-11T18:28:48Z

docs/guide/staging/ocean.md

+
+## Custom Geometry
+
+You can usw a custom geometry by simple adding as a slot


You can usw a custom geometry by simple adding as a slot

Maybe:

You can use custom geometry by adding it as a child.

Rationale for "adding it as a child"

It seems to me that you, @JaimeTorrealba , as the creator of the component, added the <slot />.

That enables the user of the component to add a child.

andretchen0 · 2024-03-11T18:31:14Z

playground/src/pages/staging/OceanDemo.vue

+  toneMappingExposure: 1,
+}
+
+const newSunDirection = new Vector3(10, 0, 0)


(Non-blocking)

It's a playground, but this could be removed since it isn't referenced anywhere.

andretchen0 · 2024-03-11T18:31:45Z

playground/src/pages/staging/OceanDemo.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { shallowRef, watch } from 'vue'


(Non-blocking)

This could be removed since the imports aren't used.

andretchen0

I think my earlier comments about a few language changes weren't clear.

Below, I've put the entire sentences to copy/paste.

✌️

andretchen0 · 2024-03-12T16:57:39Z

docs/guide/staging/ocean.md

@@ -7,7 +7,7 @@
 `<Ocean />` is a wrapper for the [Three.js `Water` add-on](https://threejs.org/examples/?q=ocean#webgl_shaders_ocean).

 ::: warning
-Smoke componente comes with a default texture abstraction it needs to be wrapped by a Suspense component
+`<Ocean />` componente comes with a default texture abstraction it needs to be wrapped by a Suspense component.


<Ocean /> comes with a default texture, so it needs to be wrapped in a Suspense component.

andretchen0 · 2024-03-12T16:58:35Z

docs/guide/staging/ocean.md

@@ -16,16 +16,16 @@ Smoke componente comes with a default texture abstraction it needs to be wrapped

 ### SKY

-The `<Ocean />` work pair to pair with the [Sky](https://cientos.tresjs.org/guide/staging/sky.html) component, detecting the position of the sun and reflecting on the water.
-(`<Sky />` component is not required for making this component work)
+The `<Ocean />` work hand to hand with the [Sky](https://cientos.tresjs.org/guide/staging/sky.html) component, detecting the position of the sun and reflecting on the water.


<Ocean /> works hand in hand with the Sky component, detecting the position of the sun and reflecting on the water.

andretchen0 · 2024-03-12T16:59:14Z

docs/guide/staging/ocean.md

-The `<Ocean />` work pair to pair with the [Sky](https://cientos.tresjs.org/guide/staging/sky.html) component, detecting the position of the sun and reflecting on the water.
-(`<Sky />` component is not required for making this component work)
+The `<Ocean />` work hand to hand with the [Sky](https://cientos.tresjs.org/guide/staging/sky.html) component, detecting the position of the sun and reflecting on the water.
+(<Sky /> is not required for making this component work.).


(<Sky /> is not required for making this component work.)

Remove period at the end.

Make sure to keep the tick marks around <Sky /> when pasting. Otherwise, it disappears! ;)

alvarosabu

🌊

JaimeTorrealba added 3 commits March 8, 2024 15:33

feat(app): 252 adding ocean component

7efb293

feat(app): 252 Renamed as ocean, add sky support

473bac6

docs(app): 252 Add docs for Ocean

8f73f2f

JaimeTorrealba requested review from alvarosabu and andretchen0 March 11, 2024 16:44

JaimeTorrealba self-assigned this Mar 11, 2024

fix: little detail in the interface

fb6456a

alvarosabu requested changes Mar 11, 2024

View reviewed changes

andretchen0 requested changes Mar 11, 2024

View reviewed changes

fix(app): 252 Apply review feedback

4449208

JaimeTorrealba requested review from alvarosabu and andretchen0 March 12, 2024 16:52

andretchen0 requested changes Mar 12, 2024

View reviewed changes

docs: fix some minor details in docs

94a927f

andretchen0 approved these changes Mar 13, 2024

View reviewed changes

alvarosabu approved these changes Mar 13, 2024

View reviewed changes

JaimeTorrealba merged commit 55ca2bf into main Mar 13, 2024
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: 252 ocean component #363

feat: 252 ocean component #363

JaimeTorrealba commented Mar 11, 2024

stackblitz bot commented Mar 11, 2024

alvarosabu left a comment

alvarosabu Mar 11, 2024

alvarosabu Mar 11, 2024

alvarosabu Mar 11, 2024

alvarosabu Mar 11, 2024

alvarosabu Mar 11, 2024

alvarosabu Mar 11, 2024

JaimeTorrealba Mar 11, 2024

alvarosabu commented Mar 11, 2024

andretchen0 commented Mar 11, 2024

andretchen0 left a comment •

edited

Loading

andretchen0 Mar 11, 2024

andretchen0 Mar 11, 2024

andretchen0 Mar 11, 2024

JaimeTorrealba Mar 12, 2024

andretchen0 Mar 12, 2024

andretchen0 Mar 11, 2024

andretchen0 Mar 11, 2024

andretchen0 Mar 11, 2024

andretchen0 Mar 11, 2024

andretchen0 Mar 11, 2024 •

edited

Loading

andretchen0 Mar 11, 2024

andretchen0 left a comment

andretchen0 Mar 12, 2024

andretchen0 Mar 12, 2024

andretchen0 Mar 12, 2024 •

edited

Loading

alvarosabu left a comment

	WaterRef.value.material.uniforms.sunDirection.value.copy(sunPosition)
	waterRef.value.material.uniforms.sunDirection.value.copy(sunPosition)

	WaterRef.value.material.uniforms.time.value += delta
	waterRef.value.material.uniforms.time.value += delta


		### SKY

		The `<Ocean />` work pair to pair with the [Sky](https://cientos.tresjs.org/guide/staging/sky.html) component, detecting the position of the sun and reflecting on the water.


		### Fog

		The `<Ocean />` component also react when there's [Fog](https://threejs.org/docs/index.html?q=fog#api/en/scenes/Fog) or [FogExp2](https://threejs.org/docs/index.html?q=fog#api/en/scenes/FogExp2) on your scene.


		## Custom Geometry

		You can usw a custom geometry by simple adding as a slot

		@@ -0,0 +1,45 @@
		<script setup lang="ts">
		import { shallowRef, watch } from 'vue'

feat: 252 ocean component #363

feat: 252 ocean component #363

Conversation

JaimeTorrealba commented Mar 11, 2024

stackblitz bot commented Mar 11, 2024

alvarosabu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alvarosabu commented Mar 11, 2024

andretchen0 commented Mar 11, 2024

andretchen0 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Rationale for "adding it as a child"

andretchen0 Mar 11, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andretchen0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andretchen0 Mar 12, 2024 • edited Loading

Choose a reason for hiding this comment

alvarosabu left a comment

Choose a reason for hiding this comment

andretchen0 left a comment •

edited

Loading

andretchen0 Mar 11, 2024 •

edited

Loading

andretchen0 Mar 12, 2024 •

edited

Loading