From 25851ec348283230fb527ada19edf3da84b2c88d Mon Sep 17 00:00:00 2001 From: antpb Date: Tue, 8 Aug 2023 00:29:59 -0500 Subject: [PATCH 1/2] adds light block --- .../components/EnvironmentFront.js | 125 +++++++- .../environment/components/ThreeObjectEdit.js | 272 +++++++++++++++- .../components/core/front/ThreeLight.js | 72 +++++ blocks/environment/editor.scss | 1 + blocks/environment/frontend.js | 4 + blocks/three-light-block/Edit.js | 303 ++++++++++++++++++ blocks/three-light-block/Edit.test.js | 47 +++ blocks/three-light-block/Save.js | 61 ++++ blocks/three-light-block/block.json | 81 +++++ blocks/three-light-block/editor.scss | 42 +++ blocks/three-light-block/index.js | 26 ++ blocks/three-light-block/init.php | 10 + blocks/three-light-block/style.scss | 44 +++ inc/assets/light_icon.png | Bin 0 -> 4957 bytes php/Plugin.php | 1 + pluginMachine.json | 1 + three-object-viewer.php | 3 + 17 files changed, 1066 insertions(+), 27 deletions(-) create mode 100644 blocks/environment/components/core/front/ThreeLight.js create mode 100644 blocks/three-light-block/Edit.js create mode 100644 blocks/three-light-block/Edit.test.js create mode 100644 blocks/three-light-block/Save.js create mode 100644 blocks/three-light-block/block.json create mode 100644 blocks/three-light-block/editor.scss create mode 100644 blocks/three-light-block/index.js create mode 100644 blocks/three-light-block/init.php create mode 100644 blocks/three-light-block/style.scss create mode 100644 inc/assets/light_icon.png diff --git a/blocks/environment/components/EnvironmentFront.js b/blocks/environment/components/EnvironmentFront.js index ddd4e4e..1752dbc 100644 --- a/blocks/environment/components/EnvironmentFront.js +++ b/blocks/environment/components/EnvironmentFront.js @@ -36,6 +36,7 @@ import { BoxGeometry } from "three"; import { ThreeImage } from "./core/front/ThreeImage"; import { ThreeVideo } from "./core/front/ThreeVideo"; import { ThreeAudio } from "./core/front/ThreeAudio"; +import { ThreeLight } from "./core/front/ThreeLight"; import { ModelObject } from "./core/front/ModelObject"; import { NPCObject } from "./core/front/NPCObject"; import { Portal } from "./core/front/Portal"; @@ -706,23 +707,6 @@ export default function EnvironmentFront(props) { {/* */} - - }> ); })} + {props.lightsToAdd.length < 1 && ( + <> + + + + )} + {Object.values(props.lightsToAdd).map((item, index) => { + const lightPosX = item.querySelector("p.light-block-positionX") + ? item.querySelector("p.light-block-positionX").innerText + : ""; + + const lightPosY = item.querySelector("p.light-block-positionY") + ? item.querySelector("p.light-block-positionY").innerText + : ""; + + const lightPosZ = item.querySelector("p.light-block-positionZ") + ? item.querySelector("p.light-block-positionZ").innerText + : ""; + + const lightRotationX = item.querySelector("p.light-block-rotationX") + ? item.querySelector("p.light-block-rotationX").innerText + : ""; + + const lightRotationY = item.querySelector("p.light-block-rotationY") + ? item.querySelector("p.light-block-rotationY").innerText + : ""; + + const lightRotationZ = item.querySelector("p.light-block-rotationZ") + ? item.querySelector("p.light-block-rotationZ").innerText + : ""; + + const lightTargetX = item.querySelector("p.light-block-targetX") + ? item.querySelector("p.light-block-targetX").innerText + : ""; + + const lightTargetY = item.querySelector("p.light-block-targetY") + ? item.querySelector("p.light-block-targetY").innerText + : ""; + + const lightTargetZ = item.querySelector("p.light-block-targetZ") + ? item.querySelector("p.light-block-targetZ").innerText + : ""; + + + const lightType = item.querySelector("p.light-block-type") + ? item.querySelector("p.light-block-type").innerText + : "ambient"; + + const lightColor = item.querySelector("p.light-block-color") + ? item.querySelector("p.light-block-color").innerText + : ""; + + const lightItensity = item.querySelector("p.light-block-intensity") + ? item.querySelector("p.light-block-intensity").innerText + : ""; + + const lightDistance = item.querySelector("p.light-block-distance") + ? item.querySelector("p.light-block-distance").innerText + : ""; + + const lightDecay = item.querySelector("p.light-block-decay") + ? item.querySelector("p.light-block-decay").innerText + : ""; + + const lightAngle = item.querySelector("p.light-block-angle") + ? item.querySelector("p.light-block-angle").innerText + : ""; + + const lightPenumbra = item.querySelector("p.light-block-penumbra") + ? item.querySelector("p.light-block-penumbra").innerText + : ""; + + return ( + + ); + })} + {Object.values( props.npcsToAdd ).map((npc, index) => { diff --git a/blocks/environment/components/ThreeObjectEdit.js b/blocks/environment/components/ThreeObjectEdit.js index e4d6c41..3ae032e 100644 --- a/blocks/environment/components/ThreeObjectEdit.js +++ b/blocks/environment/components/ThreeObjectEdit.js @@ -24,6 +24,7 @@ import { Perf } from "r3f-perf"; import { Resizable } from "re-resizable"; import defaultFont from "../../../inc/fonts/roboto.woff"; import audioIcon from "../../../inc/assets/audio_icon.png"; +import lightIcon from "../../../inc/assets/light_icon.png"; const { registerStore } = wp.data; @@ -129,7 +130,7 @@ function ThreeSky(sky) { rotation={[0, 0, 0]} > - + ); } else { @@ -438,6 +439,213 @@ function AudioObject(threeAudio) { ); } + +function LightObject(threeLight) { + const { scene } = useThree(); + // add lightRef + const lightRef = useRef(); + useEffect(() => { + if (lightRef.current) { + scene.add(lightRef.current); + } + return () => { + if (lightRef.current) { + scene.remove(lightRef.current); + } + }; + }, []); + useEffect(() => { + if (lightRef.current) { + scene.add(lightRef.current); + } + return () => { + if (lightRef.current) { + scene.remove(lightRef.current); + } + }; + }, []); + + let LightComponent; + const color = new THREE.Color( threeLight.color ); + + switch (threeLight.type) { + case "directional": + LightComponent = ( + + ); + break; + case "point": + LightComponent = ( + + ); + break; + case "spot": + LightComponent = ( + + ); + break; + case "ambient": + LightComponent = ( + + ); + break; + default: + LightComponent = null; + } + + const texture2 = useLoader(THREE.TextureLoader, (threeObjectPlugin + lightIcon)); + + const [threeLightBlockAttributes, setThreeLightBlockAttributes] = useState( + wp.data + .select("core/block-editor") + .getBlockAttributes(threeLight.lightID) + ); + + useEffect(() => { + const attributes = wp.data + .select("core/block-editor") + .getBlockAttributes(threeLight.lightID); + setThreeLightBlockAttributes(attributes); + }, [threeLight.lightID]); + + const [isSelected, setIsSelected] = useState(); + + const clicked = true; + const lightObj = useRef(); + const TransformController = ({ condition, wrap, children }) => + condition ? wrap(children) : children; + + // useEffect(() => void (clicked && video.play()), [video, clicked]); + + useEffect(() => { + if( threeLight.focusID === threeLight.lightID ) { + const someFocus = new THREE.Vector3(Number(threeLight.positionX), Number(threeLight.positionY), Number(threeLight.positionZ)); + threeLight.changeFocusPoint(someFocus); + } + }, [threeLight.focusID]); + + return ( + + ); +} + + + function VideoObject(threeVideo) { const [url, setUrl] = useState(threeVideo.modelUrl); const [screen, setScreen] = useState(null); @@ -1231,6 +1439,10 @@ function ThreeObject(props) { let audioObject; const audioElementsToAdd = []; + let lightID; + let lightObject; + const lightElementsToAdd = []; + const editorHtmlToAdd = []; let htmlobject; let htmlobjectId; @@ -1295,6 +1507,14 @@ function ThreeObject(props) { audioID = innerBlock.clientId; audioElementsToAdd.push({ audioObject, audioID }); } + if ( + innerBlock.name === + "three-object-viewer/three-light-block" + ) { + lightObject = innerBlock.attributes; + lightID = innerBlock.clientId; + lightElementsToAdd.push({ lightObject, lightID }); + } if ( innerBlock.name === "three-object-viewer/three-portal-block" @@ -1554,6 +1774,46 @@ function ThreeObject(props) { ); } })} + { lightElementsToAdd.length < 1 && ( + <> + + + + )} + {Object.values(lightElementsToAdd).map((model, index) => { + if (model.lightObject.type) { + return ( + + ); + } + })} {Object.values(editorHtmlToAdd).map((text, index) => { return ( - - {props.url && ( {/* */} diff --git a/blocks/environment/components/core/front/ThreeLight.js b/blocks/environment/components/core/front/ThreeLight.js new file mode 100644 index 0000000..84370ff --- /dev/null +++ b/blocks/environment/components/core/front/ThreeLight.js @@ -0,0 +1,72 @@ +import React, { useState, useEffect } from "react"; +import { useThree } from "@react-three/fiber"; +import { + DirectionalLight, + AmbientLight, + PointLight, + SpotLight, + Color +} from "three"; + +/** + * Light component that creates various Three.js light objects based on the provided configuration. + * + * @param {Object} threeLight - An object containing light configuration options. + * @param {string} threeLight.type - The type of light: "directional", "ambient", "point", "spot". + * @param {number} threeLight.color - The color of the light. + * @param {number} threeLight.intensity - The intensity of the light. + * @param {number} threeLight.distance - Maximum range of the point light (for PointLight). + * @param {number} threeLight.decay - The amount the light dims along the distance of the point light (for PointLight). + * @param {number} threeLight.positionX - The X-coordinate of the light's position. + * @param {number} threeLight.positionY - The Y-coordinate of the light's position. + * @param {number} threeLight.positionZ - The Z-coordinate of the light's position. + * @param {number} threeLight.targetX - The X-coordinate for the target the light should point to (for DirectionalLight & SpotLight). + * @param {number} threeLight.targetY - The Y-coordinate for the target the light should point to (for DirectionalLight & SpotLight). + * @param {number} threeLight.targetZ - The Z-coordinate for the target the light should point to (for DirectionalLight & SpotLight). + * @param {number} threeLight.angle - Maximum extent of the spotlight, in radians (for SpotLight). + * @param {number} threeLight.penumbra - Percentage of the spotlight cone that is attenuated due to penumbra (for SpotLight). + * + * @returns {JSX.Element} - Returns a JSX element containing a Three.js light object. + */ +export function ThreeLight(threeLight) { + const [light, setLight] = useState(null); + + useEffect(() => { + let lightInstance; + const color = new Color( threeLight.color ); + + switch (threeLight.type) { + case "directional": + lightInstance = new DirectionalLight(color, threeLight.intensity); + lightInstance.position.set(threeLight.positionX, threeLight.positionY, threeLight.positionZ); + lightInstance.target.position.set(threeLight.targetX, threeLight.targetY, threeLight.targetZ); + break; + + case "ambient": + lightInstance = new AmbientLight(color, threeLight.intensity); + break; + + case "point": + lightInstance = new PointLight(color, threeLight.intensity, threeLight.distance, threeLight.decay); + lightInstance.position.set(threeLight.positionX, threeLight.positionY, threeLight.positionZ); + break; + + case "spot": + lightInstance = new SpotLight(color, threeLight.intensity, threeLight.distance, threeLight.angle, threeLight.penumbra); + lightInstance.position.set(threeLight.positionX, threeLight.positionY, threeLight.positionZ); + lightInstance.target.position.set(threeLight.targetX, threeLight.targetY, threeLight.targetZ); + break; + + default: + console.warn("Invalid light type provided"); + } + + setLight(lightInstance); + }, [threeLight]); + + return ( + <> + {light && } + + ); +} diff --git a/blocks/environment/editor.scss b/blocks/environment/editor.scss index 5171c91..98b5b11 100644 --- a/blocks/environment/editor.scss +++ b/blocks/environment/editor.scss @@ -62,6 +62,7 @@ .wp-block-three-object-viewer-npc-block, .wp-block-three-object-viewer-three-image-block, .wp-block-three-object-viewer-three-audio-block, +.wp-block-three-object-viewer-three-light-block, .wp-block-three-object-viewer-three-portal-block, .wp-block-three-object-viewer-three-video-block, .wp-block-three-object-viewer-spawn-point-block, diff --git a/blocks/environment/frontend.js b/blocks/environment/frontend.js index f2123cb..9fd2021 100644 --- a/blocks/environment/frontend.js +++ b/blocks/environment/frontend.js @@ -32,6 +32,9 @@ const videosToAdd = document.querySelectorAll( const audiosToAdd = document.querySelectorAll( ".three-object-three-app-audio-block" ); +const lightsToAdd = document.querySelectorAll( + ".three-object-three-app-light-block" +); threeApp.forEach((threeApp) => { if (threeApp) { const spawnPoint = @@ -124,6 +127,7 @@ threeApp.forEach((threeApp) => { imagesToAdd={imagesToAdd} videosToAdd={videosToAdd} audiosToAdd={audiosToAdd} + lightsToAdd={lightsToAdd} spawnPoint={spawnPoint ? spawnPoint : null} htmlToAdd={htmlToAdd} npcsToAdd={npcsToAdd} diff --git a/blocks/three-light-block/Edit.js b/blocks/three-light-block/Edit.js new file mode 100644 index 0000000..202ee28 --- /dev/null +++ b/blocks/three-light-block/Edit.js @@ -0,0 +1,303 @@ +import { __ } from "@wordpress/i18n"; +import React, { useState, useEffect } from "react"; +import { DropZone } from "@wordpress/components"; +import "./editor.scss"; +import { + useBlockProps, + ColorPalette, + InspectorControls, + MediaUpload, +} from "@wordpress/block-editor"; +import { + Panel, + PanelBody, + PanelRow, + RangeControl, + ToggleControl, + SelectControl, + TextControl +} from "@wordpress/components"; +import { more } from "@wordpress/icons"; + +export default function Edit({ attributes, setAttributes, isSelected, clientId }) { + const { select, dispatch } = wp.data; + + useEffect(() => { + if( isSelected ){ + dispatch( 'three-object-environment-events' ).setFocusEvent( clientId ); + } + }, [isSelected]); + + const onChangeName = (name) => { + setAttributes({ name }); + }; + + const onChangePositionX = (positionX) => { + setAttributes({ positionX }); + }; + const onChangePositionY = (positionY) => { + setAttributes({ positionY }); + }; + const onChangePositionZ = (positionZ) => { + setAttributes({ positionZ }); + }; + + const onChangeType = (type) => { + setAttributes({ type }); + }; + + const onChangeColor = (color) => { + setAttributes({ color }); + }; + const onChangeIntensity = (intensity) => { + setAttributes({ intensity }); + }; + const onChangeDistance = (distance) => { + setAttributes({ distance }); + }; + const onChangeDecay = (decay) => { + setAttributes({ decay }); + }; + const onChangeAngle = (angle) => { + setAttributes({ angle }); + }; + const onChangePenumbra = (penumbra) => { + setAttributes({ penumbra }); + }; + const onChangeTargetX = (targetX) => { + setAttributes({ targetX }); + }; + const onChangeTargetY = (targetY) => { + setAttributes({ targetY }); + }; + const onChangeTargetZ = (targetZ) => { + setAttributes({ targetZ }); + }; + + return ( +
+ + + + + + {__("Position", "three-object-viewer")} + + + + onChangePositionX(value)} + /> + onChangePositionY(value)} + /> + onChangePositionZ(value)} + /> + + + + {__("Rotation", "three-object-viewer")} + + + + onChangeRotationX(value)} + /> + onChangeRotationY(value)} + /> + onChangeRotationZ(value)} + /> + + + + {__("Light Target", "three-object-viewer")} + + + + onChangeTargetX(value)} + /> + onChangeTargetY(value)} + /> + onChangeTargetZ(value)} + /> + + + onChangeColor( color ) } + /> + + + onChangeType(target)} + /> + + + onChangeIntensity(value)} + /> + + + onChangeDistance(value)} + /> + + + onChangeDecay(value)} + /> + + + onChangeAngle(value)} + /> + + + onChangePenumbra(value)} + /> + + + + + {isSelected ? ( + <> +
+
+ + + + + +

+ Light Block +

+ {/*

URL: {attributes.threeObjectUrl}

*/} +
+
+ + ) : ( + <> +
+
+ + + + + +

+ Light Block +

+ {/*

URL: {attributes.threeObjectUrl}

*/} +
+
+ + )} +
+ ); +} diff --git a/blocks/three-light-block/Edit.test.js b/blocks/three-light-block/Edit.test.js new file mode 100644 index 0000000..ab22d96 --- /dev/null +++ b/blocks/three-light-block/Edit.test.js @@ -0,0 +1,47 @@ +//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"); + }); +}); diff --git a/blocks/three-light-block/Save.js b/blocks/three-light-block/Save.js new file mode 100644 index 0000000..7e0eee5 --- /dev/null +++ b/blocks/three-light-block/Save.js @@ -0,0 +1,61 @@ +import { __ } from "@wordpress/i18n"; +import { useBlockProps } from "@wordpress/block-editor"; + +export default function save({ attributes }) { + return ( +
+ <> +
+

+ {attributes.positionX} +

+

+ {attributes.positionY} +

+

+ {attributes.positionZ} +

+

+ {attributes.rotationX} +

+

+ {attributes.rotationY} +

+

+ {attributes.rotationZ} +

+

+ {attributes.type} +

+

+ {attributes.color} +

+

+ {attributes.intensity} +

+

+ {attributes.distance} +

+

+ {attributes.decay} +

+

+ {attributes.targetX} +

+

+ {attributes.targetY} +

+

+ {attributes.targetZ} +

+

+ {attributes.angle} +

+

+ {attributes.penumbra} +

+
+ +
+ ); +} diff --git a/blocks/three-light-block/block.json b/blocks/three-light-block/block.json new file mode 100644 index 0000000..6d49a41 --- /dev/null +++ b/blocks/three-light-block/block.json @@ -0,0 +1,81 @@ +{ + "name": "three-object-viewer/three-light-block", + "title": "3D Light", + "description": "A light block for your environment", + "attributes": { + "type": { + "type": "string", + "default": "directional" + }, + "color": { + "type": "string", + "default": "0xffffff" + }, + "intensity": { + "type": "float", + "default": 1.0 + }, + "distance": { + "type": "int", + "default": 100 + }, + "decay": { + "type": "int", + "default": 1 + }, + "positionX": { + "type": "float", + "default": 0 + }, + "positionY": { + "type": "float", + "default": 0 + }, + "positionZ": { + "type": "float", + "default": 0 + }, + "rotationX": { + "type": "float", + "default": 0 + }, + "rotationY": { + "type": "float", + "default": 0 + }, + "rotationZ": { + "type": "float", + "default": 0 + }, + "targetX": { + "type": "float", + "default": 0 + }, + "targetY": { + "type": "float", + "default": 0 + }, + "targetZ": { + "type": "float", + "default": 0 + }, + "angle": { + "type": "float", + "default": 0.78539816339 + }, + "penumbra": { + "type": "float", + "default": 0.1 + } + }, + "category": "design", + "parent": [ "three-object-viewer/environment" ], + "apiVersion": 2, + "supports": { + "html": false, + "multiple": true + }, + "editorScript": "file:../../build/block-three-light-block.js", + "editorStyle": "file:../../build/block-three-light-block.css", + "style": "file:../../build/block-three-light-block.css" +} diff --git a/blocks/three-light-block/editor.scss b/blocks/three-light-block/editor.scss new file mode 100644 index 0000000..4a6a4c4 --- /dev/null +++ b/blocks/three-light-block/editor.scss @@ -0,0 +1,42 @@ + + .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; +} + +.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/three-light-block/index.js b/blocks/three-light-block/index.js new file mode 100644 index 0000000..661ed94 --- /dev/null +++ b/blocks/three-light-block/index.js @@ -0,0 +1,26 @@ +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, + apiVersion: 2, + edit: Edit, + save: Save +}); diff --git a/blocks/three-light-block/init.php b/blocks/three-light-block/init.php new file mode 100644 index 0000000..4d16124 --- /dev/null +++ b/blocks/three-light-block/init.php @@ -0,0 +1,10 @@ +%(RHxrVojU!`IsgCb^?zQkXWRFAe?IT;`}?_VuVrlaa8X9A zMnE7CWipBA1-|z#+)EX}*IH`b5eNkC&GM!SsP1k6ofD0vF*qSitSFib;t+_fgNRF` zM=}NI5M~&QZHIZ)ehGtSG3+qDmhPtRTmmzkMcU0{Qg(ZI(|1SGZ5S8_dxWhB012X* z0vcKr9mVDYB0J0?F93dCc#OlK7fl3_b{MMrb~J&*W1=mwmRM7aJpygZV}t@;#I2v5 z!Id2*Tp-{AI9yy@95&7Z%i)FL%xr9IaHi%sb8{2W!h|2s7SKc{Y`*RS#U~CTlTYWd zxB?c3jb7lSg>ZxdI}8TI(Vxi~^e^08Auno?nL)=fqnOc5wt$Z_!ja}BjE7EIovOzzS-gn{5MB1-2dz%qH+Jp*xmhq zH;<0~<`{f|b1WFR&q?@3)1Mpgz2mt|oEMYN5%TCv=U6a$x{HBZhzqctC1OTVi7YUv zd@vh!7;{t8|AG4b8%p3rad;H444HNqvqh(c*a75dS{T!p#SnylW%~-aG1*~%Ll)FU z2^Y%2hs^@dWB!$m`W3UoSefJgvXS3ELSJ$LEb4RTFhF@0i-cbxGJ&w2#|dRcff(P* z#R*MzCTupd*}U1r9Q$bpFmV9r%LVhLFx=EXEMj{t4xCLIrU&9upr1R+JqE9~#O6a~F>Wdz%%;X7bQrhniw7 zzjcZWXD-&*zr_;w*VFu|&KCDK{htp1moWnReR>9tCveW;z6?5W@nuvp+2DNSfrAi| zmXi;GKoePD8T>8%5QsspF!#~M{hnGq4r>}446p&M)YZPam68#IolYjKN+qiY?Yklz zMn~he_0{s)%R7JErTHE{VszJ4)v#@%q!nL3`EbY1Mm{h(U-~Nk$jM3DB{j#I^9B#Q zp!07=US=Jo8+JSo-*;L6cBbYY;^3WY^Yakpo=H26+oQ-sZL8mX*m9p969~<67dd&J z?U+8m4YsQ<>ChcHUV$+iv!ET+ha(;x+TDDmUVp>J_tA|Sh~F>Y*LzNq#589Y78I!# z9ejMFVwvmNwKICC*U!h3hZFqvP01hXPTTKSIsKSc5OdE?X)KiLu_=9>Vb4HrKGiw4 z5VJaRJvp~WF9P4#)1^=RPoEoQ)4Px7>UW3S2)s5rw!bLss%TxJBzn$pRrlRo+Iwxn z?G*u`k+0hb(+TN8r&#^4sgabK(iw+nf?x3`j?B;nJi2^e~s5I*ACkPS&=q(05%GdD7}tX6zM5GdH7w>cSfW% zhRrMZTiDxGzuj9l#Tu&*f*WHUvJ~F887M}v^qM;I5kvZZ{qj-^vChO~zBo4Uz_ih{ zf$6#T#zUmrfO-YouRloqT0AB`nRKQlqvcn%9O$gv_ar&lff*th&hjdnNsv;dL}~D2 zYu&R7#jug3w#O)Eaw+(&=)QZ%Iko9%>FJf4LudSvBT4~><%|5%UVFe<=)R}WY*>QA z-eGHx_BYU`#F>1tlgu=z8cpcsbyG^6KCB$RZS8S#LW~l}lcnn2j()Ou$T2sza zrQq1INlL^XM}`e_4#|Z!&Qx#!^($8Uyyd>(it19`L&Q2jO1r z$qbt%(557^#1A7_aqFgRIw#A6*R z=&qK2FIAag-L|?Wkg1>*_aD7T_KoK9(#jWQJTdNdPux_4;g@&L8tFGHsuRv*h z7rDEIGaiGdI~_26_u!(X!}owJ$h3QA*hsnNK2X;zbU9=XH7vKb^w7lnVSsqL{2~c= zw6_eV9bM-9Ljf#JFR4v}-@5Uw>XVh;$N@RijeYY!33CQBW96^$?4j>dTYa^vvs@B& zLrSCn!;?3x-@+zLq<0+?+emb_>Yi7v=y=(xY~2lHZPGhgOuSLEf0J&v>Ju&RY%O@^ zd~Vg+j~S=Xe*Hu#My72Zu}-eP1vz-23L)nPi#?0fF|j$l_n8i2FknB!W*z*9LN_S1 z$WCdm&JUWkhi`w@wV%$*jI;Q3H$0noKSYM>(GVg))Kp{$;B%smKCZ z98pF%|4d#6A;kEpWSSg|Yewn>3X^*Zw~xS$p8j?!K_7aw329c`o?OuGu&)b9E9S

w z308Me+bo7#)O10Zo?w(NvRG@~3lJTw;D#GA>^WtG08$O?H$Fur*eZC5OlAB^f&}_| zyiu>c1lp-=)su|CtbH-TymE_z53qk}tiLi|zzhtq;&%v1nPm9pAZ8vnK_C32L*}?^xOS;(kp? zWe)(EGwk)3LB{)6%OKK|XzWF$n656fW69~h*lb00Vh1nA4J0f4LKcK*Tr0W>q_j3( z0U*|fB(>h8E{RR2x@OP*tmFa>za=WZptvK5@o`PU2sH!+@m6`wa#q`G8whf`u(RRc z!Tk_XjYu7=aWnGPfIB`HO zn4QMHnRw z(~_~K7N+z|9s0!K8W`zrE$k%-7vD`DK}5AIBtGrnWW55V9xpm=x}Gc7E7m|07-fX}p*A`GX<8Wu2(J>@`)i<0 z7i&UUYZm;r31!&qfek<&*EIE3Jv=ObF%%V25waRjlG~QJtcKrPRlCIF++w$S0qb0r zWsxbBdPz))PKjzD{yP6IeQ+FkW?r}JVQ&@DS0!Bz1&JyN?I{W1e zxk)u-D&{rz!KY?d%|vH_Be8PJqa}aP%bZsOR*JSXR7i8V$*QgMvcb>6! ze1at_7IvHsdJ0 zr{LM}pk}0}&e^%k)$SnE)}PdHudN%DTKfQ^)z6h+r@kxc1!{%E7n7-c208H%3bWBv);1g0zu!oGm(@l5i*q> z;BSV4X^s>x)AqQ-4&gT3*R1gF+prY8%ku5`(L6N?CA6nu)hTz7xqxua<~Y!D@NpC;h2l zI!~xl54JnCl#t++*vB6p1-2c&q2M8@2&Nm6R#fIc`a@s)LUsuMV(|{MVdNCF8~O^` zEzZ7>ayN=Hf0vFz>qA@IAo>L#%P4Mkdo*vg{T5!0Hd!jxlBo=N{!UY6Il}+HH_OAP zz0iu$3&M!C4A#dsX%*P2z5ksZ(j_Plf25MlPPH>hJ zj%LZN6lQDOgoXO2rKc8sSe3f!$#RGbby6$!jkssGBKRw?(@D2?$_>swgB+}2igS%z z_?wcOgB9i(nN0F*bN`UoKeO=J_e0yLktqGmMx-@2(2rIPuN&5Mi2U(_TMUIp#_9a< g<^}Qd)$-yas@Zwn5yr=p3;&9dojr(kPQl6l1?|HN3jhEB literal 0 HcmV?d00001 diff --git a/php/Plugin.php b/php/Plugin.php index 6bb364a..3ad2355 100644 --- a/php/Plugin.php +++ b/php/Plugin.php @@ -326,6 +326,7 @@ function threeobjectviewer_editor_assets() { 'three-object-viewer/three-text-block', 'three-object-viewer/model-block', 'three-object-viewer/audio-block', + 'three-object-viewer/light-block', 'three-object-viewer/npc-block', 'three-object-viewer/sky-block', 'three-object-viewer/npc-block', diff --git a/pluginMachine.json b/pluginMachine.json index 9975edf..cf1062f 100644 --- a/pluginMachine.json +++ b/pluginMachine.json @@ -15,6 +15,7 @@ "three-image-block", "three-video-block", "three-audio-block", + "three-light-block", "three-portal-block", "three-text-block", "spawn-point-block" diff --git a/three-object-viewer.php b/three-object-viewer.php index 0bf3c92..8cb824e 100644 --- a/three-object-viewer.php +++ b/three-object-viewer.php @@ -113,6 +113,9 @@ public static function on_plugin_update() { // Include audio include_once dirname( __FILE__ ) . '/blocks/three-audio-block/init.php'; +// Include light +include_once dirname( __FILE__ ) . '/blocks/three-light-block/init.php'; + // Include portal include_once dirname( __FILE__ ) . '/blocks/three-portal-block/init.php'; From 7a8dfaf5ecfee1de504a2a23ed0ff5b408984f83 Mon Sep 17 00:00:00 2001 From: antpb Date: Wed, 9 Aug 2023 21:58:33 -0500 Subject: [PATCH 2/2] adds light working state --- .../components/EnvironmentFront.js | 15 +--------- .../environment/components/ThreeObjectEdit.js | 30 ++++++++++++++----- .../components/core/front/ThreeLight.js | 7 +---- blocks/three-light-block/Edit.js | 28 ----------------- blocks/three-light-block/block.json | 12 -------- 5 files changed, 24 insertions(+), 68 deletions(-) diff --git a/blocks/environment/components/EnvironmentFront.js b/blocks/environment/components/EnvironmentFront.js index 1752dbc..f630fcf 100644 --- a/blocks/environment/components/EnvironmentFront.js +++ b/blocks/environment/components/EnvironmentFront.js @@ -700,7 +700,7 @@ export default function EnvironmentFront(props) { padding: "0", position: "relative", zIndex: 1 - }} + }} > { isVRCompatible() && } {/* */} @@ -1232,19 +1232,6 @@ export default function EnvironmentFront(props) { ? item.querySelector("p.light-block-rotationZ").innerText : ""; - const lightTargetX = item.querySelector("p.light-block-targetX") - ? item.querySelector("p.light-block-targetX").innerText - : ""; - - const lightTargetY = item.querySelector("p.light-block-targetY") - ? item.querySelector("p.light-block-targetY").innerText - : ""; - - const lightTargetZ = item.querySelector("p.light-block-targetZ") - ? item.querySelector("p.light-block-targetZ").innerText - : ""; - - const lightType = item.querySelector("p.light-block-type") ? item.querySelector("p.light-block-type").innerText : "ambient"; diff --git a/blocks/environment/components/ThreeObjectEdit.js b/blocks/environment/components/ThreeObjectEdit.js index 3ae032e..3e2a227 100644 --- a/blocks/environment/components/ThreeObjectEdit.js +++ b/blocks/environment/components/ThreeObjectEdit.js @@ -480,11 +480,6 @@ function LightObject(threeLight) { threeLight.positionY, threeLight.positionZ ]} - target-position={[ - threeLight.targetX, - threeLight.targetY, - threeLight.targetZ - ]} /> ); break; @@ -644,8 +639,6 @@ function LightObject(threeLight) { ); } - - function VideoObject(threeVideo) { const [url, setUrl] = useState(threeVideo.modelUrl); const [screen, setScreen] = useState(null); @@ -1446,8 +1439,23 @@ function ThreeObject(props) { const editorHtmlToAdd = []; let htmlobject; let htmlobjectId; + const { select } = wp.data; - const currentBlocks = wp.data.select("core/block-editor").getBlocks(); + function getNestedBlocks(clientId) { + const blockEditor = select("core/block-editor"); + const blocks = blockEditor.getBlocks(clientId); + let allBlocks = [...blocks]; + + blocks.forEach(block => { + const innerBlocks = getNestedBlocks(block.clientId); + allBlocks = [...allBlocks, ...innerBlocks]; + }); + + return allBlocks; + } + + const currentBlocks = getNestedBlocks(props.clientId); + if (currentBlocks) { currentBlocks.forEach((block) => { if (block.name === "three-object-viewer/environment") { @@ -1803,6 +1811,10 @@ function ThreeObject(props) { rotationX={model.lightObject.rotationX} rotationY={model.lightObject.rotationY} rotationZ={model.lightObject.rotationZ} + targetX={model.lightObject.targetX} + targetY={model.lightObject.targetY} + targetZ={model.lightObject.targetZ} + selected={props.selected} lightID={model.lightID} focusID ={props.focusID} @@ -1843,6 +1855,7 @@ function ThreeObject(props) { } export default function ThreeObjectEdit(props) { + const [transformMode, setTransformMode] = useState("translate"); const ObjectControls = (props) => { @@ -1999,6 +2012,7 @@ export default function ThreeObjectEdit(props) { focusPosition={props.focusPosition} shouldFocus={shouldFocus} changeFocusPoint={props.changeFocusPoint} + clientId={props.clientId} /> )} diff --git a/blocks/environment/components/core/front/ThreeLight.js b/blocks/environment/components/core/front/ThreeLight.js index 84370ff..500918b 100644 --- a/blocks/environment/components/core/front/ThreeLight.js +++ b/blocks/environment/components/core/front/ThreeLight.js @@ -20,9 +20,6 @@ import { * @param {number} threeLight.positionX - The X-coordinate of the light's position. * @param {number} threeLight.positionY - The Y-coordinate of the light's position. * @param {number} threeLight.positionZ - The Z-coordinate of the light's position. - * @param {number} threeLight.targetX - The X-coordinate for the target the light should point to (for DirectionalLight & SpotLight). - * @param {number} threeLight.targetY - The Y-coordinate for the target the light should point to (for DirectionalLight & SpotLight). - * @param {number} threeLight.targetZ - The Z-coordinate for the target the light should point to (for DirectionalLight & SpotLight). * @param {number} threeLight.angle - Maximum extent of the spotlight, in radians (for SpotLight). * @param {number} threeLight.penumbra - Percentage of the spotlight cone that is attenuated due to penumbra (for SpotLight). * @@ -39,11 +36,10 @@ export function ThreeLight(threeLight) { case "directional": lightInstance = new DirectionalLight(color, threeLight.intensity); lightInstance.position.set(threeLight.positionX, threeLight.positionY, threeLight.positionZ); - lightInstance.target.position.set(threeLight.targetX, threeLight.targetY, threeLight.targetZ); break; case "ambient": - lightInstance = new AmbientLight(color, threeLight.intensity); + lightInstance = new AmbientLight(color, Number(threeLight.intensity)); break; case "point": @@ -54,7 +50,6 @@ export function ThreeLight(threeLight) { case "spot": lightInstance = new SpotLight(color, threeLight.intensity, threeLight.distance, threeLight.angle, threeLight.penumbra); lightInstance.position.set(threeLight.positionX, threeLight.positionY, threeLight.positionZ); - lightInstance.target.position.set(threeLight.targetX, threeLight.targetY, threeLight.targetZ); break; default: diff --git a/blocks/three-light-block/Edit.js b/blocks/three-light-block/Edit.js index 202ee28..d7bcb3e 100644 --- a/blocks/three-light-block/Edit.js +++ b/blocks/three-light-block/Edit.js @@ -139,34 +139,6 @@ export default function Edit({ attributes, setAttributes, isSelected, clientId } onChange={(value) => onChangeRotationZ(value)} /> - - - {__("Light Target", "three-object-viewer")} - - - - onChangeTargetX(value)} - /> - onChangeTargetY(value)} - /> - onChangeTargetZ(value)} - /> -