Fix texture request in 3d scene (#742)

geonode_mapstore_client/client/js/components/MediaViewer/Media.jsx

@@ -60,7 +60,7 @@ const mediaDefaultProps = {
     unsupported: {}
 };
 
-const Media = ({resource}) => {
+const Media = ({resource, ...props}) => {
 
     const mediaTypes = getResourceTypesInfo();
     const {
@@ -75,6 +75,7 @@ const Media = ({resource}) => {
             <MediaViewer
                 mediaType={mediaType}
                 {...mediaDefaultProps[mediaType]}
+                {...props[mediaType]}
                 description={resource.abstract}
                 id={resource.pk}
                 thumbnail={resource.thumbnail_url}

geonode_mapstore_client/client/js/components/MediaViewer/Scene3DViewer.jsx

@@ -70,7 +70,10 @@ const modelTypes = {
 
 function Scene3DViewer({
     src,
-    mediaType
+    mediaType,
+    // file from https://github.com/pmndrs/drei-assets
+    // https://polyhaven.com/a/studio_small_03
+    environmentFiles = '/static/mapstore/img/studio_small_03_1k.hdr'
 }) {
     const [boundingSphere, setBoundingSphere] = useState({
         radius: 10,
@@ -81,7 +84,7 @@ function Scene3DViewer({
         <div className="gn-media-scene-3d">
             <Suspense fallback={null}>
                 <Canvas>
-                    <Environment preset="studio" />
+                    <Environment files={environmentFiles} />
                     <Suspense fallback={<Loader />}>
                         <Model src={src} onChange={setBoundingSphere}/>
                     </Suspense>

geonode_mapstore_client/client/js/plugins/MediaViewer.jsx

@@ -24,12 +24,21 @@ const ConnectedMediaViewer = connect(
     }))
 )(MediaViewerComponent);
 
+/**
+* @module plugins/MediaViewer
+*/
 
-function MediaViewer() {
+/**
+ * Plugin for Media Viewer
+ * @name MediaViewer
+ * @prop {string} cfg.gltf.environmentFiles path to an hdr environment file for the 3d scene (format gltf)
+ * @prop {string} cfg.pcd.environmentFiles path to an hdr environment file for the 3d scene (format pcd)
+ */
+function MediaViewer(props) {
     return (
         <div
             className="gn-media-viewer">
-            <ConnectedMediaViewer />
+            <ConnectedMediaViewer {...props}/>
         </div>
     );
 }

geonode_mapstore_client/client/js/plugins/Save.jsx

@@ -40,25 +40,6 @@ import { getMessageById } from '@mapstore/framework/utils/LocaleUtils';
 /**
  * Plugin for Save modal
  * @name Save
- * @prop {object} cfg.thumbnailOptions the thumbnail is scaled based on the following configuration
- * @prop {number} cfg.thumbnailOptions.width final width of thumbnail
- * @prop {number} cfg.thumbnailOptions.height final height of thumbnail
- * @prop {string} cfg.thumbnailOptions.type type format of thumbnail 'image/jpeg' or 'image/png'
- * @prop {number} cfg.thumbnailOptions.quality image quality if type is 'image/jpeg', value between 0 and 1
- * @prop {bool} cfg.thumbnailOptions.contain if contain is true the thumbnail is contained in the width and height provided, if contain is false the image will cover the provided width and height
- * @example
- * {
- *   "name": "Save",
- *   "cfg": {
- *     "thumbnailOptions": {
- *       "width": 300,
- *       "height": 250,
- *       "type": "image/jpeg",
- *       "quality": 0.9,
- *       "contain": false
- *     }
- *   }
- * }
  */
 function Save(props) {
     return props.saving ? (<div

geonode_mapstore_client/client/js/plugins/SaveAs.jsx

@@ -43,25 +43,6 @@ import { getCurrentResourceCopyLoading } from '@js/selectors/resourceservice';
 /**
  * Plugin for SaveAs modal
  * @name SaveAs
- * @prop {object} cfg.thumbnailOptions the thumbnail is scaled based on the following configuration
- * @prop {number} cfg.thumbnailOptions.width final width of thumbnail
- * @prop {number} cfg.thumbnailOptions.height final height of thumbnail
- * @prop {string} cfg.thumbnailOptions.type type format of thumbnail 'image/jpeg' or 'image/png'
- * @prop {number} cfg.thumbnailOptions.quality image quality if type is 'image/jpeg', value between 0 and 1
- * @prop {bool} cfg.thumbnailOptions.contain if contain is true the thumbnail is contained in the width and height provided, if contain is false the image will cover the provided width and height
- * @example
- * {
- *   "name": "SaveAs",
- *   "cfg": {
- *     "thumbnailOptions": {
- *       "width": 300,
- *       "height": 250,
- *       "type": "image/jpeg",
- *       "quality": 0.9,
- *       "contain": false
- *     }
- *   }
- * }
  */
 function SaveAs({
     resources,