-
{ settings.enabled ? 'Enabled' : 'Not enabled' }
-
-
- {
- setSettings( {
- ...settings,
- enabled: ! settings.enabled,
- } );
- } }
- />
-
-
-
-
-
-
+
+
Three Object Viewer Settings
+
+
+
Avatar and World Defaults
+
This avatar will be used for guest visitors or logged in users that have not set their main avatar in the user profile page.
+
+
+
+
+
+ { defaultVRM && defaultVRM }
+
+
+
+
+
Network Settings
+
+
+
Network Settings
+
+
+ {
+ setSettings({ ...settings, enabled: !settings.enabled });
+ }}
+ />
+
+
+
{
+ setSettings({ ...settings, networkWorker: !settings.networkWorker });
+ }}
+ />
+
+
+
+
+
+
+ <>
+
+
+ { attributes.deviceTarget }
+
+
+ { attributes.threeObjectUrl }
+
+
{ attributes.scale }
+
+ { attributes.bg_color }
+
+
{ attributes.zoom }
+
+ { attributes.hasZoom ? 1 : 0 }
+
+
+ { attributes.hasTip ? 1 : 0 }
+
+
+ { attributes.positionY }
+
+
+ { attributes.rotationY }
+
+
{ attributes.scale }
+
+ { attributes.animations }
+
+
+
+
+
Click and drag ^
+ ) : (
+
+ ) }
+
+ );
+ }
+}
diff --git a/blocks/environment/components/TeleportTravel.js b/blocks/environment/components/TeleportTravel.js
new file mode 100644
index 0000000..3c0b646
--- /dev/null
+++ b/blocks/environment/components/TeleportTravel.js
@@ -0,0 +1,103 @@
+import { Raycaster, Vector3 } from 'three';
+import { useXR, Interactive } from '@react-three/xr';
+import { useFrame } from '@react-three/fiber';
+import { useCallback, useRef, useState } from 'react';
+
+export function TeleportIndicator( props ) {
+ return (
+ <>
+
+
+
+
+
+
+ );
+}
+
+export default function TeleportTravel( props ) {
+ const {
+ centerOnTeleport,
+ Indicator = TeleportIndicator,
+ useNormal = true,
+ } = props;
+ const [ isHovered, setIsHovered ] = useState( false );
+ const target = useRef();
+ const targetLoc = useRef();
+ const ray = useRef( new Raycaster() );
+
+ const rayDir = useRef( {
+ pos: new Vector3(),
+ dir: new Vector3(),
+ } );
+
+ const { controllers, player } = useXR();
+
+ useFrame( () => {
+ if (
+ isHovered &&
+ controllers.length > 0 &&
+ ray.current &&
+ target.current &&
+ targetLoc.current
+ ) {
+ controllers[ 0 ].controller.getWorldDirection( rayDir.current.dir );
+ controllers[ 0 ].controller.getWorldPosition( rayDir.current.pos );
+ rayDir.current.dir.multiplyScalar( -1 );
+ ray.current.set( rayDir.current.pos, rayDir.current.dir );
+
+ const [ intersection ] = ray.current.intersectObject(
+ target.current
+ );
+
+ if ( intersection ) {
+ if ( useNormal ) {
+ const p = intersection.point;
+
+ targetLoc.current.position.set( 0, 0, 0 );
+
+ const n = intersection.face.normal.clone();
+ n.transformDirection( intersection.object.matrixWorld );
+
+ targetLoc.current.lookAt( n );
+ targetLoc.current.rotateOnAxis(
+ new Vector3( 1, 0, 0 ),
+ Math.PI / 2
+ );
+ targetLoc.current.position.copy( p );
+ } else {
+ targetLoc.current.position.copy( intersection.point );
+ }
+ }
+ }
+ } );
+
+ const click = useCallback( () => {
+ if ( isHovered ) {
+ player.position.copy( targetLoc.current.position );
+ }
+ }, [ centerOnTeleport, isHovered, useNormal ] );
+
+ return (
+ <>
+ { isHovered && (
+
+
+
+ ) }
+ setIsHovered( true ) }
+ onBlur={ () => setIsHovered( false ) }
+ >
+ { props.children }
+
+
+ );
+}
diff --git a/blocks/environment/components/ThreeObjectEdit.js b/blocks/environment/components/ThreeObjectEdit.js
new file mode 100644
index 0000000..2ae77f2
--- /dev/null
+++ b/blocks/environment/components/ThreeObjectEdit.js
@@ -0,0 +1,101 @@
+import * as THREE from 'three';
+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 {
+ PerspectiveCamera,
+ OrbitControls,
+ useAnimations,
+} from '@react-three/drei';
+import { VRMUtils, VRMLoaderPlugin } from '@pixiv/three-vrm'
+import { GLTFAudioEmitterExtension } from 'three-omi';
+
+function ThreeObject( props ) {
+ const [ url, set ] = useState( props.url );
+ useEffect( () => {
+ setTimeout( () => set( props.url ), 2000 );
+ }, [] );
+ const [ listener ] = useState( () => new THREE.AudioListener() );
+
+ useThree( ( { camera } ) => {
+ camera.add( listener );
+ } );
+
+ const gltf = useLoader( GLTFLoader, url, ( loader ) => {
+ loader.register(
+ ( parser ) => new GLTFAudioEmitterExtension( parser, listener )
+ );
+ loader.register( ( parser ) => {
+
+ return new VRMLoaderPlugin( parser );
+
+ } );
+
+ } );
+
+ const { actions } = useAnimations( gltf.animations, gltf.scene );
+
+ const animationList = props.animations ? props.animations.split( ',' ) : '';
+
+ useEffect( () => {
+ if ( animationList ) {
+ animationList.forEach( ( name ) => {
+ if ( Object.keys( actions ).includes( name ) ) {
+ actions[ name ].play();
+ }
+ } );
+ }
+ }, [] );
+
+ if(gltf?.userData?.gltfExtensions?.VRM){
+ const vrm = gltf.userData.vrm;
+ vrm.scene.position.set( 0, props.positionY, 0 );
+ VRMUtils.rotateVRM0( vrm );
+ const rotationVRM = vrm.scene.rotation.y + parseFloat(props.rotationY);
+ vrm.scene.rotation.set( 0, rotationVRM, 0 );
+ vrm.scene.scale.set( props.scale, props.scale, props.scale );
+ return ;
+ }
+ 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 );
+ return ;
+}
+
+export default function ThreeObjectEdit( props ) {
+ return (
+ <>
+
+
+ );
+}
diff --git a/blocks/environment/editor.scss b/blocks/environment/editor.scss
new file mode 100644
index 0000000..a41c19e
--- /dev/null
+++ b/blocks/environment/editor.scss
@@ -0,0 +1,48 @@
+
+ .wp-block-three-object-block {
+ border: 1px dotted #f00;
+}
+ .glb-preview-container {
+ padding: 100px;
+ text-align: center;
+ align-items: center;
+ align-content: center;
+ background-color:#f2f2f2;
+ }
+
+ .glb-preview-container button{
+ padding: 15px;
+ border-radius: 30px;
+}
+
+.three-object-viewer-button {
+ background-color:rgb(199, 254, 0);
+ color: black;
+ border: solid 1.5px black;
+}
+
+.glb-preview-container button:hover{
+ border-radius: 30px;
+ background-color:rgb(156, 199, 0);
+ cursor: pointer;
+}
+.three-object-block-tip {
+ overflow-wrap: break-word;
+ background-color: black;
+ color: white;
+ padding: 10px;
+ font-weight: 500;
+ max-width: 160px;
+ font-size: 12px;
+ margin-top: 0px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.three-object-block-url-input {
+ padding-bottom: 20px;
+}
+
+.three-object-block-url-input input{
+ height: 40px;
+}
diff --git a/blocks/environment/frontend.js b/blocks/environment/frontend.js
new file mode 100644
index 0000000..0a4c388
--- /dev/null
+++ b/blocks/environment/frontend.js
@@ -0,0 +1,72 @@
+const { Component, render } = wp.element;
+
+import EnvironmentFront from './components/EnvironmentFront';
+
+const threeApp = document.querySelectorAll( '.three-object-three-app-environment' );
+const modelsToAdd = document.querySelectorAll( '.three-object-three-app-model-block' );
+const sky = document.querySelectorAll( '.three-object-three-app-sky-block' );
+const imagesToAdd = document.querySelectorAll( '.three-object-three-app-image-block' );
+const videosToAdd = document.querySelectorAll( '.three-object-three-app-video-block' );
+
+threeApp.forEach( ( threeApp ) => {
+ if ( threeApp ) {
+ const threeUrl = threeApp.querySelector( 'p.three-object-block-url' )
+ ? threeApp.querySelector( 'p.three-object-block-url' ).innerText
+ : '';
+ const deviceTarget = threeApp.querySelector(
+ 'p.three-object-block-device-target'
+ )
+ ? threeApp.querySelector( 'p.three-object-block-device-target' )
+ .innerText
+ : '2D';
+ const backgroundColor = threeApp.querySelector(
+ 'p.three-object-background-color'
+ )
+ ? threeApp.querySelector( 'p.three-object-background-color' ).innerText
+ : '#ffffff';
+ const zoom = threeApp.querySelector( 'p.three-object-zoom' )
+ ? threeApp.querySelector( 'p.three-object-zoom' ).innerText
+ : 90;
+ const scale = threeApp.querySelector( 'p.three-object-scale' )
+ ? threeApp.querySelector( 'p.three-object-scale' ).innerText
+ : 1;
+ const hasZoom = threeApp.querySelector( 'p.three-object-has-zoom' )
+ ? threeApp.querySelector( 'p.three-object-has-zoom' ).innerText
+ : false;
+ const hasTip = threeApp.querySelector( 'p.three-object-has-tip' )
+ ? threeApp.querySelector( 'p.three-object-has-tip' ).innerText
+ : true;
+ const positionY = threeApp.querySelector( 'p.three-object-position-y' )
+ ? threeApp.querySelector( 'p.three-object-position-y' ).innerText
+ : 0;
+ const rotationY = threeApp.querySelector( 'p.three-object-rotation-y' )
+ ? threeApp.querySelector( 'p.three-object-rotation-y' ).innerText
+ : 0;
+ const animations = threeApp.querySelector( 'p.three-object-animations' )
+ ? threeApp.querySelector( 'p.three-object-animations' ).innerText
+ : '';
+
+ render(
+ ,
+ threeApp
+ );
+ }
+} );
+
+
diff --git a/blocks/environment/index.js b/blocks/environment/index.js
new file mode 100644
index 0000000..22b14b6
--- /dev/null
+++ b/blocks/environment/index.js
@@ -0,0 +1,197 @@
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './Edit';
+import Save from './Save';
+import { useBlockProps } from '@wordpress/block-editor';
+
+const icon = (
+
+);
+
+const blockConfig = require( './block.json' );
+registerBlockType( blockConfig.name, {
+ ...blockConfig,
+ icon: icon,
+ apiVersion: 2,
+ edit: Edit,
+ save: Save,
+ deprecated: [
+ {
+ attributes: {
+ bg_color: {
+ type: 'string',
+ default: '#FFFFFF',
+ },
+ zoom: {
+ type: 'integer',
+ default: 90,
+ },
+ scale: {
+ type: 'integer',
+ default: 1,
+ },
+ positionX: {
+ type: 'integer',
+ default: 0,
+ },
+ positionY: {
+ type: 'integer',
+ default: 0,
+ },
+ rotationY: {
+ type: 'integer',
+ default: 0,
+ },
+ threeObjectUrl: {
+ type: 'string',
+ default: null,
+ },
+ hasZoom: {
+ type: 'bool',
+ default: false,
+ },
+ hasTip: {
+ type: 'bool',
+ default: true,
+ },
+ deviceTarget: {
+ type: 'string',
+ default: '2d',
+ },
+ },
+ save( props ) {
+ return (
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
+ { props.attributes.scale }
+
+
+ { props.attributes.bg_color }
+
+
+ { props.attributes.zoom }
+
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
+ { props.attributes.scale }
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
{ props.attributes.scale }
+
+ { props.attributes.bg_color }
+
+
{ props.attributes.zoom }
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
{ props.attributes.scale }
+
+ { props.attributes.animations }
+
+
+
+
+ { hasDropped ? 'Dropped!' : 'Drop a glb here or' }
+
+ mediaUpload( {
+ allowedTypes: ALLOWED_MEDIA_TYPES,
+ filesList: files,
+ onFileChange: ( [ images ] ) => {
+ onImageSelect( images );
+ },
+ } )
+ }
+ />
+
+ );
+ };
+
+ function handleClick(objectURL){
+ if(objectURL){
+ console.log("success good job", objectURL);
+ onImageSelect(objectURL);
+ }
+ console.log("fail", objectURL);
+ }
+
+
+ return (
+
+
+
+
+
+
+ select a glb file from your media library to
+ render an object in the canvas:
+
+
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ label="GLB File"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.threeObjectUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+
+
+ {
+ onChangeCollidable( e );
+ } }
+ />
+
+
+
+ onChangeAnimations( value )
+ }
+ />
+
+
+
+
+
+
+ onChangePositionX( value )
+ }
+ />
+
+ onChangePositionY( value )
+ }
+ />
+
+ onChangePositionZ( value )
+ }
+ />
+
+
+
+
+
+
+ onChangeRotationX( value )
+ }
+ />
+
+ onChangeRotationY( value )
+ }
+ />
+
+ onChangeRotationZ( value )
+ }
+ />
+
+
+
+
+
+
+ onChangeScaleX( value )
+ }
+ />
+
+ onChangeScaleY( value )
+ }
+ />
+
+ onChangeScaleZ( value )
+ }
+ />
+
+
+
+
+ { isSelected ? (
+ <>
+ { attributes.threeObjectUrl ? (
+
+ ) : (
+
+
+
+
+
+ Select a glb file to render in the canvas:
+
+ {/*
+ setEnteredURL(e.target.value)}>
+
+
*/}
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.threeObjectUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+ ) }
+
+ ) : (
+ <>
+ { attributes.threeObjectUrl ? (
+
+ ) : (
+
+
+
+
+ Select a glb file to render in the canvas:
+
+ {/*
+ console.log(e.target.value) && setEnteredURL(e.target.value)}>
+
+
*/}
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.threeObjectUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+ ) }
+
+ ) }
+
+ <>
+
+
+ { attributes.threeObjectUrl }
+
+
{ attributes.scaleX }
+
{ attributes.scaleY }
+
{ attributes.scaleZ }
+
{ attributes.positionX }
+
{ attributes.positionY }
+
{ attributes.positionZ }
+
{ attributes.rotationX }
+
{ attributes.rotationY }
+
{ attributes.rotationZ }
+
+ { attributes.animations }
+
+
+
+
Click and drag ^
+ ) }
+
+ );
+}
diff --git a/blocks/model-block/editor.scss b/blocks/model-block/editor.scss
new file mode 100644
index 0000000..9ed5c19
--- /dev/null
+++ b/blocks/model-block/editor.scss
@@ -0,0 +1,55 @@
+
+ .wp-block-three-object-block {
+ border: 1px dotted #f00;
+}
+ .glb-preview-container {
+ padding: 100px;
+ text-align: center;
+ align-items: center;
+ align-content: center;
+ background-color:#f2f2f2;
+ }
+
+ .glb-preview-container button{
+ padding: 15px;
+ border-radius: 30px;
+}
+
+.three-object-viewer-button {
+ background-color:rgb(199, 254, 0);
+ color: black;
+ border: solid 1.5px black;
+}
+
+.glb-preview-container button:hover{
+ border-radius: 30px;
+ background-color:rgb(156, 199, 0);
+ cursor: pointer;
+}
+.three-object-block-tip {
+ overflow-wrap: break-word;
+ background-color: black;
+ color: white;
+ padding: 10px;
+ font-weight: 500;
+ max-width: 160px;
+ font-size: 12px;
+ margin-top: 0px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.three-object-block-url-input {
+ padding-bottom: 20px;
+}
+
+.three-object-block-url-input input{
+ height: 40px;
+}
+
+.block-editor-block-inspector .components-base-control.position-inputs:last-child {
+ margin-bottom: 24px !important;
+}
+.block-editor-block-inspector .components-base-control.position-inputs {
+ padding-right: 5px;
+}
diff --git a/blocks/model-block/index.js b/blocks/model-block/index.js
new file mode 100644
index 0000000..22b14b6
--- /dev/null
+++ b/blocks/model-block/index.js
@@ -0,0 +1,197 @@
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './Edit';
+import Save from './Save';
+import { useBlockProps } from '@wordpress/block-editor';
+
+const icon = (
+
+);
+
+const blockConfig = require( './block.json' );
+registerBlockType( blockConfig.name, {
+ ...blockConfig,
+ icon: icon,
+ apiVersion: 2,
+ edit: Edit,
+ save: Save,
+ deprecated: [
+ {
+ attributes: {
+ bg_color: {
+ type: 'string',
+ default: '#FFFFFF',
+ },
+ zoom: {
+ type: 'integer',
+ default: 90,
+ },
+ scale: {
+ type: 'integer',
+ default: 1,
+ },
+ positionX: {
+ type: 'integer',
+ default: 0,
+ },
+ positionY: {
+ type: 'integer',
+ default: 0,
+ },
+ rotationY: {
+ type: 'integer',
+ default: 0,
+ },
+ threeObjectUrl: {
+ type: 'string',
+ default: null,
+ },
+ hasZoom: {
+ type: 'bool',
+ default: false,
+ },
+ hasTip: {
+ type: 'bool',
+ default: true,
+ },
+ deviceTarget: {
+ type: 'string',
+ default: '2d',
+ },
+ },
+ save( props ) {
+ return (
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
+ { props.attributes.scale }
+
+
+ { props.attributes.bg_color }
+
+
+ { props.attributes.zoom }
+
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
+ { props.attributes.scale }
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
{ props.attributes.scale }
+
+ { props.attributes.bg_color }
+
+
{ props.attributes.zoom }
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
{ props.attributes.scale }
+
+ { props.attributes.animations }
+
+
+
+
{value}
+ )}
+
+);
+
+export default function Edit({ attributes, setAttributes, isSelected }) {
+ return (
+
+ setAttributes({ content })}
+ />
+
+ );
+}
diff --git a/blocks/npc-block/Edit.test.js b/blocks/npc-block/Edit.test.js
new file mode 100644
index 0000000..ab10afe
--- /dev/null
+++ b/blocks/npc-block/Edit.test.js
@@ -0,0 +1,57 @@
+
+//Import React
+import React from 'react';
+//Import test renderer
+import { render, fireEvent, cleanup } from '@testing-library/react';
+//Import component to test
+import { Editor } from './Edit';
+
+
+describe("Editor componet", () => {
+ afterEach(cleanup);
+ it('matches snapshot when selected', () => {
+ const onChange = jest.fn();
+ const { container } = render();
+ expect(container).toMatchSnapshot();
+ });
+
+ it('matches snapshot when not selected', () => {
+ const onChange = jest.fn();
+ const { container } = render();
+ expect(container).toMatchSnapshot();
+ });
+
+ it("Calls the onchange function", () => {
+ const onChange = jest.fn();
+ const { getByDisplayValue } = render();
+ fireEvent.change(getByDisplayValue("Salad"), {
+ target: { value: "New Value" }
+ });
+ expect(onChange).toHaveBeenCalledTimes(1);
+ });
+
+ it("Passes updated value, not event to onChange callback", () => {
+ const onChange = jest.fn();
+ const { getByDisplayValue } = render();
+ fireEvent.change(getByDisplayValue("Seltzer"), {
+ target: { value: "Boring Water" }
+ });
+ expect(onChange).toHaveBeenCalledWith("Boring Water");
+ });
+});
\ No newline at end of file
diff --git a/blocks/npc-block/Save.js b/blocks/npc-block/Save.js
new file mode 100644
index 0000000..3a499f1
--- /dev/null
+++ b/blocks/npc-block/Save.js
@@ -0,0 +1,6 @@
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+
+export default function save({ attributes }) {
+ return {attributes.content}
;
+}
\ No newline at end of file
diff --git a/blocks/npc-block/block.json b/blocks/npc-block/block.json
new file mode 100644
index 0000000..e197d03
--- /dev/null
+++ b/blocks/npc-block/block.json
@@ -0,0 +1,20 @@
+{
+ "name": "three-object-viewer/npc-block",
+ "title": "NPC Block",
+ "description": "A NPC Block to make your experience a bit more personal.",
+ "attributes": {
+ "content": {
+ "type": "string",
+ "default": "Hi Roy"
+ }
+ },
+ "category": "theme",
+ "apiVersion": 2,
+ "icon": "smiley",
+ "supports": {
+ "html": false
+ },
+ "editorScript": "file:../../build/block-npc-block.js",
+ "editorStyle": "file:../../build/block-npc-block.css",
+ "style": "file:../../build/block-npc-block.css"
+}
diff --git a/blocks/npc-block/editor.scss b/blocks/npc-block/editor.scss
new file mode 100644
index 0000000..318f617
--- /dev/null
+++ b/blocks/npc-block/editor.scss
@@ -0,0 +1,4 @@
+
+ .wp-block-npc-block {
+ border: 1px dotted #f00;
+}
diff --git a/blocks/npc-block/index.js b/blocks/npc-block/index.js
new file mode 100644
index 0000000..3539797
--- /dev/null
+++ b/blocks/npc-block/index.js
@@ -0,0 +1,12 @@
+
+import { registerBlockType } from "@wordpress/blocks";
+import Edit from './Edit';
+import Save from './Save';
+
+const blockConfig = require('./block.json');
+registerBlockType(blockConfig.name, {
+ ...blockConfig,
+ apiVersion: 2,
+ edit: Edit,
+ save: Save
+});
diff --git a/blocks/npc-block/init.php b/blocks/npc-block/init.php
new file mode 100644
index 0000000..93dd084
--- /dev/null
+++ b/blocks/npc-block/init.php
@@ -0,0 +1,10 @@
+ {
+ setAttributes( { skyUrl: null } );
+ setAttributes( { skyUrl: imageObject.url } );
+ };
+
+ const onChangeCollidable = ( zoomSetting ) => {
+ setAttributes( { hasZoom: zoomSetting } );
+ };
+
+
+ const { mediaUpload } = wp.editor;
+
+ const ALLOWED_MEDIA_TYPES = [
+ 'image'
+ ];
+
+ const MyDropZone = () => {
+ const [ hasDropped, setHasDropped ] = useState( false );
+ return (
+
+ { hasDropped ? 'Dropped!' : 'Drop an image here or' }
+
+ mediaUpload( {
+ allowedTypes: ALLOWED_MEDIA_TYPES,
+ filesList: files,
+ onFileChange: ( [ images ] ) => {
+ onImageSelect( images );
+ },
+ } )
+ }
+ />
+
+ );
+ };
+
+ function handleClick(objectURL){
+ if(objectURL){
+ console.log("success good job", objectURL);
+ onImageSelect(objectURL);
+ }
+ console.log("fail", objectURL);
+ }
+
+
+ return (
+
+
+
+
+
+
+ Select an image to be used as your skybox. 360 spherical panoramics recommended:
+
+
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ label="Sky File"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.skyUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+
+
+ { isSelected ? (
+ <>
+ { attributes.skyUrl ? (
+ <>
+
+ ) : (
+
+
+
+
+
+ Select an image to be used as your skybox. 360 spherical panoramics recommended:
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.skyUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+ ) }
+
+ ) : (
+ <>
+ { attributes.skyUrl ? (
+ <>
+
+ ) : (
+
+
+
+
+ Select an image to be used as your skybox. 360 spherical panoramics recommended:
+
+ {/*
+ console.log(e.target.value) && setEnteredURL(e.target.value)}>
+
+
*/}
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.skyUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+ ) }
+
+ ) }
+
+ <>
+
+
+ { attributes.skyUrl }
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
+ { props.attributes.scale }
+
+
+ { props.attributes.bg_color }
+
+
+ { props.attributes.zoom }
+
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
+ { props.attributes.scale }
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
{ props.attributes.scale }
+
+ { props.attributes.bg_color }
+
+
{ props.attributes.zoom }
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
{ props.attributes.scale }
+
+ { props.attributes.animations }
+
+
+
+
+ { hasDropped ? 'Dropped!' : 'Drop an image here or' }
+
+ mediaUpload( {
+ allowedTypes: ALLOWED_MEDIA_TYPES,
+ filesList: files,
+ onFileChange: ( [ images ] ) => {
+ onImageSelect( images );
+ },
+ } )
+ }
+ />
+
+ );
+ };
+
+ function handleClick(objectURL){
+ if(objectURL){
+ console.log("success good job", objectURL);
+ onImageSelect(objectURL);
+ }
+ console.log("fail", objectURL);
+ }
+
+
+ return (
+
+
+
+
+
+
+ Select an image or object to attach to your audio. Leave blank for no mesh.
+
+
+
+
+ onImageSelect( imageObject )
+ }
+ type="audio"
+ label="Audio File"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.audioUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+
+
+
+
+ onChangePositionX( value )
+ }
+ />
+
+ onChangePositionY( value )
+ }
+ />
+
+ onChangePositionZ( value )
+ }
+ />
+
+
+
+
+
+
+ onChangeRotationX( value )
+ }
+ />
+
+ onChangeRotationY( value )
+ }
+ />
+
+ onChangeRotationZ( value )
+ }
+ />
+
+
+ {
+ onChangeAutoPlay( e );
+ } }
+ />
+
+
+ {
+ onChangeLoop( e );
+ } }
+ />
+
+
+ {
+ onChangePositional( e );
+ } }
+ />
+
+
+
+ onChangeVolume( value )
+ }
+ />
+
+
+ { attributes.positional && (
+
+
+
+ onChangeConeInnerAngle( value )
+ }
+ />
+
+
+
+ onChangeConeOuterAngle( value )
+ }
+ />
+
+
+
+ onChangeConeOuterGain( value )
+ }
+ />
+
+
+
+ onChangeDistanceModel( target )
+ }
+ />
+
+
+
+ onChangeMaxDistance( value )
+ }
+ />
+
+
+
+ onChangeRefDistance( value )
+ }
+ />
+
+
+
+ onChangeRolloffFactor( value )
+ }
+ />
+
+
+ )}
+
+
+ { isSelected ? (
+ <>
+ { attributes.videoUrl ? (
+ <>
+
+ ) : (
+
+
+
+
+
+ Select an image:
+
+
+ onImageSelect( imageObject )
+ }
+ type="video"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.videoUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+ ) }
+
+ ) : (
+ <>
+ { attributes.videoUrl ? (
+ <>
+
+ ) : (
+
+
+
+
+ Select an image to render in your environment:
+
+ {/*
+ console.log(e.target.value) && setEnteredURL(e.target.value)}>
+
+
*/}
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.videoUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+ ) }
+
+ ) }
+
+ <>
+
+
+ { attributes.audioUrl }
+
+
+ { attributes.scaleX }
+
+
+ { attributes.scaleY }
+
+
+ { attributes.scaleZ }
+
+
+ { attributes.positionX }
+
+
+ { attributes.positionY }
+
+
+ { attributes.positionZ }
+
+
+ { attributes.rotationX }
+
+
+ { attributes.rotationY }
+
+
+ { attributes.rotationZ }
+
+
+ { attributes.aspectHeight }
+
+
+ { attributes.aspectWidth }
+
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
+ { props.attributes.scale }
+
+
+ { props.attributes.bg_color }
+
+
+ { props.attributes.zoom }
+
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
+ { props.attributes.scale }
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
{ props.attributes.scale }
+
+ { props.attributes.bg_color }
+
+
{ props.attributes.zoom }
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
{ props.attributes.scale }
+
+ { props.attributes.animations }
+
+
+
+
+ { hasDropped ? 'Dropped!' : 'Drop an image here or' }
+
+ mediaUpload( {
+ allowedTypes: ALLOWED_MEDIA_TYPES,
+ filesList: files,
+ onFileChange: ( [ images ] ) => {
+ onImageSelect( images );
+ },
+ } )
+ }
+ />
+
+ );
+ };
+
+ function handleClick(objectURL){
+ if(objectURL){
+ console.log("success good job", objectURL);
+ onImageSelect(objectURL);
+ }
+ console.log("fail", objectURL);
+ }
+
+
+ return (
+
+
+
+
+
+
+ Select an image to render in your environment:
+
+
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ label="Image File"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.imageUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+
+ onChangePositionX( value )
+ }
+ />
+
+ onChangePositionY( value )
+ }
+ />
+
+ onChangePositionZ( value )
+ }
+ />
+
+
+
+
+
+
+ onChangeRotationX( value )
+ }
+ />
+
+ onChangeRotationY( value )
+ }
+ />
+
+ onChangeRotationZ( value )
+ }
+ />
+
+
+
+
+
+
+ onChangeScaleX( value )
+ }
+ />
+
+ onChangeScaleY( value )
+ }
+ />
+
+ onChangeScaleZ( value )
+ }
+ />
+
+
+
+
+ { isSelected ? (
+ <>
+ { attributes.imageUrl ? (
+ <>
+
+ ) : (
+
+
+
+
+
+ Select an image:
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.imageUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+ ) }
+
+ ) : (
+ <>
+ { attributes.imageUrl ? (
+ <>
+
+ ) : (
+
+
+
+
+ Select an image to render in your environment:
+
+ {/*
+ console.log(e.target.value) && setEnteredURL(e.target.value)}>
+
+
*/}
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.imageUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+ ) }
+
+ ) }
+
+ <>
+
+
+ { attributes.imageUrl }
+
+
+ { attributes.scaleX }
+
+
+ { attributes.scaleY }
+
+
+ { attributes.scaleZ }
+
+
+ { attributes.positionX }
+
+
+ { attributes.positionY }
+
+
+ { attributes.positionZ }
+
+
+ { attributes.rotationX }
+
+
+ { attributes.rotationY }
+
+
+ { attributes.rotationZ }
+
+
+ { attributes.aspectHeight }
+
+
+ { attributes.aspectWidth }
+
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
+ { props.attributes.scale }
+
+
+ { props.attributes.bg_color }
+
+
+ { props.attributes.zoom }
+
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
+ { props.attributes.scale }
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
{ props.attributes.scale }
+
+ { props.attributes.bg_color }
+
+
{ props.attributes.zoom }
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
{ props.attributes.scale }
+
+ { props.attributes.animations }
+
+
+
+
+ { hasDropped ? 'Dropped!' : 'Drop an image here or' }
+
+ mediaUpload( {
+ allowedTypes: ALLOWED_MEDIA_TYPES,
+ filesList: files,
+ onFileChange: ( [ images ] ) => {
+ onImageSelect( images );
+ },
+ } )
+ }
+ />
+
+ );
+ };
+
+ function handleClick(objectURL){
+ if(objectURL){
+ console.log("success good job", objectURL);
+ onImageSelect(objectURL);
+ }
+ console.log("fail", objectURL);
+ }
+
+
+ return (
+
+
+
+
+
+
+ Select an image to render in your environment:
+
+
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ label="Image File"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.audioUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+ {
+ onChangeAutoPlay( e );
+ } }
+ />
+
+
+
+ onChangePositionX( value )
+ }
+ />
+
+ onChangePositionY( value )
+ }
+ />
+
+ onChangePositionZ( value )
+ }
+ />
+
+
+
+
+
+
+ onChangeRotationX( value )
+ }
+ />
+
+ onChangeRotationY( value )
+ }
+ />
+
+ onChangeRotationZ( value )
+ }
+ />
+
+
+
+
+
+
+ onChangeScaleX( value )
+ }
+ />
+
+ onChangeScaleY( value )
+ }
+ />
+
+ onChangeScaleZ( value )
+ }
+ />
+
+
+
+
+ { isSelected ? (
+ <>
+ { attributes.audioUrl ? (
+ <>
+
+ ) : (
+
+
+
+
+
+ Select an image:
+
+
+ onImageSelect( imageObject )
+ }
+ type="video"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.audioUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+
+ ) }
+
+ ) : (
+ <>
+ { attributes.audioUrl ? (
+ <>
+
+ ) : (
+
+
+
+
+ Select an image to render in your environment:
+
+ {/*
+ console.log(e.target.value) && setEnteredURL(e.target.value)}>
+
+
*/}
+
+
+ onImageSelect( imageObject )
+ }
+ type="image"
+ allowedTypes={ ALLOWED_MEDIA_TYPES }
+ value={ attributes.audioUrl }
+ render={ ( { open } ) => (
+
+ ) }
+ />
+
+ ) }
+
+ ) }
+
+ <>
+
+
+ { attributes.videoUrl }
+
+
+ { attributes.scaleX }
+
+
+ { attributes.scaleY }
+
+
+ { attributes.scaleZ }
+
+
+ { attributes.positionX }
+
+
+ { attributes.positionY }
+
+
+ { attributes.positionZ }
+
+
+ { attributes.rotationX }
+
+
+ { attributes.rotationY }
+
+
+ { attributes.rotationZ }
+
+
+ { attributes.aspectHeight }
+
+
+ { attributes.aspectWidth }
+
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
+ { props.attributes.scale }
+
+
+ { props.attributes.bg_color }
+
+
+ { props.attributes.zoom }
+
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
+ { props.attributes.scale }
+
+
+
+
+ <>
+
+
+ { props.attributes.deviceTarget }
+
+
+ { props.attributes.threeObjectUrl }
+
+
{ props.attributes.scale }
+
+ { props.attributes.bg_color }
+
+
{ props.attributes.zoom }
+
+ { props.attributes.hasZoom ? 1 : 0 }
+
+
+ { props.attributes.hasTip ? 1 : 0 }
+
+
+ { props.attributes.positionY }
+
+
+ { props.attributes.rotationY }
+
+
{ props.attributes.scale }
+
+ { props.attributes.animations }
+
+
+
+