From 5cdaddff226ff9b79a5e201969183a6bdc785c0b Mon Sep 17 00:00:00 2001 From: andretchen0 Date: Mon, 25 Nov 2024 03:45:29 -0600 Subject: [PATCH 1/3] fix(docs): remove Environment demo, fix links - Github links to images were bringing up a 404. - `useProgress` does not appear to work if multiple demos are on a single page. --- .../theme/components/EnvironmentDemo.vue | 7 +- docs/guide/staging/environment.md | 225 +++++++++--------- 2 files changed, 112 insertions(+), 120 deletions(-) diff --git a/docs/.vitepress/theme/components/EnvironmentDemo.vue b/docs/.vitepress/theme/components/EnvironmentDemo.vue index 79ad4b66a..3132739fa 100644 --- a/docs/.vitepress/theme/components/EnvironmentDemo.vue +++ b/docs/.vitepress/theme/components/EnvironmentDemo.vue @@ -64,13 +64,8 @@ const { progress, hasFinishLoading } = await useProgress() :background="background.value" :files="environmentFiles" :blur="blur.value" - path="https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap" + path="https://raw.githubusercontent.com/Tresjs/assets/refs/heads/main/textures/environmentMap/" /> - - - - -Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`, - -It uses the composable [useEnvironment](/guide/staging/use-environment) under the hood to load the cubemap. - -## Usage - -```vue - - - -``` - -You can also pass the `.hdr` file directly: - -```vue - - - -``` - -![Environment](/cientos/envmaps.png) - -## Texture reference - -You can access the model reference by pasing a `ref` to the `` prop and then using the method `getTexture()` to get the object. - -```vue{4,6,9,14,17} - - - -``` - -## Presets - -You can use one of the available presets by passing the `preset` prop: - -```html - -``` - - - - - -## Lightformer - -You can incorporate `Lightformer` into the environment just like a slot. - -```html - - - -``` - -### Props for Lightformer - -Lightformer inherits from mesh, and its extension parameters include: -| Prop | Description | Default | -| :----------- | :------------------------------------------------------------------- | -------------------------------------------------------------------------------- | -| `from` | 'circle' , 'ring' , 'rect' , any:other Mesh.The type of Lightformer | `rect` | -| `intensity` | number : the intensity of the light. | 1 | -| `color` | the color of the light. | `0xffffff` | -| `args` | the arguments of the Geometry | When using other geometries, set the corresponding arguments. | - -## Props - -| Prop | Description | Default | -| :----------- | :-------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | -| `files` | Array of 6 urls to images, one for each side of the CubeTexture. or and HDR | `undefined` | -| `path` | Path to the environment map files. | `undefined` | -| `encoding` | Encoding of the environment map. | `SRGBColorSpace` for an array of files and `LinearEncoding` for a single texture | -| `background` | If `true`, the environment map will be used as the scene background. | `false` | -| `blur` | Blur factor between 0 and 1. (only works with three 0.146 and up) | 0 | -| `preset` | Preset environment map. | `undefined` | -| `resolution` | The resolution of the WebGLCubeRenderTarget. | 256 | -| `near` | The near of the CubeCamera. | 1 | -| `far` | The far of the CubeCamera. | 1000 | -| `frames` | The frames of the cubeCamera.update. | Infinity | +# Environment + + + + + +Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`, + +It uses the composable [useEnvironment](/guide/staging/use-environment) under the hood to load the cubemap. + +## Usage + +```vue + + + +``` + +You can also pass the `.hdr` file directly: + +```vue + + + +``` + +![Environment](/cientos/envmaps.png) + +## Texture reference + +You can access the model reference by pasing a `ref` to the `` prop and then using the method `getTexture()` to get the object. + +```vue{4,6,9,14,17} + + + +``` + +## Presets + +You can use one of the available presets by passing the `preset` prop: + +```html + +``` + +## Lightformer + +You can incorporate `Lightformer` into the environment just like a slot. + +```html + + + + +``` + +### Props for Lightformer + +Lightformer inherits from mesh, and its extension parameters include: +| Prop | Description | Default | +| :----------- | :------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| `from` | 'circle' , 'ring' , 'rect' , any:other Mesh.The type of Lightformer | `rect` | +| `intensity` | number : the intensity of the light. | 1 | +| `color` | the color of the light. | `0xffffff` | +| `args` | the arguments of the Geometry | When using other geometries, set the corresponding arguments. | + +## Props + +| Prop | Description | Default | +| :----------- | :-------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| `files` | Array of 6 urls to images, one for each side of the CubeTexture. or and HDR | `undefined` | +| `path` | Path to the environment map files. | `undefined` | +| `encoding` | Encoding of the environment map. | `SRGBColorSpace` for an array of files and `LinearEncoding` for a single texture | +| `background` | If `true`, the environment map will be used as the scene background. | `false` | +| `blur` | Blur factor between 0 and 1. (only works with three 0.146 and up) | 0 | +| `preset` | Preset environment map. | `undefined` | +| `resolution` | The resolution of the WebGLCubeRenderTarget. | 256 | +| `near` | The near of the CubeCamera. | 1 | +| `far` | The far of the CubeCamera. | 1000 | +| `frames` | The frames of the cubeCamera.update. | Infinity | From f6ff72f73ca6cfb92fcd70742bcc492f0cc15143 Mon Sep 17 00:00:00 2001 From: andretchen0 Date: Mon, 25 Nov 2024 03:49:58 -0600 Subject: [PATCH 2/3] chore: lint --- docs/guide/staging/environment.md | 221 +++++++++++++++--------------- 1 file changed, 110 insertions(+), 111 deletions(-) diff --git a/docs/guide/staging/environment.md b/docs/guide/staging/environment.md index 1ab6a680c..8ab59402e 100644 --- a/docs/guide/staging/environment.md +++ b/docs/guide/staging/environment.md @@ -1,111 +1,110 @@ -# Environment - - - - - -Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`, - -It uses the composable [useEnvironment](/guide/staging/use-environment) under the hood to load the cubemap. - -## Usage - -```vue - - - -``` - -You can also pass the `.hdr` file directly: - -```vue - - - -``` - -![Environment](/cientos/envmaps.png) - -## Texture reference - -You can access the model reference by pasing a `ref` to the `` prop and then using the method `getTexture()` to get the object. - -```vue{4,6,9,14,17} - - - -``` - -## Presets - -You can use one of the available presets by passing the `preset` prop: - -```html - -``` - -## Lightformer - -You can incorporate `Lightformer` into the environment just like a slot. - -```html - - - - -``` - -### Props for Lightformer - -Lightformer inherits from mesh, and its extension parameters include: -| Prop | Description | Default | -| :----------- | :------------------------------------------------------------------- | -------------------------------------------------------------------------------- | -| `from` | 'circle' , 'ring' , 'rect' , any:other Mesh.The type of Lightformer | `rect` | -| `intensity` | number : the intensity of the light. | 1 | -| `color` | the color of the light. | `0xffffff` | -| `args` | the arguments of the Geometry | When using other geometries, set the corresponding arguments. | - -## Props - -| Prop | Description | Default | -| :----------- | :-------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | -| `files` | Array of 6 urls to images, one for each side of the CubeTexture. or and HDR | `undefined` | -| `path` | Path to the environment map files. | `undefined` | -| `encoding` | Encoding of the environment map. | `SRGBColorSpace` for an array of files and `LinearEncoding` for a single texture | -| `background` | If `true`, the environment map will be used as the scene background. | `false` | -| `blur` | Blur factor between 0 and 1. (only works with three 0.146 and up) | 0 | -| `preset` | Preset environment map. | `undefined` | -| `resolution` | The resolution of the WebGLCubeRenderTarget. | 256 | -| `near` | The near of the CubeCamera. | 1 | -| `far` | The far of the CubeCamera. | 1000 | -| `frames` | The frames of the cubeCamera.update. | Infinity | +# Environment + + + + + +Is a component abstraction that automatically sets up a global cubemap, which affects the default `scene.environment`, and optionally `scene.background`, + +It uses the composable [useEnvironment](/guide/staging/use-environment) under the hood to load the cubemap. + +## Usage + +```vue + + + +``` + +You can also pass the `.hdr` file directly: + +```vue + + + +``` + +![Environment](/cientos/envmaps.png) + +## Texture reference + +You can access the model reference by pasing a `ref` to the `` prop and then using the method `getTexture()` to get the object. + +```vue{4,6,9,14,17} + + + +``` + +## Presets + +You can use one of the available presets by passing the `preset` prop: + +```html + +``` + +## Lightformer + +You can incorporate `Lightformer` into the environment just like a slot. + +```html + + + +``` + +### Props for Lightformer + +Lightformer inherits from mesh, and its extension parameters include: +| Prop | Description | Default | +| :----------- | :------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| `from` | 'circle' , 'ring' , 'rect' , any:other Mesh.The type of Lightformer | `rect` | +| `intensity` | number : the intensity of the light. | 1 | +| `color` | the color of the light. | `0xffffff` | +| `args` | the arguments of the Geometry | When using other geometries, set the corresponding arguments. | + +## Props + +| Prop | Description | Default | +| :----------- | :-------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| `files` | Array of 6 urls to images, one for each side of the CubeTexture. or and HDR | `undefined` | +| `path` | Path to the environment map files. | `undefined` | +| `encoding` | Encoding of the environment map. | `SRGBColorSpace` for an array of files and `LinearEncoding` for a single texture | +| `background` | If `true`, the environment map will be used as the scene background. | `false` | +| `blur` | Blur factor between 0 and 1. (only works with three 0.146 and up) | 0 | +| `preset` | Preset environment map. | `undefined` | +| `resolution` | The resolution of the WebGLCubeRenderTarget. | 256 | +| `near` | The near of the CubeCamera. | 1 | +| `far` | The far of the CubeCamera. | 1000 | +| `frames` | The frames of the cubeCamera.update. | Infinity | From bf115e2de878d9b8e396783b6c32600191826522 Mon Sep 17 00:00:00 2001 From: andretchen0 Date: Mon, 25 Nov 2024 03:53:50 -0600 Subject: [PATCH 3/3] docs: revert environment path --- docs/.vitepress/theme/components/EnvironmentDemo.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.vitepress/theme/components/EnvironmentDemo.vue b/docs/.vitepress/theme/components/EnvironmentDemo.vue index 3132739fa..40806edb7 100644 --- a/docs/.vitepress/theme/components/EnvironmentDemo.vue +++ b/docs/.vitepress/theme/components/EnvironmentDemo.vue @@ -64,7 +64,7 @@ const { progress, hasFinishLoading } = await useProgress() :background="background.value" :files="environmentFiles" :blur="blur.value" - path="https://raw.githubusercontent.com/Tresjs/assets/refs/heads/main/textures/environmentMap/" + path="https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap" />