Skip to content

Commit

Permalink
V 1.5.0 - Audio Block (#57)
Browse files Browse the repository at this point in the history 
* dont lose the nights work

* add audio block frontend and icons

* adds changelog
  • Loading branch information
@antpb
antpb authored Aug 3, 2023
1 parent 3ccdcb6 commit 0e2922d
Show file tree
Hide file tree
Showing 12 changed files with 468 additions and 64 deletions.
113 changes: 113 additions & 0 deletions blocks/environment/components/EnvironmentFront.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { BoxGeometry } from "three";

import { ThreeImage } from "./core/front/ThreeImage";
import { ThreeVideo } from "./core/front/ThreeVideo";
import { ThreeAudio } from "./core/front/ThreeAudio";
import { ModelObject } from "./core/front/ModelObject";
import { NPCObject } from "./core/front/NPCObject";
import { Portal } from "./core/front/Portal";
Expand Down Expand Up @@ -1089,6 +1090,118 @@ export default function EnvironmentFront(props) {
/>
);
})}
{Object.values(props.audiosToAdd).map((item, index) => {
const audioPosX = item.querySelector("p.audio-block-positionX")
? item.querySelector("p.audio-block-positionX").innerText
: "";

const audioPosY = item.querySelector("p.audio-block-positionY")
? item.querySelector("p.audio-block-positionY").innerText
: "";

const audioPosZ = item.querySelector("p.audio-block-positionZ")
? item.querySelector("p.audio-block-positionZ").innerText
: "";

const audioScaleX = item.querySelector("p.audio-block-scaleX")
? item.querySelector("p.audio-block-scaleX").innerText
: "";

const audioScaleY = item.querySelector("p.audio-block-scaleY")
? item.querySelector("p.audio-block-scaleY").innerText
: "";

const audioScaleZ = item.querySelector("p.audio-block-scaleZ")
? item.querySelector("p.audio-block-scaleZ").innerText
: "";

const audioRotationX = item.querySelector("p.audio-block-rotationX")
? item.querySelector("p.audio-block-rotationX").innerText
: "";

const audioRotationY = item.querySelector("p.audio-block-rotationY")
? item.querySelector("p.audio-block-rotationY").innerText
: "";

const audioRotationZ = item.querySelector("p.audio-block-rotationZ")
? item.querySelector("p.audio-block-rotationZ").innerText
: "";

const audioUrl = item.querySelector("p.audio-block-url")
? item.querySelector("p.audio-block-url").innerText
: "";

const autoPlay = item.querySelector("p.audio-block-autoPlay")
? item.querySelector("p.audio-block-autoPlay").innerText === "1"
: false;

const loop = item.querySelector("p.audio-block-loop")
? item.querySelector("p.audio-block-loop").innerText === "1"
: false;

const volume = item.querySelector("p.audio-block-volume")
? Number(item.querySelector("p.audio-block-volume").innerText)
: 1;

const positional = item.querySelector("p.audio-block-positional")
? item.querySelector("p.audio-block-positional").innerText === "1"
: false;

const coneInnerAngle = item.querySelector("p.audio-block-coneInnerAngle")
? Number(item.querySelector("p.audio-block-coneInnerAngle").innerText)
: 1;

const coneOuterAngle = item.querySelector("p.audio-block-coneOuterAngle")
? Number(item.querySelector("p.audio-block-coneOuterAngle").innerText)
: 1;

const coneOuterGain = item.querySelector("p.audio-block-coneOuterGain")
? Number(item.querySelector("p.audio-block-coneOuterGain").innerText)
: 1;

const distanceModel = item.querySelector("p.audio-block-distanceModel")
? item.querySelector("p.audio-block-distanceModel").innerText
: "inverse";

const maxDistance = item.querySelector("p.audio-block-maxDistance")
? Number(item.querySelector("p.audio-block-maxDistance").innerText)
: 1;

const refDistance = item.querySelector("p.audio-block-refDistance")
? Number(item.querySelector("p.audio-block-refDistance").innerText)
: 1;

const rolloffFactor = item.querySelector("p.audio-block-rolloffFactor")
? Number(item.querySelector("p.audio-block-rolloffFactor").innerText)
: 1;

return (
<ThreeAudio
key={index}
audioUrl={audioUrl}
positionX={audioPosX}
positionY={audioPosY}
positionZ={audioPosZ}
scaleX={audioScaleX}
scaleY={audioScaleY}
scaleZ={audioScaleZ}
rotationX={audioRotationX}
rotationY={audioRotationY}
rotationZ={audioRotationZ}
autoPlay={autoPlay ? "1" : "0"} // Convert bool to string "1" or "0"
loop={loop ? "1" : "0"} // Convert bool to string "1" or "0"
volume={volume}
positional={positional ? "1" : "0"} // Convert bool to string "1" or "0"
coneInnerAngle={coneInnerAngle}
coneOuterAngle={coneOuterAngle}
coneOuterGain={coneOuterGain}
distanceModel={distanceModel}
maxDistance={maxDistance}
refDistance={refDistance}
rolloffFactor={rolloffFactor}
/>
);
})}
{Object.values(
props.npcsToAdd
).map((npc, index) => {
Expand Down
6 changes: 4 additions & 2 deletions blocks/environment/components/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ export default function Player(props) {
const currentTime = state.clock.elapsedTime;
const timeSinceLastUpdate = currentTime - lastUpdateTime;
let rigidBodyPosition = [0, 0, 0]
if(rigidRef){
if(rigidRef.current?.translation()){
rigidBodyPosition = rigidRef.current.translation();
}
const forward = new Vector3();
Expand Down Expand Up @@ -448,7 +448,9 @@ export default function Player(props) {
// Apply slerp to the player's current quaternion, gradually aligning it with the desired quaternion
playerController.scene.quaternion.slerp(desiredQuaternion, rotationSpeed);
}
castRef.current.setRotation(desiredQuaternion);
if(castRef.current){
castRef.current.setRotation(desiredQuaternion);
}

if (isMoving && canMoveRef.current) {
newPosition = [
Expand Down
146 changes: 146 additions & 0 deletions blocks/environment/components/ThreeObjectEdit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { Perf } from "r3f-perf";
// import EditControls from "./EditControls";
import { Resizable } from "re-resizable";
import defaultFont from "../../../inc/fonts/roboto.woff";
import audioIcon from "../../../inc/assets/audio_icon.png";

const { registerStore } = wp.data;

Expand Down Expand Up @@ -328,6 +329,115 @@ function ImageObject(threeImage) {
);
}

function AudioObject(threeAudio) {
const texture2 = useLoader(THREE.TextureLoader, (threeObjectPlugin + audioIcon));

const [threeAudioBlockAttributes, setThreeAudioBlockAttributes] = useState(
wp.data
.select("core/block-editor")
.getBlockAttributes(threeAudio.audioID)
);

useEffect(() => {
const attributes = wp.data
.select("core/block-editor")
.getBlockAttributes(threeAudio.audioID);
setThreeAudioBlockAttributes(attributes);
}, [threeAudio.audioID]);

const [isSelected, setIsSelected] = useState();

const clicked = true;
const audioObj = useRef();
const TransformController = ({ condition, wrap, children }) =>
condition ? wrap(children) : children;

// useEffect(() => void (clicked && video.play()), [video, clicked]);

useEffect(() => {
if( threeAudio.focusID === threeAudio.audioID ) {
const someFocus = new THREE.Vector3(Number(threeAudio.positionX), Number(threeAudio.positionY), Number(threeAudio.positionZ));
threeAudio.changeFocusPoint(someFocus);
}
}, [threeAudio.focusID]);

return (
<Select
box
multiple
onChange={(e) => {
e.length !== 0 ? setIsSelected(true) : setIsSelected(false);
}}
filter={(items) => items}
>
<TransformController
condition={threeAudio.focusID === threeAudio.audioID}
wrap={(children) => (
<TransformControls
enabled={threeAudio.focusID === threeAudio.audioID}
mode={
threeAudio.transformMode
? threeAudio.transformMode
: "translate"
}
object={audioObj}
size={0.5}
onMouseUp={(e) => {
const rot = new THREE.Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(e?.target.worldQuaternion);
wp.data
.dispatch("core/block-editor")
.updateBlockAttributes(threeAudio.audioID, {
positionX: e?.target.worldPosition.x,
positionY: e?.target.worldPosition.y,
positionZ: e?.target.worldPosition.z,
rotationX: rot.x,
rotationY: rot.y,
rotationZ: rot.z,
});
setThreeAudioBlockAttributes(
wp.data
.select("core/block-editor")
.getBlockAttributes(threeAudio.audioID)
);
}}
>
{children}
</TransformControls>
)}
>
<group
ref={audioObj}
position={[
threeAudioBlockAttributes.positionX,
threeAudioBlockAttributes.positionY,
threeAudioBlockAttributes.positionZ
]}
rotation={[
threeAudioBlockAttributes.rotationX,
threeAudioBlockAttributes.rotationY,
threeAudioBlockAttributes.rotationZ
]}
>
<mesh>
<meshBasicMaterial
transparent
side={THREE.DoubleSide}
map={texture2}
/>
<planeGeometry
args={[
1, 1
]}
/>
</mesh>
</group>
</TransformController>
</Select>
);
}

function VideoObject(threeVideo) {
const [url, setUrl] = useState(threeVideo.modelUrl);
const [screen, setScreen] = useState(null);
Expand Down Expand Up @@ -1117,6 +1227,10 @@ function ThreeObject(props) {
let videoobject;
const videoElementsToAdd = [];

let audioID;
let audioObject;
const audioElementsToAdd = [];

const editorHtmlToAdd = [];
let htmlobject;
let htmlobjectId;
Expand Down Expand Up @@ -1173,6 +1287,14 @@ function ThreeObject(props) {
videoID = innerBlock.clientId;
videoElementsToAdd.push({ videoobject, videoID });
}
if (
innerBlock.name ===
"three-object-viewer/three-audio-block"
) {
audioObject = innerBlock.attributes;
audioID = innerBlock.clientId;
audioElementsToAdd.push({ audioObject, audioID });
}
if (
innerBlock.name ===
"three-object-viewer/three-portal-block"
Expand Down Expand Up @@ -1408,6 +1530,30 @@ function ThreeObject(props) {
);
}
})}
{Object.values(audioElementsToAdd).map((model, index) => {
if (model.audioObject.audioUrl) {
return (
<AudioObject
url={model.audioObject.audioUrl}
customModel={model.audioObject.customModel}
modelUrl={model.audioObject.modelUrl}
positionX={model.audioObject.positionX}
positionY={model.audioObject.positionY}
positionZ={model.audioObject.positionZ}
rotationX={model.audioObject.rotationX}
rotationY={model.audioObject.rotationY}
rotationZ={model.audioObject.rotationZ}
selected={props.selected}
audioID={model.audioID}
focusID ={props.focusID}
changeFocusPoint={props.changeFocusPoint}
setFocusPosition={props.setFocusPosition}
transformMode={props.transformMode}
shouldFocus={props.shouldFocus}
/>
);
}
})}
{Object.values(editorHtmlToAdd).map((text, index) => {
return (
<TextObject
Expand Down
Loading

0 comments on commit 0e2922d

Please sign in to comment.