Fully Removes Deprecated <EnvAtlas/> component (#247)

* refactor: remove deprecated EnvAtlas component and update references to Environment component

* chore: fully remove deprecated <EnvAtlas/> component

* Update packages/docs/templates/HomePageExample.jsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* refactor: replace EnvAtlas component with Environment component and update related imports

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: marklundin

.changeset/green-llamas-repeat.md

@@ -0,0 +1,5 @@
+---
+"@playcanvas/react": minor
+---
+
+Fully removes the deprecated <EnvAtlas/> component

packages/docs/client-mdx-components.js

@@ -1,6 +1,6 @@
 import { Application, Entity } from '@playcanvas/react'
 import { OrbitControls } from '@playcanvas/react/scripts'
-import { Align, Light, Anim, Camera, Collision, EnvAtlas, GSplat, Script, Render, RigidBody, Environment } from '@playcanvas/react/components'
+import { Align, Light, Anim, Camera, Collision, GSplat, Script, Render, RigidBody, Environment } from '@playcanvas/react/components'
 
 import ReactQueryProvider from '@docs-components/ReactQueryProvider'
 
@@ -21,7 +21,7 @@ export const defaultComponents = {
     ReactQueryProvider,
     Application,
     Entity,
-    Align, Anim, Camera, Collision, EnvAtlas, GSplat, Script, Render, RigidBody, Light, Environment,
+    Align, Anim, Camera, Collision, GSplat, Script, Render, RigidBody, Light, Environment,
     OrbitControls,
     EnvAtlasComponent,
     Grid,

packages/docs/components/EnvAtlas.tsx

@@ -1,12 +1,10 @@
 "use client";
 
-import { FC/*, useLayoutEffect */ } from "react";
+import React, { FC, ComponentProps } from "react";
 import { useEnvAtlas } from "./hooks/use-asset";
-import type { Asset } from "playcanvas";
-import { EnvAtlas } from "@playcanvas/react/components";
-// import { useApp } from "@playcanvas/react/hooks";
+import { Environment } from "@playcanvas/react/components";
 
-type EnvAtlasComponentsProps = {
+type EnvAtlasComponentsProps = ComponentProps<typeof Environment> & {
     src: string;
     intensity?: number;
 }
@@ -19,7 +17,7 @@ type EnvAtlasComponentsProps = {
 
     const { data } = useEnvAtlas(src);
 
-    return <EnvAtlas asset={data as Asset} {...props} skyboxIntensity={intensity} showSkybox={false}/>
+    return <Environment envAtlas={data} {...props} skyboxIntensity={intensity} showSkybox={false}/>
 
 }
 

packages/docs/content/docs/api/components/envatlas.mdx

@@ -163,10 +163,11 @@ See the [useMaterial](/docs/api/hooks/use-asset/useMaterial) hook and [Render](/
 
 ## useEnvAtlas
 
-A specialized hook for loading environment atlas textures. Pass the source URL of the texture file and any additional properties to pass to the asset loader and use the resulting asset in the [`<EnvAtlas/>`](/docs/api/components/EnvAtlas) component.
+A specialized hook for loading environment atlas textures. Pass the source URL of the texture file and any additional properties to pass to the asset loader and use the resulting asset in the [`<Environment/>`](/docs/api/components/Environment) component.
 
 ```tsx copy filename="render-env-atlas.tsx"
 import { useEnvAtlas } from '@playcanvas/react/hooks';
+import { Environment } from '@playcanvas/react/components';
 
 export function RenderEnvAtlas() {
   const { asset, loading, error } = useEnvAtlas('env.jpg');
@@ -175,7 +176,7 @@ export function RenderEnvAtlas() {
   if (error) return <ErrorMessage message={error} />;
   if (!asset) return null;
 
-  return <EnvAtlas asset={asset} />;
+  return <Environment envAtlas={asset} />;
 }
 ```
 

packages/docs/content/docs/api/hooks/use-asset.mdx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Container, Entity } from '@playcanvas/react';
-import { Camera, EnvAtlas } from '@playcanvas/react/components';
+import { Camera, Environment } from '@playcanvas/react/components';
 import { OrbitControls } from '@playcanvas/react/scripts';
 
 import { useEnvAtlas, useModel } from '@components/hooks/use-asset';
@@ -12,11 +12,11 @@ import ShadowCatcher from '@components/ShadowCatcher';
 
 const Example = () => {
 
-    const { data: envMap } = useEnvAtlas('/environment-map.png');
+    const { data: envAtlas } = useEnvAtlas('/environment-map.png');
     const { data: model } = useModel('/lamborghini_vision_gt.glb');
 
     return (<Entity>
-        <EnvAtlas asset={envMap} skyboxIntensity={1.2} showSkybox={false} />
+        { envAtlas && <Environment envAtlas={envAtlas} showSkybox={false}/> }
         <Grid />
         <ShadowCatcher width={5} depth={5} />
         <Entity name='camera' position={[4, 1, 4]}>

packages/docs/templates/HomePageExample.jsx

@@ -1,6 +1,5 @@
 "use client"
 
-export { EnvAtlas } from './EnvAtlas.tsx'
 export { Camera } from './Camera.tsx'
 export { GSplat } from './GSplat.tsx'
 export { Light } from './Light.tsx'

packages/lib/src/components/EnvAtlas.tsx

@@ -229,7 +229,7 @@ export const useTexture = (
  * if (error) return <ErrorMessage message={error} />;
  * if (!asset) return null;
  * 
- * return <EnvAtlas asset={asset} />;
+ * return <Environment envAtlas={asset} />;
  * ```
  */
 export const useEnvAtlas = (