Usdz support (#9)

* initial pass at usdz support using 144 threejs

* add file type handling for uploads and prepare 062

* Adds changelog

blocks/three-object-block/Edit.js

@@ -68,6 +68,7 @@ export default function Edit( { attributes, setAttributes, isSelected } ) {
 	const ALLOWED_MEDIA_TYPES = [
 		'model/gltf-binary',
 		'application/octet-stream',
+		'model/vnd.usdz+zip'
 	];
 
 	const MyDropZone = () => {

blocks/three-object-block/components/ThreeObjectEdit.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import { USDZLoader } from 'three/examples/jsm/loaders/USDZLoader';
 import React, { Suspense, useRef, useState, useEffect } from 'react';
 import { Canvas, useLoader, useFrame, useThree } from '@react-three/fiber';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
@@ -14,6 +15,7 @@ import { GLTFAudioEmitterExtension } from 'three-omi';
 
 function ThreeObject( props ) {
 	const [ url, set ] = useState( props.url );
+	const {scene} = useThree();
 	useEffect( () => {
 		setTimeout( () => set( props.url ), 2000 );
 	}, [] );
@@ -23,6 +25,14 @@ function ThreeObject( props ) {
 		camera.add( listener );
 	} );
 
+	// USDZ loader.
+	if(props.url.split(/[#?]/)[0].split('.').pop().trim() === "usdz") {
+
+		const usdz = useLoader( USDZLoader, url);
+
+        return <primitive scale={[ props.scale, props.scale, props.scale ]} position={[ 0, props.positionY, 0 ]} rotation={[ 0, props.rotationY, 0 ]} object={ usdz } />;
+	}
+
 	const gltf = useLoader( GLTFLoader, url, ( loader ) => {
 		loader.register(
 			( parser ) => new GLTFAudioEmitterExtension( parser, listener )
@@ -31,10 +41,8 @@ function ThreeObject( props ) {
 
             return new VRMLoaderPlugin( parser );
 
-        } );
-
+        } );           
 	} );
-
 	const { actions } = useAnimations( gltf.animations, gltf.scene );
 
 	const animationList = props.animations ? props.animations.split( ',' ) : '';
@@ -58,6 +66,7 @@ function ThreeObject( props ) {
         vrm.scene.scale.set( props.scale, props.scale, props.scale );
         return <primitive object={ vrm.scene } />;    
     }
+
     gltf.scene.position.set( 0, props.positionY, 0 );
     gltf.scene.rotation.set( 0, props.rotationY, 0 );
     gltf.scene.scale.set( props.scale, props.scale, props.scale );

blocks/three-object-block/components/ThreeObjectFront.js

@@ -3,6 +3,7 @@ import React, { Suspense, useRef, useState, useEffect } from 'react';
 import { Canvas, useLoader, useFrame, useThree } from '@react-three/fiber';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { Physics, RigidBody } from "@react-three/rapier";
+import { USDZLoader } from 'three/examples/jsm/loaders/USDZLoader';
 
 import {
 	OrthographicCamera,
@@ -30,6 +31,14 @@ function SavedObject( props ) {
 		camera.add( listener );
 	} );
 
+	// USDZ loader.
+	if(props.url.split(/[#?]/)[0].split('.').pop().trim() === "usdz") {
+
+		const usdz = useLoader( USDZLoader, url);
+
+        return <primitive scale={[ props.scale, props.scale, props.scale ]} position={[ 0, props.positionY, 0 ]} rotation={[ 0, props.rotationY, 0 ]} object={ usdz } />;
+	}
+
 	const gltf = useLoader( GLTFLoader, url, ( loader ) => {
 		loader.register(
 			( parser ) => new GLTFAudioEmitterExtension( parser, listener )

inc/functions.php

@@ -37,41 +37,35 @@ function threeobjectviewer_enqueue_threeobjectloaderinit() {
     );
 }
 
-add_filter('upload_mimes', 'threeobjectviewer_add_file_types_to_uploads', 1, 1);
+add_filter('upload_mimes', __NAMESPACE__ . '\threeobjectviewer_add_file_types_to_uploads', 10, 4);
 /**
-* Adds glb and vrm types to allowed uploads.
+* Adds glb vrm and usdz types to allowed uploads.
 */
 function threeobjectviewer_add_file_types_to_uploads($file_types){
   $new_filetypes = array();
   // Potentially need to restore as model/gltf-binary in the future.  
   // $new_filetypes['glb'] = 'model/gltf-binary';
   $new_filetypes['glb'] = 'application/octet-stream';
   $new_filetypes['vrm'] = 'application/octet-stream';
-  $file_types = array_merge($file_types, $new_filetypes );
-  return $file_types;
+  $new_filetypes['usdz'] = 'model/vnd.usdz+zip';
+  return $new_filetypes;
 }
 
-add_filter('wp_check_filetype_and_ext', __NAMESPACE__ . '\threeobjectviewer_checkfiletypes', 10, 4);
-/**
- * Check the filetypes
- */
-function threeobjectviewer_checkfiletypes($data, $file, $filename, $mimes) {
-    if (!$data['type']) {
-        $wp_filetype = wp_check_filetype($filename, $mimes);
-        $ext = $wp_filetype['ext'];
-        $type = $wp_filetype['type'];
-        $proper_filename = $filename;
-        if ($type && 0 === strpos($type, 'model/') && $ext !== 'glb') {
-            $ext = $type = false;
-        }
-        if ($type && 0 === strpos($type, 'model/') && $ext !== 'vrm') {
-            $ext = $type = false;
-        }
-        $data['ext'] = $ext;
-        $data['type'] = $type;
-        $data['proper_filename'] = $proper_filename;
+add_filter( 'wp_check_filetype_and_ext',  __NAMESPACE__ . '\three_object_viewer_check_for_usdz', 10, 4 );
+function three_object_viewer_check_for_usdz( $types, $file, $filename, $mimes ) {
+    if ( false !== strpos( $filename, '.usdz' ) ) {
+        $types['ext']  = 'usdz';
+        $types['type'] = 'model/vnd.usdz+zip';
+    }
+    if ( false !== strpos( $filename, '.glb' ) ) {
+        $types['ext']  = 'glb';
+        $types['type'] = 'application/octet-stream';
+    }
+    if ( false !== strpos( $filename, '.vrm' ) ) {
+        $types['ext']  = 'vrm';
+        $types['type'] = 'application/octet-stream';
     }
-    return $data;
+    return $types;
 }
 
 add_action('wp_enqueue_scripts', __NAMESPACE__ . '\threeobjectviewer_frontend_assets');

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@antpb/three-object-viewer",
     "private": true,
-    "version": "0.6.0",
+    "version": "0.6.2",
     "license": "GPL-2.0-or-later",
     "main": "build/index.js",
     "scripts": {
@@ -30,7 +30,7 @@
         "@wordpress/components": "^14",
         "@wordpress/element": "^3",
         "@wordpress/i18n": "^4",
-        "three": "^0.137.2",
+        "three": "0.144.0",
         "three-omi": "^0.1.5"
     }
 }

readme.txt

@@ -2,7 +2,7 @@
 Requires at least: 5.7
 Tested up to: 6.0
 Requires PHP: 7.2
-Stable tag: 0.6.1
+Stable tag: 0.6.2
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Author: antpb
@@ -44,6 +44,12 @@ It can also be installed manually using a zip file.
 
 == Changelog ==
 
+= 0.6.2 =
+
+*  Adds USDZ support to block (note, usdz files must not contain usdc files)
+*  Updates Three.js to 144
+*  Allows uploads of usdz files
+
 = 0.6.1 =
 
 *  Update rigibody types for vr objects. Sorry for the bouncy files! :)

three-object-viewer.php

@@ -3,7 +3,7 @@
 * Plugin Name: Three Object Viewer
 * Plugin URI: https://3ov.xyz/
 * Description: A plugin for viewing 3D files with support for WebXR and Open Metaverse Interoperability GLTF Extensions.
-* Version: 0.6.1
+* Version: 0.6.2
 * Requires at least: 5.7
 * Requires PHP:      7.1.0
 * Author:            antpb

yarn.lock

@@ -11220,10 +11220,10 @@ three-stdlib@^2.8.6, three-stdlib@^2.8.9:
     potpack "^1.0.1"
     zstddec "^0.0.2"
 
-three@^0.137.2:
-  version "0.137.5"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.137.5.tgz#a1e34bedd0412f2d8797112973dfadac78022ce6"
-  integrity sha512-rTyr+HDFxjnN8+N/guZjDgfVxgHptZQpf6xfL/Mo7a5JYIFwK6tAq3bzxYYB4Ae0RosDZlDuP+X5aXDXz+XnHQ==
+three@0.144.0:
+  version "0.144.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.144.0.tgz#2818517169f8ff94eea5f664f6ff1fcdcd436cc8"
+  integrity sha512-R8AXPuqfjfRJKkYoTQcTK7A6i3AdO9++2n8ubya/GTU+fEHhYKu1ZooRSCPkx69jbnzT7dD/xEo6eROQTt2lJw==
 
 throat@^5.0.0:
   version "5.0.0"