Skip to content

Commit

Permalink
1.6 lights, environments, commands, and languages (#62)
Browse files Browse the repository at this point in the history 
* adds light block

* adds light working state

* adds the light stuff

* translate all the things and add english and japanese

* fix environment logging and color issue

* remove debug code

* fixes editor lights and hdr

* update translations

* remove quick command for a future date

* restore editor default lights if no lights are added

* fix css for sliders

* update defaults

* remove changelog
  • Loading branch information
@antpb
antpb authored Aug 22, 2023
1 parent f474891 commit 0178a33
Show file tree
Hide file tree
Showing 91 changed files with 5,561 additions and 342 deletions.
48 changes: 25 additions & 23 deletions admin/three-object-viewer-settings/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Suspense, useState, useEffect } from "@wordpress/element";
// import i18n from "@wordpress/i18n";
import { __ } from "@wordpress/i18n";

//Main component for admin page app
export default function App({ getSettings, updateSettings }) {
Expand Down Expand Up @@ -45,9 +47,9 @@ export default function App({ getSettings, updateSettings }) {

// Create a new media frame
frame = wp.media({
title: 'Select or Upload Media',
title: __( 'Select or Upload Media', 'three-object-viewer' ),
button: {
text: 'Use this media',
text: __( 'Use this media', 'three-object-viewer' ),
},
multiple: false,
})
Expand Down Expand Up @@ -75,9 +77,9 @@ export default function App({ getSettings, updateSettings }) {

// Create a new media frame
frame = wp.media({
title: 'Select or Upload Media',
title: __( 'Select or Upload Media', 'three-object-viewer' ),
button: {
text: 'Use this media',
text: __( 'Use this media', 'three-object-viewer' ),
},
multiple: false,
})
Expand Down Expand Up @@ -113,34 +115,34 @@ export default function App({ getSettings, updateSettings }) {
<tbody>
<tr>
<td>
<div><h2>3OV Settings</h2></div>
<div><p>Here you can manage the settings for 3OV to tweak global configuration options and save your API keys for connected serivces.</p></div>
<div><h2>{ __( '3OV Settings', 'three-object-viewer') }</h2></div>
<div><p>{ __( 'Here you can manage the settings for 3OV to tweak global configuration options and save your API keys for connected serivces.', 'three-object-viewer' ) }</p></div>
</td>
</tr>
<tr>
<td><h3>Avatar Settings</h3></td>
<td><h3>{ __( 'Avatar Settings', 'three-object-viewer' ) }</h3></td>
</tr>
<tr>
<td>
<label htmlFor="defaultVRM"><b>Default animation</b></label>
<label htmlFor="defaultVRM"><b>{ __( 'Default animation', 'three-object-viewer' ) }</b></label>
</td>
</tr>
<tr>
<td>
{ settings.defaultVRM ? settings.defaultVRM : "No custom default animation set"}
{ settings.defaultVRM ? settings.defaultVRM : __( "No custom default animation set", 'three-object-viewer' ) }
</td>
</tr>
<tr>
<td>
<button type='button' onClick={runUploaderAnimation}>
Set Default Animation
{ __( 'Set Default Animation', 'three-object-viewer' ) }
</button>
</td>
</tr>
<tr>
<td>
<button type='button' onClick={clearDefaultAnimation}>
Clear Default Animation
{ __( 'Clear Default Animation', 'three-object-viewer' ) }
</button>
</td>
</tr>
Expand All @@ -152,32 +154,32 @@ export default function App({ getSettings, updateSettings }) {
</tr>
<tr>
<td>
{ settings.defaultAvatar ? settings.defaultAvatar : "No custom default avatar set"}
{ settings.defaultAvatar ? settings.defaultAvatar : __( "No custom default avatar set", 'three-object-viewer' ) }
</td>
</tr>
<tr>
<td>
<button type='button' onClick={runUploaderDefaultAvatar}>
Set Default Avatar
{ __( 'Set Default Avatar', 'three-object-viewer' ) }
</button>
</td>
</tr>
<tr>
<td>
<button type='button' onClick={clearDefaultAvatar}>
Clear Default Avatar
{ __( 'Clear Default Avatar', 'three-object-viewer' ) }
</button>
</td>
</tr>
<tr>
<td><h3>AI Settings</h3></td>
<td><h3>{__('AI Settings', 'three-object-viewer' ) }</h3></td>
</tr>
<tr>
<td>NPC Settings</td>
<td>{ __( 'NPC Settings', 'three-object-viewer' ) }</td>
</tr>
<tr>
<td>
<label htmlFor="enabled">Enable</label>
<label htmlFor="enabled">{ __( 'Enable', 'three-object-viewer' ) }</label>
<input
id="enabled"
type="checkbox"
Expand All @@ -192,7 +194,7 @@ export default function App({ getSettings, updateSettings }) {
</tr>
<tr>
<td>
<label htmlFor="networkWorker">AI Endpoint URL</label>
<label htmlFor="networkWorker">{ __( 'AI Endpoint URL', 'three-object-viewer' ) }</label>
<input
id="networkWorker"
type="input"
Expand All @@ -208,7 +210,7 @@ export default function App({ getSettings, updateSettings }) {
</tr>
<tr>
<td>
<label htmlFor="openApiKey">OpenAI API Token</label>
<label htmlFor="openApiKey">{ __( 'OpenAI API Token', 'three-object-viewer' ) }</label>
{isOpenApiKeyVisible ? (
<input
id="openApiKey"
Expand Down Expand Up @@ -240,7 +242,7 @@ export default function App({ getSettings, updateSettings }) {
{/* Select element with three options for AI type public, or logged in */}
<tr>
<td>
<label htmlFor="aiType">AI Access Level</label>
<label htmlFor="aiType">{ __( 'AI Access Level', 'three-object-viewer' ) }</label>
<select
id="aiType"
name="aiType"
Expand All @@ -249,15 +251,15 @@ export default function App({ getSettings, updateSettings }) {
setSettings({ ...settings, allowPublicAI: event.target.value });
}}
>
<option value="public">Public</option>
<option value="loggedIn">Logged In</option>
<option value="public">{ __( 'Public', 'three-object-viewer' ) }</option>
<option value="loggedIn">{ __( 'Logged In', 'three-object-viewer' ) }</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="save" className="button button-small button-primary" type="submit" name="enabled" onClick={onSave} />
{saveIndicator && <span style={{color: "green", paddingLeft: "10px"}} className="save-indicator">Saving...</span>}
{saveIndicator && <span style={{color: "green", paddingLeft: "10px"}} className="save-indicator">{__('Saving...', 'three-object-viewer' ) }</span>}
</td>
</tr>
</tbody>
Expand Down
9 changes: 8 additions & 1 deletion admin/three-object-viewer-settings/init.php
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,29 @@
<?php
//Register assets for 3OV Settings
add_action('admin_enqueue_scripts', function () {

wp_enqueue_media();
$handle = 'three-object-viewer-settings';
if( file_exists(dirname(__FILE__, 3). "/build/admin-page-$handle.asset.php" ) ){
$assets = include dirname(__FILE__, 3). "/build/admin-page-$handle.asset.php";
$dependencies = $assets['dependencies'];

wp_register_script(
$handle,
plugins_url("/build/admin-page-$handle.js", dirname(__FILE__, 2)),
$dependencies,
$assets['version']
);

$three_object_plugin = plugins_url() . '/three-object-viewer/build/';
$three_object_plugin_root = plugins_url() . '/three-object-viewer/';
wp_localize_script( $handle, 'threeObjectPlugin', $three_object_plugin );
wp_localize_script( $handle, 'threeObjectPluginRoot', $three_object_plugin_root );

if ( function_exists( 'wp_set_script_translations' ) ) {
$path = plugin_dir_path( __FILE__ ) . 'languages';
$language_directory = plugin_dir_path( dirname(__DIR__) ) . 'languages/';
wp_set_script_translations( 'three-object-viewer-settings', 'three-object-viewer', $language_directory );
}
}
});

Expand Down
84 changes: 62 additions & 22 deletions blocks/environment/Edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,15 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
setFocusPosition(newValue);
}


// useEffect to initialize the value of the threeObjectUrl attribute if it is not set
useEffect(() => {
if (!attributes.threeObjectUrl) {
setAttributes({ threeObjectUrl: (threeObjectPlugin + defaultEnvironment) });
}
}, []);
const removeHDR = (imageObject) => {
setAttributes({ hdr: null });
};

const onChangeAnimations = (animations) => {
setAttributes({ animations });
Expand All @@ -58,6 +60,11 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
setAttributes({ threePreviewImage: imageObject.url });
};

const onHDRImageSelect = (imageObject) => {
setAttributes({ hdr: null });
setAttributes({ hdr: imageObject.url });
};

const onChangePositionY = (posy) => {
setAttributes({ positionY: posy });
};
Expand All @@ -83,6 +90,10 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
"application/octet-stream"
];

const HDR = [
"image/vnd.radiance"
];

const TEMPLATE = [
['three-object-viewer/spawn-point-block', { positionX: "0", positionY: "1.3", positionZ: "-5", rotationX: "0", rotationY: "0", rotationZ: "0"}],
];
Expand Down Expand Up @@ -111,19 +122,17 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
<div {...useBlockProps()}>
<InspectorControls key="setting">
<Panel
className="three-object-environment-edit-container"
header="Settings"
className="three-object-environment-edit-container three-object-viewer-edit-panel"
header={ __( "Environment Settings", "three-object-viewer" ) }
>
<PanelBody
title="Environment Object (Changing this value changes your scenes ground planes)"
title={ __( 'Environment Object (Changing this value changes your scene ground planes)', 'three-object-viewer' ) }
icon={more}
initialOpen={true}
>
<PanelRow>
<span>
Select a glb file from your media library. This
will be treated as a collidable mesh that
visitors can walk on:
{__( "Select a glb file from your media library. This will be treated as a collidable mesh that visitors can walk on:", "three-object-viewer" )}
</span>
</PanelRow>
<PanelRow>
Expand All @@ -138,15 +147,15 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
render={({ open }) => (
<button onClick={open}>
{attributes.threeObjectUrl
? "Replace Environment"
: "Select Environment"}
? __( "Replace Environment", "three-object-viewer" )
: __( "Select Environment", "three-object-viewer" ) }
</button>
)}
/>
</PanelRow>
<PanelRow>
<span>
Select an image to be used as the preview image:
{__( "Select an image to be used as the preview image:", "three-object-viewer" )}
</span>
</PanelRow>
<PanelRow>
Expand Down Expand Up @@ -176,20 +185,50 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
render={({ open }) => (
<button onClick={open}>
{attributes.threePreviewImage
? "Replace Image"
: "Select Image"}
? __( "Replace Image", "three-object-viewer" )
: __( "Select Image", "three-object-viewer" ) }
</button>
)}
/>
</PanelRow>
<PanelRow>
{attributes.hdr && (<span>
{ attributes.hdr }
</span>)}
</PanelRow>
<PanelRow>
<MediaUpload
onSelect={(imageObject) =>
onHDRImageSelect(imageObject)
}
type="image"
label="HDR Image"
allowedTypes={ HDR }
value={attributes.hdr}
render={({ open }) => (
<>
<button onClick={open}>
{attributes.hrd
? __( "Replace HDR", "three-object-viewer" )
: __( "Select HDR", "three-object-viewer" ) }
</button>
{attributes.hdr && (
<button onClick={removeHDR}>
{ __( 'Remove HDR', 'three-object-viewer' ) }
</button>
)}
</>
)}
/>
</PanelRow>
</PanelBody>
<PanelBody
title="Scene Settings"
title={__( "Scene Settings", "three-object-viewer" )}
icon={more}
initialOpen={true}
>
<PanelRow>
<span>Object Display Type:</span>
<span>{ __( "Object Display Type:", "three-object-viewer" ) }</span>
</PanelRow>
<PanelRow>
<SelectControl
Expand All @@ -201,34 +240,34 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
</PanelRow>
<PanelRow>
<TextControl
label="Loop Animations"
help="Separate each animation name you wish to loop with a comma"
label={ __( "Loop Animations", "three-object-viewer" ) }
help={ __( "Separate each animation name you wish to loop with a comma", "three-object-viewer" ) }
value={attributes.animations}
onChange={(value) => onChangeAnimations(value)}
/>
</PanelRow>
<PanelRow>
<PanelRow className="wide-slider">
<RangeControl
label="scale"
label={ __( "Scale", "three-object-viewer" ) }
value={attributes.scale}
min={0}
max={200}
onChange={onChangeScale}
/>
</PanelRow>
<PanelRow>
<PanelRow className="wide-slider">
<RangeControl
label="positionY"
label={ __( "Position Y", "three-object-viewer" ) }
value={attributes.positionY}
min={-100}
max={100}
step={0.01}
onChange={onChangePositionY}
/>
</PanelRow>
<PanelRow>
<PanelRow className="wide-slider">
<RangeControl
label="rotationY"
label={ __( "Rotation Y", "three-object-viewer" ) }
value={attributes.rotationY}
min={-10}
max={10}
Expand Down Expand Up @@ -262,6 +301,7 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
{mainModel && (
<ThreeObjectEdit
url={mainModel}
hdr={attributes.hdr}
deviceTarget={attributes.deviceTarget}
backgroundColor={attributes.bg_color}
zoom={attributes.zoom}
Expand Down
3 changes: 3 additions & 0 deletions blocks/environment/Save.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ export default function save({ attributes }) {
<p className="three-object-block-url">
{attributes.threeObjectUrl}
</p>
<p className="three-object-block-hdr">
{attributes.hdr}
</p>
<p className="three-object-scale">{attributes.scale}</p>
<p className="three-object-background-color">
{attributes.bg_color}
Expand Down
Loading

0 comments on commit 0178a33

Please sign in to comment.