diff --git a/apps/cientos-docs-vitepress/.vitepress/theme/components/SmokeDemo.vue b/apps/cientos-docs-vitepress/.vitepress/theme/components/SmokeDemo.vue index a9180fea4..1d296a972 100644 --- a/apps/cientos-docs-vitepress/.vitepress/theme/components/SmokeDemo.vue +++ b/apps/cientos-docs-vitepress/.vitepress/theme/components/SmokeDemo.vue @@ -1,8 +1,9 @@ diff --git a/apps/cientos-docs-vitepress/guide/staging/smoke.md b/apps/cientos-docs-vitepress/guide/staging/smoke.md index a0a6d2254..ea8713d1c 100644 --- a/apps/cientos-docs-vitepress/guide/staging/smoke.md +++ b/apps/cientos-docs-vitepress/guide/staging/smoke.md @@ -46,12 +46,25 @@ Notice that you can pass a texture in combination with props, to personalize yo ``` ## Props -
NameTypeDescriptionDefaultRequired
colorTresColorThe color of the smoke.
-		'#ffffff'No
opacitynumberThe strength of the opacity.
-		0.5No
speednumberThe rotation speed of the smoke.
-		0.4No
widthnumberThe base width.
-		10No
depthnumberThe base depth.
-		1.5No
segmentsnumberThe number of smoke to render.
-		20No
texturestringThe texture of the smoke.
-		default component textureNo
depthTestbooleanThe depthTest.
-		trueNo
+ + + + + + + + + + + +
NameTypeDescriptionDefault
colorTresColorThe color of the smoke.
+		'#f7f7f7'
opacitynumberThe strength of the opacity.
+		0.5
speednumberThe rotation speed of the smoke.
+		0.4
depthnumberThe base depth.
+		0.3
segmentsnumberThe number of smoke to render.
+		10
texturestringThe texture of the smoke.
+		 link
depthTestbooleanThe depthTest.
+		false
spreadYnumberSpread on the Y axis.
+		0.1
spreadXnumberSpread on the X axis.
+		0.5
scalenumberScale.
+		1
diff --git a/apps/playground/src/pages/cientos/staging/SmokeDemo.vue b/apps/playground/src/pages/cientos/staging/SmokeDemo.vue index 1d2379fcf..2f72865d8 100644 --- a/apps/playground/src/pages/cientos/staging/SmokeDemo.vue +++ b/apps/playground/src/pages/cientos/staging/SmokeDemo.vue @@ -2,6 +2,79 @@ import { Box, OrbitControls, Smoke } from '@tresjs/cientos' import { TresCanvas } from '@tresjs/core' import { NoToneMapping, SRGBColorSpace } from 'three' +import { TresLeches, useControls } from '@tresjs/leches' + +const { + segments, + opacity, + speed, + depth, + color, + depthTest, + spreadY, + spreadX, + scale, +} = useControls({ + segments: { + label: 'Segments', + value: 5, + min: 1, + max: 20, + step: 1, + }, + opacity: { + label: 'Opacity', + value: 0.5, + min: 0, + max: 1, + step: 0.1, + }, + speed: { + label: 'Speed', + value: 0.4, + min: 0, + max: 1, + step: 0.1, + }, + depth: { + label: 'Depth', + value: 0.3, + min: 0, + max: 1, + step: 0.1, + }, + color: { + type: 'color', + label: 'Color', + value: '#f7f7f7', + }, + depthTest: { + type: 'boolean', + label: 'Depth Test', + value: false, + }, + spreadY: { + label: 'Spread Y', + value: 0.1, + min: 0, + max: 4, + step: 0.1, + }, + spreadX: { + label: 'Spread X', + value: 0.5, + min: 0, + max: 4, + step: 0.1, + }, + scale: { + label: 'Scale', + value: 1, + min: 0.1, + max: 4, + step: 0.1, + }, +}) const gl = { clearColor: '#333', @@ -12,46 +85,28 @@ const gl = { diff --git a/packages/cientos/src/core/staging/Smoke.vue b/packages/cientos/src/core/staging/Smoke.vue index d59b2653b..55edf0010 100644 --- a/packages/cientos/src/core/staging/Smoke.vue +++ b/packages/cientos/src/core/staging/Smoke.vue @@ -11,7 +11,6 @@ export interface SmokeProps { * @default 0xffffff * @type {TresColor} * @memberof SmokeProps - * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial */ color?: TresColor /** @@ -19,7 +18,6 @@ export interface SmokeProps { * @default 0.5 * @type {number} * @memberof SmokeProps - * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial */ opacity?: number /** @@ -27,20 +25,11 @@ export interface SmokeProps { * @default 0.4 * @type {number} * @memberof SmokeProps - * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial */ speed?: number - /** - * The base width. - * @default 4 - * @type {number} - * @memberof SmokeProps - * @see https://threejs.org/docs/#api/en/materials/MeshBasicMaterial - */ - width?: number /** * The base depth. - * @default 10 + * @default 0.3 * @type {number} * @memberof SmokeProps * @see https://threejs.org/docs/#api/en/geometries/PlaneGeometry @@ -51,7 +40,6 @@ export interface SmokeProps { * @default 10 * @type {number} * @memberof SmokeProps - * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial */ segments?: number /** @@ -59,31 +47,55 @@ export interface SmokeProps { * @default 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png' * @type {string} * @memberof SmokeProps - * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial */ texture?: string /** * The depthTest. - * @default true + * @default false * @type {boolean} * @memberof SmokeProps - * @see https://threejs.org/docs/#api/en/materials/MeshStandardMaterial */ depthTest?: boolean + /** + * Spread on the Y axis. + * @default 0.1 + * @type {number} + * @memberof SmokeProps + */ + spreadY?: number + /** + * Spread on the X axis. + * @default 0.5 + * @type {number} + * @memberof SmokeProps + */ + spreadX?: number + /** + * Scale. + * @default 1 + * @type {number} + * @memberof SmokeProps + */ + scale?: number } const props = withDefaults(defineProps(), { + color: '#f7f7f7', opacity: 0.5, speed: 0.4, - width: 10, - depth: 1.5, - segments: 20, - texture: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png', - color: '#ffffff', - depthTest: true, + depth: 0.3, + segments: 10, + texture: + 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/clouds/defaultCloud.png', + depthTest: false, + spreadY: 0.1, + spreadX: 0.5, + scale: 1, }) -const { width, depth, segments, texture, color, depthTest, opacity, speed } = toRefs(props) +const { depth, segments, texture, color, depthTest, opacity, speed, spreadY, spreadX, scale } = toRefs( + props, +) const smokeRef = shallowRef() const groupRef = shallowRef() @@ -92,15 +104,13 @@ defineExpose({ instance: smokeRef, }) -const smoke = [...[segments]].map((_, index) => ({ - x: width.value / 2 - Math.random() * width.value, - y: width.value / 2 - Math.random() * width.value, - scale: 0.4 + Math.sin(((index + 1) / segments.value) * Math.PI) * ((0.2 + Math.random()) * 10), - density: Math.max(0.2, Math.random()), - rotation: Math.max(0.002, 0.005 * Math.random()) * speed.value, -})) - -const calculateOpacity = (scale: number, density: number): number => (scale / 6) * density * opacity.value +const smoke = computed(() => + Array.from({ length: segments.value }, (_, index) => ({ + x: (Math.random() - 0.5) * spreadX.value, + y: (Math.random() - 0.5) * spreadY.value, + scale: Math.sin((index + 1) / segments.value) * scale.value, + })), +) const { state: map } = useTexture(texture.value) @@ -111,8 +121,8 @@ const { onBeforeRender } = useLoop() onBeforeRender(() => { if (smokeRef.value && camera.activeCamera.value && groupRef.value) { - groupRef.value?.children.forEach((child: Object3D, index: number) => { - child.rotation.z += smoke[index].rotation + groupRef.value?.children.forEach((child: Object3D) => { + child.rotation.z += Math.max(0.002, 0.005 * Math.random()) * speed.value }) smokeRef.value.lookAt(camera.activeCamera.value?.position) // TODO: comment this until invalidate is back in the loop callback on v5 @@ -122,22 +132,15 @@ onBeforeRender(() => {