diff --git a/blocks/environment/components/EnvironmentFront.js b/blocks/environment/components/EnvironmentFront.js index ddd4e4e..f630fcf 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"; @@ -699,30 +700,13 @@ export default function EnvironmentFront(props) { padding: "0", position: "relative", zIndex: 1 - }} + }} > { isVRCompatible() && } {/* */} {/* */} - - }> ); })} + {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 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..3e2a227 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,206 @@ 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,11 +1432,30 @@ function ThreeObject(props) { let audioObject; const audioElementsToAdd = []; + let lightID; + let lightObject; + const lightElementsToAdd = []; + 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") { @@ -1295,6 +1515,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 +1782,50 @@ function ThreeObject(props) { ); } })} + { lightElementsToAdd.length < 1 && ( + <> + + + + )} + {Object.values(lightElementsToAdd).map((model, index) => { + if (model.lightObject.type) { + return ( + + ); + } + })} {Object.values(editorHtmlToAdd).map((text, index) => { return ( { @@ -1706,7 +1979,7 @@ export default function ThreeObjectEdit(props) { position: [0, 0, 20] }} ref={canvasRef} - shadowMap + // shadowMap performance={{ min: 0.5 }} onCreated={handleCanvasCreated} style={{ @@ -1723,14 +1996,6 @@ export default function ThreeObjectEdit(props) { makeDefault zoom={1} /> - - {props.url && ( {/* */} @@ -1747,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 new file mode 100644 index 0000000..500918b --- /dev/null +++ b/blocks/environment/components/core/front/ThreeLight.js @@ -0,0 +1,67 @@ +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.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); + break; + + case "ambient": + lightInstance = new AmbientLight(color, Number(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); + 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..d7bcb3e --- /dev/null +++ b/blocks/three-light-block/Edit.js @@ -0,0 +1,275 @@ +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)} + /> + + + 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..42a8785 --- /dev/null +++ b/blocks/three-light-block/block.json @@ -0,0 +1,69 @@ +{ + "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 + }, + "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 @@ +