p2pcf Networking + Core blocks + Character Controller + Kitchen Sink

.eslintrc

@@ -0,0 +1,4 @@
+{
+    "extends": [ "plugin:@wordpress/eslint-plugin/recommended" ]
+}
+

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "none"
+}
+

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
+  "editor.codeActionsOnSave": {
+	"source.fixAll": true
+	},
+}

admin/three-object-viewer-settings/App.js

@@ -8,7 +8,7 @@ import {
 	useAnimations,
 } from '@react-three/drei';
 import * as THREE from 'three';
-import defaultAikonaut from '../../inc/avatars/mummy.vrm';
+import defaultProfileVRM from '../../inc/avatars/3ov_default_avatar.vrm';
 
 function SavedObject( props ) {
 	const [ url, set ] = useState( props.url );
@@ -20,7 +20,7 @@ function SavedObject( props ) {
 	useThree( ( { camera } ) => {
 		camera.add( listener );
 	} );
-	const fallbackURL = threeObjectPlugin + defaultAikonaut;
+	const fallbackURL = threeObjectPlugin + defaultProfileVRM;
 	const playerURL = props.url ? props.url : fallbackURL;
 
 	const someSceneState = useLoader( GLTFLoader, playerURL, ( loader ) => {
@@ -40,6 +40,25 @@ function SavedObject( props ) {
 	}
 }
 
+function CreateImage() {
+	const { gl, scene, camera } = useThree()
+	let getImageData = true;
+	if(gl){
+		if(getImageData == true) {
+			window.setTimeout(function () {
+				const url = gl.domElement.toDataURL();
+				const link = document.getElementById('download');
+
+				// const link = document.createElement('a');
+				link.setAttribute('href', url);
+				link.setAttribute('target', '_blank');
+				link.setAttribute('download', "download the scene image");	
+			}, 200);
+			getImageData = false;
+		}
+	}
+}
+
 //Main component for admin page app
 export default function App({ getSettings, updateSettings }) {
 
@@ -87,7 +106,6 @@ export default function App({ getSettings, updateSettings }) {
 
 			// Get media attachment details from the frame state
 			var attachment = frame.state().get('selection').first().toJSON();
-			// console.log(attachment);
 			setDefaultVRM(attachment.url);
 			// Send the attachment URL to our custom image input field.
 		  });
@@ -108,22 +126,25 @@ export default function App({ getSettings, updateSettings }) {
 			<div>
 				<h2>Three Object Viewer Settings</h2>
 			</div>
+			<div><a id="download">download the thing</a></div>
 			<div>
 				<h3>Avatar and World Defaults</h3>
 				<p>This avatar will be used for guest visitors or logged in users that have not set their main avatar in the user profile page.</p>
 			</div>
 			<div>
 				<label htmlFor="defaultVRM"><b>Default VRM: </b></label>
 				<Canvas
-          			camera={ { fov: 40, position: [0, 0, 10], zoom: 1} }
+           			camera={ { fov: 40, position: [0, 0, 10], zoom: 1} }
+					gl={{ preserveDrawingBuffer: true }}
 					shadowMap
 					style={ {
 						backgroundColor: '#6a737c',
 						margin: '0',
 						height: '450px',
 						width: '40%',
 					} }
-				>
+				>				
+					<CreateImage/>
 					<ambientLight intensity={ 0.5 } />
 					<directionalLight
 						intensity={ 0.6 }