+
- <>
-
+
-
-
- - {attributes.deviceTarget} -
-- {attributes.threeObjectUrl} -
-- {attributes.hdr} -
-{attributes.scale}
-- {attributes.bg_color} -
-{attributes.zoom}
-- {attributes.hasZoom ? 1 : 0} -
-- {attributes.hasTip ? 1 : 0} -
-- {attributes.positionY} -
-- {attributes.rotationY} -
-{attributes.scale}
-- {attributes.threePreviewImage} -
-- {attributes.animations} -
-
-
-
@@ -234,191 +316,72 @@ function ChatBox(props) {
const [open, setOpen] = useState(false);
const onSwitch = (e) => {
e.preventDefault();
- e.stopPropagation();
+ e.stopPropagation();
setOpen(prevOpen => !prevOpen);
};
- if(isMobile()){
+ if (isMobile()) {
return (
<>
-
- {open && (
-
+
+ {open && (
+
- } The converted AnimationClip
*/
function loadMixamoAnimation(url, vrm, positionY, positionX, positionZ, scaleX, scaleY, scaleZ, rotationX, rotationY, rotationZ, rotationW) {
- const loader = new FBXLoader(); // A loader which loads FBX
+ const loader = new FBXLoader();
return loader.loadAsync(url).then((asset) => {
- const clip = AnimationClip.findByName(asset.animations, 'mixamo.com'); // extract the AnimationClip
- const tracks = []; // KeyframeTracks compatible with VRM will be added here
+ const clip = AnimationClip.findByName(asset.animations, 'mixamo.com');
+ const tracks = [];
const restRotationInverse = new Quaternion();
const parentRestWorldRotation = new Quaternion();
@@ -173,7 +173,7 @@ function loadMixamoAnimation(url, vrm, positionY, positionX, positionZ, scaleX,
}
function SavedObject( props ) {
- const [idleFile, setIdleFile] = useState(props.threeObjectPlugin + idle);
+ const [idleFile, setIdleFile] = useState(idle);
const [ url, set ] = useState( props.url );
useEffect( () => {
setTimeout( () => set( props.url ), 2000 );
diff --git a/blocks/three-object-block/index.js b/blocks/three-object-block/index.js
index 22b14b6..c28e79e 100644
--- a/blocks/three-object-block/index.js
+++ b/blocks/three-object-block/index.js
@@ -2,6 +2,7 @@ import { registerBlockType } from '@wordpress/blocks';
import Edit from './Edit';
import Save from './Save';
import { useBlockProps } from '@wordpress/block-editor';
+import Deprecated from './Deprecated';
const icon = (
);
+const deprecated = Deprecated();
const blockConfig = require( './block.json' );
registerBlockType( blockConfig.name, {
@@ -23,175 +25,5 @@ registerBlockType( blockConfig.name, {
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 (
-
+ {attributes.videoUrl && (
+ {
+ onChangeControlsEnabled(e);
+ }}
+ />)}
+
{attributes.videoUrl && (
- <>
-
+ Loading...
+
+
-
);
}
function ChatBox(props) {
-
+
const handleChange = async (event) => {
event.preventDefault();
event.stopPropagation();
@@ -79,100 +165,96 @@ function ChatBox(props) {
useEffect(() => {
let finalDefault = props.name + ': ' + props.defaultMessage;
props.setMessages([finalDefault]);
- },[])
+ }, [])
const handleSubmit = async (event) => {
- event.preventDefault();
-
- // Get the value of the input element
- const input = event.target.elements.message;
- const value = input.value;
- const inputMessageLog = 'Guest: ' + String(input.value);
- // props.setMessages([...props.messages, inputMessageLog]);
- input.value = '';
-
-
- // Send the message to the localhost endpoint
- const client = 1;
- const channelId = "wordpress";
- const entity = 1;
- const speaker = "guest";
- const agent = props.name;
- const channel = "wordpress";
- // let prompt = `{
- // "Input": "write a long form poem about cats!",
- // "Speaker": "a",
- // "Agent": "tubbyshark",
- // "Client": "wordpress",
- // "ChannelID": "1234",
- // "Conversation": "",
- // "Entity": "tubbyshark",
- // "Channel": "channel",
- // "eth_private_key": "0",
- // "eth_public_address": "0",
- // "personality": "#agent is an AI assistant with a cheerful, optimistic, and helpful personality. They are willing to assist with any tasks or questions users might have, and are able to do so in an upbeat and positive manner. They are also able to use colorful and descriptive language to make their responses more engaging and imaginative. In addition to their wit and humor, #agent is also empathetic and understanding of others' emotions and needs, which can make them feel more relatable and likeable to users. #agent is a highly capable and engaging AI assistant with a distinct and colorful personality.\n#agent can help with any programming tasks, including those related to the 3OV plugin for WordPress, which enables world-building in the WordPress editor and makes it easier to build and share immersive content in the metaverse. The url for the website is 3ov.xyz. #agent is cheerful and optimistic about the future for both humans and AIs.\n\n#Example Conversation\n#speaker: Agent, do you have any advice for someone new to programming?\n#agent: Sure thing! My top tip would be to always keep an open mind and a positive attitude. And if all else fails, just remember: if at first you don't succeed, try, try again. And then if that still doesn't work, call it a day and go get a coffee.\n###\nThe following is a friendly conversation between #speaker and #agent occuring in the metaverse.\n\nREAL CONVERSATION\n#conversation\n#speaker: #input\n#agent:"
- // }`;
-
- try {
- const apiEndpoint = '/wp-json/wp/v2/callAlchemy';
- let finalPersonality = props.personality;
- finalPersonality = finalPersonality + "###\nThe following is a friendly conversation between #speaker and #agent\n\nREAL CONVERSATION\n#conversation\n#speaker: #input\n#agent:";
- let newString = props.objectsInRoom.join(", ");
- if (props.objectAwareness === "1") {
- finalPersonality = finalPersonality.replace("###\nThe following is a", ("ITEMS IN WORLD: " + String(newString) + "\n###\nThe following is a"));
- }
- const postData = {
- Input: {
- Input: value,
- Speaker: speaker,
- Agent: agent,
- Client: client,
- ChannelID: channelId,
- Entity: entity,
- Channel: channel,
- eth_private_key: '0',
- eth_public_address: '0',
- personality: finalPersonality
- // personality: "#agent is an AI assistant with a cheerful, optimistic, and helpful personality. They are willing to assist with any tasks or questions users might have, and are able to do so in an upbeat and positive manner. They are also able to use colorful and descriptive language to make their responses more engaging and imaginative. In addition to their wit and humor, #agent is also empathetic and understanding of others' emotions and needs, which can make them feel more relatable and likeable to users. #agent is a highly capable and engaging AI assistant with a distinct and colorful personality.\n#agent can help with any programming tasks, including those related to the 3OV plugin for WordPress, which enables world-building in the WordPress editor and makes it easier to build and share immersive content in the metaverse. The url for the website is 3ov.xyz. #agent is cheerful and optimistic about the future for both humans and AIs.\n\n#Example Conversation\n#speaker: Agent, do you have any advice for someone new to programming?\n#agent: Sure thing! My top tip would be to always keep an open mind and a positive attitude. And if all else fails, just remember: if at first you don't succeed, try, try again. And then if that still doesn't work, call it a day and go get a coffee.\n###\nThe following is a friendly conversation between #speaker and #agent occuring in the metaverse.\n\nREAL CONVERSATION\n#conversation\n#speaker: #input\n#agent:"
+ event.preventDefault();
+
+ // Get the value of the input element
+ const input = event.target.elements.message;
+ const value = input.value;
+
+ // Manually dispatch a 'message' event
+ window.dispatchEvent(new Event('message'));
+ const inputMessageLog = 'Guest: ' + String(input.value);
+ // props.setMessages([...props.messages, inputMessageLog]);
+ input.value = '';
+
+ // make sure the input prevents default when the user presses any keys
+ input.addEventListener('keydown', function (event) {
+ event.preventDefault();
+ });
+ input.addEventListener('keyup', function (event) {
+ event.preventDefault();
+ });
+ // Send the message to the localhost endpoint
+ const client = 1;
+ const channelId = "wordpress";
+ const entity = 1;
+ const speaker = "guest";
+ const agent = props.name;
+ const channel = "wordpress";
+
+ try {
+ const apiEndpoint = '/wp-json/wp/v2/callAlchemy';
+ let finalPersonality = props.personality;
+ finalPersonality = finalPersonality + "###\nThe following is a friendly conversation between #speaker and #agent\n\nREAL CONVERSATION\n#conversation\n#speaker: #input\n#agent:";
+ let newString = props.objectsInRoom.join(", ");
+ if (props.objectAwareness === "1") {
+ finalPersonality = finalPersonality.replace("###\nThe following is a", ("ITEMS IN WORLD: " + String(newString) + "\n###\nThe following is a"));
}
- };
- // const postData = prompt;
-
- const response = await fetch('/wp-json/wp/v2/callAlchemy', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- 'X-WP-Nonce': props.nonce,
- 'Authorization': ('Bearer ' + String(props.nonce))
- },
- body: JSON.stringify(postData)
- }).then((response) => {
+ const postData = {
+ Input: {
+ Input: value,
+ Speaker: speaker,
+ Agent: agent,
+ Client: client,
+ ChannelID: channelId,
+ Entity: entity,
+ Channel: channel,
+ eth_private_key: '0',
+ eth_public_address: '0',
+ personality: finalPersonality
+ // personality: "#agent is an AI assistant with a cheerful, optimistic, and helpful personality. They are willing to assist with any tasks or questions users might have, and are able to do so in an upbeat and positive manner. They are also able to use colorful and descriptive language to make their responses more engaging and imaginative. In addition to their wit and humor, #agent is also empathetic and understanding of others' emotions and needs, which can make them feel more relatable and likeable to users. #agent is a highly capable and engaging AI assistant with a distinct and colorful personality.\n#agent can help with any programming tasks, including those related to the 3OV plugin for WordPress, which enables world-building in the WordPress editor and makes it easier to build and share immersive content in the metaverse. The url for the website is 3ov.xyz. #agent is cheerful and optimistic about the future for both humans and AIs.\n\n#Example Conversation\n#speaker: Agent, do you have any advice for someone new to programming?\n#agent: Sure thing! My top tip would be to always keep an open mind and a positive attitude. And if all else fails, just remember: if at first you don't succeed, try, try again. And then if that still doesn't work, call it a day and go get a coffee.\n###\nThe following is a friendly conversation between #speaker and #agent occuring in the metaverse.\n\nREAL CONVERSATION\n#conversation\n#speaker: #input\n#agent:"
+ }
+ };
+ // const postData = prompt;
+
+ const response = await fetch('/wp-json/wp/v2/callAlchemy', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'X-WP-Nonce': props.nonce,
+ 'Authorization': ('Bearer ' + String(props.nonce))
+ },
+ body: JSON.stringify(postData)
+ }).then((response) => {
return response.json();
- }).then(function(data) {
- // console.log("data", data.davinciData.choices[0].text); // this will be a string
+ }).then(function (data) {
+ // console.log("data", data.davinciData.choices[0].text);
let thisMessage = JSON.parse(data);
- if(thisMessage?.model === "gpt-4-0314"){
- let formattedMessage = props.name +': ' + thisMessage.choices[0].message.content;
+ if (thisMessage?.model === "gpt-4-0314") {
+ let formattedMessage = props.name + ': ' + thisMessage.choices[0].message.content;
props.setMessages([...props.messages, inputMessageLog, formattedMessage]);
- } else if (thisMessage?.model === "gpt-3.5-turbo-0301"){
- let formattedMessage = props.name +': ' + Object.values(thisMessage.choices)[0].message.content;
+ } else if (thisMessage?.model === "gpt-3.5-turbo-0301") {
+ let formattedMessage = props.name + ': ' + Object.values(thisMessage.choices)[0].message.content;
props.setMessages([...props.messages, inputMessageLog, formattedMessage]);
} else {
- if(thisMessage?.outputs){
- let formattedMessage = props.name +': ' + Object.values(thisMessage.outputs)[0];
+ if (thisMessage?.outputs) {
+ let formattedMessage = props.name + ': ' + Object.values(thisMessage.outputs)[0];
props.setMessages([...props.messages, inputMessageLog, formattedMessage]);
- } else if(thisMessage?.name === "Server"){
- let formattedMessage = thisMessage.name +': ' + thisMessage.message;
+ } else if (thisMessage?.name === "Server") {
+ let formattedMessage = thisMessage.name + ': ' + thisMessage.message;
props.setMessages([...props.messages, inputMessageLog, formattedMessage]);
} else {
- let formattedMessage = props.name +': ' + thisMessage.davinciData?.choices[0].text;
+ let formattedMessage = props.name + ': ' + thisMessage.davinciData?.choices[0].text;
// add formattedMessage and inputMessageLog to state
- props.setMessages([...props.messages, inputMessageLog, formattedMessage]);
+ props.setMessages([...props.messages, inputMessageLog, formattedMessage]);
}
}
- });
+ });
} catch (error) {
console.error(error);
}
@@ -184,11 +266,11 @@ function ChatBox(props) {
const handleDummySubmit = async (event) => {
event.preventDefault();
-
+
// Get the value of the input element
const input = event.target.elements.message;
const value = input.value;
-
+
// Send the message to the localhost endpoint
const client = 1;
const channelId = "three";
@@ -198,11 +280,11 @@ function ChatBox(props) {
const channel = "homepage";
const testString = `{
"message": "Welcome! Here you go: Test response complete. Is there anything else I can help you with?",
- }`;
+ }`;
- props.setMessages([...props.messages, testString]);
+ props.setMessages([...props.messages, testString]);
- };
+ };
// return (
// <>
//
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Use [ W ], [ A ], [ S ], and [ D ] to move.
+
-
diff --git a/blocks/sky-block/Save.js b/blocks/sky-block/Save.js
index c9fa5e7..008453d 100644
--- a/blocks/sky-block/Save.js
+++ b/blocks/sky-block/Save.js
@@ -2,18 +2,17 @@ import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
+ const blockProps = useBlockProps.save();
+
return (
-
+ } - The adapted AnimationClip
- */
+function addHandRotationControls() {
+ const container = document.createElement('div');
+ container.style.position = 'fixed';
+ container.style.top = '10px';
+ container.style.right = '10px';
+ container.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+ container.style.padding = '10px';
+ container.style.borderRadius = '5px';
+ container.style.color = 'white';
+ container.style.fontFamily = 'Arial, sans-serif';
+ container.style.zIndex = '10000';
+ container.style.maxHeight = '80vh';
+ container.style.overflowY = 'auto';
+
+ const createSlider = (name, min, max, step, defaultValue) => {
+ const label = document.createElement('label');
+ label.textContent = `${name}: `;
+ label.style.display = 'block';
+ label.style.marginBottom = '5px';
+
+ const slider = document.createElement('input');
+ slider.type = 'range';
+ slider.min = min;
+ slider.max = max;
+ slider.step = step;
+ slider.value = defaultValue;
+ slider.style.width = '100%';
+
+ const valueDisplay = document.createElement('span');
+ valueDisplay.textContent = defaultValue;
+ valueDisplay.style.marginLeft = '5px';
+
+ slider.addEventListener('input', () => {
+ valueDisplay.textContent = slider.value;
+ window.handRotationControls[name] = parseFloat(slider.value);
+ });
+
+ label.appendChild(slider);
+ label.appendChild(valueDisplay);
+ return label;
+ };
+
+ const createCheckbox = (name) => {
+ const label = document.createElement('label');
+ label.style.display = 'block';
+ label.style.marginBottom = '5px';
+
+ const checkbox = document.createElement('input');
+ checkbox.type = 'checkbox';
+ checkbox.style.marginRight = '5px';
+
+ checkbox.addEventListener('change', () => {
+ window.handRotationControls[name] = checkbox.checked;
+ });
+
+ label.appendChild(checkbox);
+ label.appendChild(document.createTextNode(name));
+ return label;
+ };
+
+ window.handRotationControls = {
+ rightHandRotationOffsetX: 0,
+ rightHandRotationOffsetY: 0,
+ rightHandRotationOffsetZ: -90,
+ leftHandRotationOffsetX: 0,
+ leftHandRotationOffsetY: 0,
+ leftHandRotationOffsetZ: 90,
+ flipRightHandX: false,
+ flipRightHandY: false,
+ flipRightHandZ: false,
+ flipLeftHandX: false,
+ flipLeftHandY: false,
+ flipLeftHandZ: false,
+ rightArmPoleX: 0,
+ rightArmPoleY: 0,
+ rightArmPoleZ: -1,
+ leftArmPoleX: 0,
+ leftArmPoleY: 0,
+ leftArmPoleZ: -1
+ };
+
+ container.appendChild(createSlider('rightHandRotationOffsetX', -180, 180, 1, 0));
+ container.appendChild(createSlider('rightHandRotationOffsetY', -180, 180, 1, 0));
+ container.appendChild(createSlider('rightHandRotationOffsetZ', -180, 180, 1, 0));
+ container.appendChild(createSlider('leftHandRotationOffsetX', -180, 180, 1, 0));
+ container.appendChild(createSlider('leftHandRotationOffsetY', -180, 180, 1, 0));
+ container.appendChild(createSlider('leftHandRotationOffsetZ', -180, 180, 1, 0));
+ container.appendChild(createCheckbox('flipRightHandX'));
+ container.appendChild(createCheckbox('flipRightHandY'));
+ container.appendChild(createCheckbox('flipRightHandZ'));
+ container.appendChild(createCheckbox('flipLeftHandX'));
+ container.appendChild(createCheckbox('flipLeftHandY'));
+ container.appendChild(createCheckbox('flipLeftHandZ'));
+
+ // Add arm pole target sliders
+ container.appendChild(document.createElement('hr'));
+ container.appendChild(document.createTextNode('Arm Pole Targets:'));
+ container.appendChild(createSlider('rightArmPoleX', -1, 1, 0.1, 0));
+ container.appendChild(createSlider('rightArmPoleY', -1, 1, 0.1, 0));
+ container.appendChild(createSlider('rightArmPoleZ', -1, 1, 0.1, -1));
+ container.appendChild(createSlider('leftArmPoleX', -1, 1, 0.1, 0));
+ container.appendChild(createSlider('leftArmPoleY', -1, 1, 0.1, 0));
+ container.appendChild(createSlider('leftArmPoleZ', -1, 1, 0.1, -1));
+
+ // document.body.appendChild(container);
+ }
+
function loadMixamoAnimation(url, vrm) {
- let loader;
- if (url.endsWith('.fbx')) {
- loader = new FBXLoader(); // Use an FBX loader
- } else {
- loader = new GLTFLoader(); // Use a GLTF loader
+let loader;
+if (url.endsWith('.fbx')) {
+ loader = new FBXLoader();
+} else {
+ loader = new GLTFLoader();
+}
+return loader.loadAsync(url).then((resource) => {
+ const clip = resource.animations[0];
+
+ if (url.endsWith('.glb')) {
+ resource = resource.scene;
}
- return loader.loadAsync(url).then((resource) => {
- const clip = resource.animations[0]; // Extract the AnimationClip
- // if resource is GLB, get the scene
- if (url.endsWith('.glb')) {
- resource = resource.scene;
- }
+ let tracks = [];
- let tracks = []; // KeyframeTracks compatible with VRM to be stored here
-
- let restRotationInverse = new Quaternion();
- let parentRestWorldRotation = new Quaternion();
- let _quatA = new Quaternion();
- let _vec3 = new Vector3();
-
- // Adjust according to the height of the hips.
- let mixamoHips = resource.getObjectByName('mixamorigHips');
- let regularHips = resource.getObjectByName('hips');
- let mainHip;
- if (mixamoHips) {
- mainHip = mixamoHips.position.y;
- } else if (regularHips) {
- mainHip = regularHips.position.y;
- }
- const vrmHipsY = vrm.humanoid?.getNormalizedBoneNode('hips').getWorldPosition(_vec3).y;
- const vrmRootY = vrm.scene.getWorldPosition(_vec3).y;
- const vrmHipsHeight = Math.abs(vrmHipsY - vrmRootY);
- const hipsPositionScale = vrmHipsHeight / mainHip;
+ let restRotationInverse = new Quaternion();
+ let parentRestWorldRotation = new Quaternion();
+ let _quatA = new Quaternion();
+ let _vec3 = new Vector3();
- clip.tracks.forEach((track) => {
- // Convert each track for VRM usage, and push to `tracks`
- let trackSplitted = track.name.split('.');
- let mixamoRigName = trackSplitted[0];
- let vrmBoneName = mixamoVRMRigMap[mixamoRigName];
- let vrmNodeName = vrm.humanoid?.getNormalizedBoneNode(vrmBoneName)?.name;
- let mixamoRigNode = resource.getObjectByName(mixamoRigName);
+ let mixamoHips = resource.getObjectByName('mixamorigHips');
+ let regularHips = resource.getObjectByName('hips');
+ let mainHip;
+ if (mixamoHips) {
+ mainHip = mixamoHips.position.y;
+ } else if (regularHips) {
+ mainHip = regularHips.position.y;
+ }
+ VRMUtils.rotateVRM0(vrm);
+ VRMUtils.removeUnnecessaryVertices( vrm.scene );
+ VRMUtils.removeUnnecessaryJoints( vrm.scene );
+ const vrmHipsY = vrm.humanoid?.getNormalizedBoneNode('hips').getWorldPosition(_vec3).y;
+ const vrmRootY = vrm.scene.getWorldPosition(_vec3).y;
+ const vrmHipsHeight = Math.abs(vrmHipsY - vrmRootY);
+ const hipsPositionScale = vrmHipsHeight / mainHip;
- if (vrmNodeName != null) {
+ clip.tracks.forEach((track) => {
+ let trackSplitted = track.name.split('.');
+ let mixamoRigName = trackSplitted[0];
+ let vrmBoneName = mixamoVRMRigMap[mixamoRigName];
+ let vrmNodeName = vrm.humanoid?.getNormalizedBoneNode(vrmBoneName)?.name;
+ let mixamoRigNode = resource.getObjectByName(mixamoRigName);
- let propertyName = trackSplitted[1];
+ if (vrmNodeName != null) {
+ let propertyName = trackSplitted[1];
- // Store rotations of rest-pose.
- mixamoRigNode.getWorldQuaternion(restRotationInverse).invert();
- mixamoRigNode.parent.getWorldQuaternion(parentRestWorldRotation);
+ mixamoRigNode.getWorldQuaternion(restRotationInverse).invert();
+ mixamoRigNode.parent.getWorldQuaternion(parentRestWorldRotation);
- if (track instanceof QuaternionKeyframeTrack) {
+ if (track instanceof QuaternionKeyframeTrack) {
+ for (let i = 0; i < track.values.length; i += 4) {
+ let flatQuaternion = track.values.slice(i, i + 4);
- // Retarget rotation of mixamoRig to NormalizedBone.
- for (let i = 0; i < track.values.length; i += 4) {
+ _quatA.fromArray(flatQuaternion);
- let flatQuaternion = track.values.slice(i, i + 4);
+ _quatA
+ .premultiply(parentRestWorldRotation)
+ .multiply(restRotationInverse);
- _quatA.fromArray(flatQuaternion);
+ _quatA.toArray(flatQuaternion);
- _quatA
- .premultiply(parentRestWorldRotation)
- .multiply(restRotationInverse);
+ flatQuaternion.forEach((v, index) => {
+ track.values[index + i] = v;
+ });
+ }
- _quatA.toArray(flatQuaternion);
+ tracks.push(
+ new QuaternionKeyframeTrack(
+ `${vrmNodeName}.${propertyName}`,
+ track.times,
+ track.values.map((v, i) => (vrm.meta?.metaVersion === '0' && i % 2 === 0 ? -v : v)),
+ ),
+ );
+ } else if (track instanceof VectorKeyframeTrack) {
+ let value = track.values.map((v, i) => (vrm.meta?.metaVersion === '0' && i % 3 !== 1 ? -v : v) * hipsPositionScale);
+ tracks.push(new VectorKeyframeTrack(`${vrmNodeName}.${propertyName}`, track.times, value));
+ }
+ }
+ });
- flatQuaternion.forEach((v, index) => {
+ return new AnimationClip('vrmAnimation', clip.duration, tracks);
+});
+}
- track.values[index + i] = v;
+function addResetButton(props) {
+const button = document.createElement('button');
+button.innerHTML = 'Respawn';
+button.onclick = () => {
+ props.movement.current.respawn = true;
+ setTimeout(() => {
+ props.movement.current.respawn = false;
+ }, 100);
+};
- });
+button.style.position = 'fixed';
+button.style.bottom = '190px';
+button.style.left = '10px';
+button.style.zIndex = '1000';
+button.style.padding = '10px';
+button.style.border = 'none';
+button.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+button.style.color = 'white';
+button.style.cursor = 'pointer';
+button.style.borderRadius = '5px';
+button.style.fontFamily = 'Arial';
+button.style.fontSize = '16px';
+button.style.fontWeight = 'bold';
+document.body.appendChild(button);
+}
- }
+class XrHead {
+constructor(context) {
+ this.context = context;
+ this.position = new Vector3();
+ this.quaternion = new Quaternion();
+ this.worldUp = new Vector3();
+ this.forward = new Vector3();
+ this.up = new Vector3();
+ this.right = new Vector3();
+}
- tracks.push(
- new QuaternionKeyframeTrack(
- `${vrmNodeName}.${propertyName}`,
- track.times,
- track.values.map((v, i) => (vrm.meta?.metaVersion === '0' && i % 2 === 0 ? - v : v)),
- ),
- );
-
- } else if (track instanceof VectorKeyframeTrack) {
- let value = track.values.map((v, i) => (vrm.meta?.metaVersion === '0' && i % 3 !== 1 ? - v : v) * hipsPositionScale);
- tracks.push(new VectorKeyframeTrack(`${vrmNodeName}.${propertyName}`, track.times, value));
- }
+update() {
+ this.context.camera.getWorldPosition(this.position);
+ this.context.camera.getWorldQuaternion(this.quaternion);
+ this.worldUp.set(0, 1, 0);
+ this.up.set(0, 1, 0).applyQuaternion(this.quaternion);
+ this.forward.set(0, 0, -1).applyQuaternion(this.quaternion);
+ this.right.set(1, 0, 0).applyQuaternion(this.quaternion);
+}
+}
- }
+class Vector3Damper {
+constructor(period) {
+ this.period = period || 0.15;
+ this._samples = [];
+ this._total = new Vector3();
+ this._average = new Vector3();
+}
- });
+add(time, sample) {
+ const removeSamplesBefore = time - this.period;
+ while (this._samples.length && this._samples[0].time < removeSamplesBefore) {
+ const s = this._samples.shift();
+ this._total.x -= s.x;
+ this._total.y -= s.y;
+ this._total.z -= s.z;
+ }
+ this._total.x += sample.x;
+ this._total.y += sample.y;
+ this._total.z += sample.z;
+ this._samples.push({ time: time, x: sample.x, y: sample.y, z: sample.z });
+ const count = this._samples.length;
+ this._average.set(this._total.x / count, this._total.y / count, this._total.z / count);
+ return this._average;
+}
- return new AnimationClip('vrmAnimation', clip.duration, tracks);
+get average() {
+ return this._average;
+}
- });
+clear() {
+ this._samples = [];
+ this._total.setScalar(0);
+ this._average.setScalar(0);
}
+}
export default function Player(props) {
- const canMoveRef = useRef(true);
- const falling = useRef(true);
- const animationsRef = useRef();
- const orbitRef = useRef();
- const rigidRef = useRef();
- const castRef = useRef();
-
- const idleFile = threeObjectPlugin + idle;
- const walkingFile = threeObjectPlugin + walk;
- const runningFile = threeObjectPlugin + run;
- // const [walkFile, setWalkFile] = useState(model.threeObjectPlugin + walk);
- const spawnPoint = props.spawnPoint? props.spawnPoint.map(Number) : [0,0,0]; // convert spawnPoint to numbers
- const { controllers } = useXR();
- const { camera, scene, clock } = useThree();
- const { world, rapier } = useRapier();
- const participantObject = scene.getObjectByName("playerOne");
- const mouse = new Vector2();
-
- // if (!scene.getObjectByName("reticle")){
- // camera.add(Reticle());
- // }
+const [isModelLoaded, setIsModelLoaded] = useState(false);
+const currentPlayerAvatarRef = useRef(null);
+const playerControllerRef = useRef(null);
+const playerMixerRef = useRef(null);
+const { camera, gl } = useThree();
+const { isPresenting } = useXR();
+const [presentingState, setPresentingState] = useState(false);
+const prevPositionRef = useRef(null);
+const { controllers } = useXR();
+const rightController = useController('right');
+const leftController = useController('left');
+const head = useRef(new XrHead(useThree()));
+const pointerOriginDamper = useRef(new Vector3Damper(DamperTimeS));
+const pointerDirectionDamper = useRef(new Vector3Damper(DamperTimeS));
- if ( controllers.length > 0 ) {
- scene.remove(scene.getObjectByName("reticle"));
- }
+const characterRef = useRef(null);
+
+const [frameName, setFrameName] = useState();
+
+const canMoveRef = useRef(true);
+const spriteRef = useRef();
+const animationsRef = useRef();
+const playerModelRef = useRef();
+
+const orbitRef = useRef();
+const rigidRef = useRef();
+const castRef = useRef();
+const [loaderIsGone, setLoaderIsGone] = useState(false);
+const [avatarIsSprite, setAvatarIsSprite] = useState(false);
+
+const curAnimation = useGame((state) => state.curAnimation);
+const initializeAnimationSet = useGame(
+ (state) => state.initializeAnimationSet
+);
+const idleAnimation = useGame((state) => state.idle);
+const walkAnimation = useGame((state) => state.walk);
+const runAnimation = useGame((state) => state.run);
+const action1Animation = useGame((state) => state.action1);
+const action2Animation = useGame((state) => state.action2);
+const action3Animation = useGame((state) => state.action3);
+const action4Animation = useGame((state) => state.action4);
+const resetAnimation = useGame((state) => state.reset);
+const [open, setOpen] = useState(false);
+const HEAD_LAYER = 1;
+
+
+const animationSet = {
+ idle: "idle",
+ walk: "walking",
+ run: "running",
+ jump: "jump",
+};
+useEffect(() => {
+ initializeAnimationSet(animationSet);
+}, []);
- // useFrame(() => {
- // if (participantObject) {
- // const posY = participantObject.parent.position.y;
- // camera.position.setY(posY + 0.23);
- // }
- // });
+useEffect(() => {
+ const handleReady = () => {
+ setLoaderIsGone(true);
+ removeEventListener('loaderIsGone', handleReady);
+ };
+ window.addEventListener('loaderIsGone', handleReady);
+ addResetButton(props);
+}, []);
- // Participant VRM.
- const fallbackURL = threeObjectPlugin + defaultVRM;
- const defaultAvatarURL = props.defaultAvatar;
- let playerURL = userData.vrm ? userData.vrm : fallbackURL;
- if(defaultAvatarURL){
- playerURL = defaultAvatarURL;
+const idleFile = idle;
+const walkingFile = walk;
+const runningFile = run;
+const jumpFile = jump;
+const fallingFile = fall;
+const spawnPoint = props.spawnPoint ? props.spawnPoint.map(Number) : [0, 0, 0];
+const { scene, clock } = useThree();
+const { world, rapier } = useRapier();
+const participantObject = scene.getObjectByName("playerOne");
+let debug = {};
+
+useEffect(() => {
+ if (userData.playerVRM.endsWith('.png')) {
+ setAvatarIsSprite(true);
}
- const someSceneState = useLoader(GLTFLoader, playerURL, (loader) => {
- loader.register((parser) => {
- return new VRMLoaderPlugin(parser);
+}, []);
+
+let animationFiles = [idleFile, walkingFile, runningFile, jumpFile];
+// Participant VRM.
+const fallbackURL = defaultVRM;
+const defaultAvatarURL = props.defaultPlayerAvatar;
+let playerURL;
+if(defaultAvatarURL){
+ playerURL = defaultAvatarURL;
+}
+playerURL = userData.playerVRM ? userData.playerVRM : fallbackURL;
+if( playerURL.endsWith( '.png' ) ){
+ playerURL = blankVRM;
+}
+
+// if the playerURL ends in .png
+useEffect(() => {
+ if( userData.playerVRM.endsWith( '.png' ) ){
+ setAvatarIsSprite(true);
+ }
+}, []);
+
+useEffect(() => {
+ if (!currentPlayerAvatarRef.current) {
+ const loader = new GLTFLoader();
+ const ktx2Loader = new KTX2Loader();
+ ktx2Loader.setTranscoderPath(threeObjectPluginRoot + "/inc/utils/basis/");
+ ktx2Loader.detectSupport(gl);
+ loader.setKTX2Loader(ktx2Loader);
+ // const helperRoot = new Group();
+ // helperRoot.renderOrder = 10000;
+ // scene.add(helperRoot);
+ // debug.pnt = new ShapePointsMesh();
+ // debug.ln = new DynLineMesh();
+ // scene.add(debug.pnt);
+ // scene.add(debug.ln);
+
+ // loader.register( parser => new VRMLoaderPlugin( parser, { helperRoot } ) );
+ loader.register( parser => new VRMLoaderPlugin( parser ) );
+
+ loader.load(playerURL, (gltf) => {
+ currentPlayerAvatarRef.current = gltf;
+ playerControllerRef.current = gltf.userData.vrm;
+
+ // Calculate the avatar's height offset
+ const headBone = gltf.userData.vrm.humanoid.getNormalizedBoneNode(VRMHumanBoneName.Head);
+ headBone.layers.set(HEAD_LAYER);
+ headBone.visible = false;
+ // traverse the head bone to hide the mesh
+ headBone.traverse((child) => {
+ if(child.isMesh){
+ child.visible = false;
+ }
});
+ const headWorldPosition = new Vector3();
+ headBone.getWorldPosition(headWorldPosition);
+
+ const avatarWorldPosition = new Vector3();
+ gltf.scene.getWorldPosition(avatarWorldPosition);
+
+ props.avatarHeightOffset.current = headWorldPosition.y - avatarWorldPosition.y;
+
+ setIsModelLoaded(true);
+ }, undefined, error => {
+ console.error('An error happened during the loading of the model:', error);
});
+ }
+}, [playerURL, gl]);
- if (someSceneState?.userData?.gltfExtensions?.VRM) {
- const playerController = someSceneState.userData.vrm;
- // Check if the avatar is reachable with a 200 response code.
- // Check if the avatar is reachable with a 200 response code.
- const fetchProfile = async () => {
- try {
- const response = await fetch(userData.profileImage);
- if (response.status === 200) {
- const loadedProfile = useLoader(TextureLoader, userData.profileImage);
-
- playerController.scene.traverse((obj) => {
- obj.frustumCulled = false;
-
- if (obj.name === "profile") {
- const newMat = obj.material.clone();
- newMat.map = loadedProfile;
- obj.material = newMat;
- obj.material.map.needsUpdate = true;
- }
- });
+useEffect(() => {
+ if (isModelLoaded && playerControllerRef.current) {
+
+ const avatarOptions = {
+ fingers: true,
+ hair: true,
+ decapitate: false,
+ visemes: true,
+ microphoneMediaStream: null,
+ muted: true,
+ debug: false,
+ };
+
+ const playerController = playerControllerRef.current;
+ playerControllerRef.current.avatar = new ExokitAvatar(playerControllerRef.current, avatarOptions);
+ const animationsMixer = new AnimationMixer(playerController.scene);
+ playerMixerRef.current = animationsMixer;
+ let animationsPromises = animationFiles.map(file => loadMixamoAnimation(file, playerController));
+ playerController.scene.visible = false;
+
+ Promise.all(animationsPromises)
+ .then(animations => {
+ const idleAction = animationsMixer.clipAction(animations[0]);
+ const walkingAction = animationsMixer.clipAction(animations[1]);
+ const runningAction = animationsMixer.clipAction(animations[2]);
+ const jumpingAction = animationsMixer.clipAction(animations[3]);
+ idleAction.timeScale = 1;
+ walkingAction.timeScale = 0;
+ runningAction.timeScale = 0;
+ jumpingAction.timeScale = 0;
+ animationsRef.current = { idle: idleAction, walking: walkingAction, running: runningAction, jump: jumpingAction };
+ idleAction.play();
+ playerController.scene.visible = true;
+ });
+ }
+}, [isModelLoaded]);
+
+useEffect(() => {
+ addHandRotationControls();
+ }, []);
+
+useEffect(() => {
+ if( isPresenting ){
+ console.log( 'Presenting' );
+ // kill all animations
+ // if (playerMixerRef.current) {
+ // playerMixerRef.current.stopAllAction();
+ // }
+ // stop idle
+
+ if (animationsRef.current) {
+ const { idle, walking, running, jump, falling } = animationsRef.current;
+ if(idle){
+ idle.stop();
}
- return response;
- } catch (err) {
- // Handle the error properly or rethrow it to be caught elsewhere.
- // console.error("Error fetching profile:", err);
- // throw err;
+ if(walking){
+ walking.stop();
}
- };
+ if(running){
+ running.stop();
+ }
+ if(jump){
+ jump.stop();
+ }
+ }
+ }
+}, [isPresenting]);
+
+let lastUpdateTime = 0;
+let blinkTimer = 0;
+let blinkInterval = getRandomBlinkInterval();
+
+function getRandomBlinkInterval() {
+ return 5 + Math.random() * 10;
+}
+
+function handleBlinking(delta) {
+ blinkTimer += delta;
+ if (blinkTimer > blinkInterval && playerControllerRef.current) {
+ performBlink(playerControllerRef.current);
+ blinkTimer = 0;
+ blinkInterval = getRandomBlinkInterval();
+ }
+}
+
+function performBlink(vrm) {
+ const blinkDuration = 0.05 + Math.random() * 0.1;
+ const steps = Math.round(blinkDuration / 0.01);
+
+ for (let i = 0; i <= steps; i++) {
+ const s = i / steps;
+ setTimeout(() => {
+ vrm.expressionManager.setValue('blinkLeft', s);
+ vrm.expressionManager.setValue('blinkRight', s);
+ }, s * blinkDuration * 1000);
+ }
+
+ setTimeout(() => {
+ for (let i = 0; i <= steps; i++) {
+ const s = 1 - i / steps;
setTimeout(() => {
- fetchProfile()
- .then((response) => {
- // handle the response here if needed
- })
- .catch((err) => {
- // Handle the error here if needed
- });
- }, 1000);
- // VRMUtils.rotateVRM0(playerController);
- const currentVrm = playerController;
- const currentMixer = new AnimationMixer(currentVrm.scene);
+ vrm.expressionManager.setValue('blinkLeft', s);
+ vrm.expressionManager.setValue('blinkRight', s);
+ }, (1 - s) * blinkDuration * 1000);
+ }
+ }, blinkDuration * 1000 + 200);
+}
-
- // need to dynamically do this on scroll
- // playerController.firstPerson.humanoid.humanBones.head.node.scale.set([
- // 0, 0, 0
- // ]);
-
- // const movement = useKeyboardControls();
- const velocity = useRef(spawnPoint); // Use a ref instead of state for velocity
- let lastUpdateTime = 0;
- let blinkTimer = 0; // Initialize the blinkTimer outside the useFrame loop.
- let blinkInterval = 5 + Math.random() * 10; // Blink roughly every 2 to 6 seconds
-
- // frame loop
- useFrame((state, delta) => {
- let isMoving = false;
- const currentTime = state.clock.elapsedTime;
- const timeSinceLastUpdate = currentTime - lastUpdateTime;
- let rigidBodyPosition = [0, 0, 0]
- if(rigidRef.current?.translation()){
- rigidBodyPosition = rigidRef.current.translation();
- }
- const forward = new Vector3();
- camera.getWorldDirection(forward);
- forward.negate(); // In Three.js camera looks towards negative Z, so we negate the vector
- forward.normalize();
- const right = new Vector3();
- right.crossVectors(camera.up, forward);
- right.normalize();
- // initialize the moving state to false
- const raycaster = state.raycaster;
- if (timeSinceLastUpdate >= 0.1) {
- lastUpdateTime = currentTime;
+const movementTimeoutRef = useRef(null);
+const updateRate = 1000 / 5;
+const lastNetworkUpdateTimeRef = useRef(0);
+let countHangtime = 0;
+let isMoving;
+let lastKeyPressTime = 0;
+let wasJumping = false;
+
+useEffect(() => {
+ isMoving = false;
+}, []);
+let isJumping = false;
+const getJoystickValues = useJoystickControls(
+ (state) => state.getJoystickValues
+);
+const playerForward = new Vector3(0, 0, 1);
+
+ useFrame((state, delta) => {
+ const joystickValues = getJoystickValues();
+ let forward = props.movement.current.forward;
+ let backward = props.movement.current.backward;
+ let left = props.movement.current.left;
+ let right = props.movement.current.right;
+ let shift = props.movement.current.shift;
+ let space = props.movement.current.space;
+
+ if (joystickValues) {
+ if (joystickValues.joystickAng > 0) {
+ if (joystickValues.joystickDis > 60) {
+ shift = true;
}
- if (currentVrm) {
- currentVrm.update(delta);
+ forward = true;
+ }
+ if (joystickValues.button1Pressed === true) {
+ space = true;
+ }
+ }
+
+ if (playerControllerRef.current) {
+ playerControllerRef.current.update(delta);
+ }
+
+ if (playerMixerRef.current) {
+ playerMixerRef.current.update(delta);
+ }
+
+ const now = state.clock.elapsedTime * 1000;
+
+ if (backward || forward || left || right) {
+ if (characterRef.current.userData.canJump) {
+ isMoving = true;
+
+ if (now - lastKeyPressTime > 100) {
+ if (window.p2pcf) {
+ const participantObject = scene.getObjectByName("playerOne");
+
+ var target = new Vector3();
+ var worldPosition = participantObject.getWorldPosition(target);
+ const position = [
+ worldPosition.x,
+ worldPosition.y,
+ worldPosition.z
+ ];
+
+ const rotation = [
+ participantObject.parent.parent.rotation.x,
+ participantObject.parent.parent.rotation.y,
+ participantObject.parent.parent.rotation.z
+ ];
+
+ const currentAction = !characterRef.current.userData.canJump ? "jumping" : "walking";
+ const messageObject = {
+ [window.p2pcf.clientId]: {
+ position: position,
+ rotation: rotation,
+ profileImage: userData.profileImage,
+ playerVRM: userData.playerVRM,
+ vrm: userData.vrm,
+ inWorldName: window.userData.inWorldName ? window.userData.inWorldName : userData.inWorldName,
+ isMoving: {
+ action: currentAction,
+ instance: 'update',
+ hangtime: countHangtime
+ }
}
- if (currentMixer) {
- currentMixer.update(delta);
+ };
+
+ if (shift && characterRef.current.userData.canJump) {
+ messageObject[window.p2pcf.clientId].isMoving.action = "running";
}
- blinkTimer += delta; // Increment timer
-
- //blink
- if (blinkTimer > blinkInterval) {
- if (currentVrm) {
- // Randomize the duration of the blink between 0.05 and 0.15 seconds
- const blinkDuration = 0.05 + Math.random() * 0.1;
- const steps = Math.round(blinkDuration / 0.01); // We want each step to be roughly 0.01 seconds
-
- // Close both eyes over the course of the blink duration
- for(let i = 0; i <= steps; i++) {
- const s = i / steps;
- setTimeout(() => {
- currentVrm.expressionManager.setValue('blinkLeft', s);
- currentVrm.expressionManager.setValue('blinkRight', s);
- }, s * blinkDuration * 1000);
- }
-
- // Open both eyes over the course of the blink duration, after a small delay
- setTimeout(() => {
- for(let i = 0; i <= steps; i++) {
- const s = 1 - i / steps;
- setTimeout(() => {
- currentVrm.expressionManager.setValue('blinkLeft', s);
- currentVrm.expressionManager.setValue('blinkRight', s);
- }, (1 - s) * blinkDuration * 1000);
- }
- }, blinkDuration * 1000 + 200); // Add a small delay before opening the eyes
-
- blinkTimer = 0; // Reset the timer
- blinkInterval = 5 + Math.random() * 10; // Blink roughly every 10 to 25 seconds
+
+ const message = JSON.stringify(messageObject);
+ window.p2pcf.broadcast(new TextEncoder().encode(message)), window.p2pcf;
+ lastKeyPressTime = now;
+ lastNetworkUpdateTimeRef.current = now;
+ }
+ }
+
+ if (now - lastNetworkUpdateTimeRef.current > updateRate) {
+ if (window.p2pcf) {
+ const participantObject = scene.getObjectByName("playerOne");
+
+ var target = new Vector3();
+ var worldPosition = participantObject.getWorldPosition(target);
+ const position = [
+ worldPosition.x,
+ worldPosition.y,
+ worldPosition.z
+ ];
+
+ const rotation = [
+ participantObject.parent.parent.rotation.x,
+ participantObject.parent.parent.rotation.y,
+ participantObject.parent.parent.rotation.z
+ ];
+
+ const currentAction = !characterRef.current.userData.canJump ? "jumping" : "walking";
+
+ const messageObject = {
+ [window.p2pcf.clientId]: {
+ position: position,
+ rotation: rotation,
+ profileImage: userData.profileImage,
+ playerVRM: userData.playerVRM,
+ vrm: userData.vrm,
+ inWorldName: window.userData.inWorldName ? window.userData.inWorldName : userData.inWorldName,
+ isMoving: {
+ action: currentAction,
+ instance: 'update',
+ hangtime: countHangtime
}
}
- let speedPerSecondFB = 3.6; // This is equivalent to 0.06 per frame at 60 FPS
- let speedPerSecondLR = 1.8; // This is equivalent to 0.03 per frame at 60 FPS
-
- if (props.movement.current.shift) {
- speedPerSecondFB = 7.2; // This is equivalent to 0.12 per frame at 60 FPS
- speedPerSecondLR = 4.2; // This is equivalent to 0.07 per frame at 60 FPS
+ };
+
+ if (shift && characterRef.current.userData.canJump) {
+ messageObject[window.p2pcf.clientId].isMoving.action = "running";
}
- let newVelocity = [...velocity.current];
- let newPosition = null;
-
- if (props.movement.current.backward && canMoveRef.current) {
- let speed = speedPerSecondFB * delta;
- newVelocity[0] += speed * forward.x;
- newVelocity[2] += speed * forward.z;
- isMoving = true;
- } else if (props.movement.current.forward && canMoveRef.current) {
- let speed = speedPerSecondFB * delta;
- newVelocity[0] -= speed * forward.x;
- newVelocity[2] -= speed * forward.z;
- isMoving = true;
- } else if (props.movement.current.left && canMoveRef.current) {
- let speed = speedPerSecondLR * delta;
- newVelocity[0] -= speed * right.x;
- newVelocity[2] -= speed * right.z;
- isMoving = true;
- } else if (props.movement.current.right && canMoveRef.current) {
- let speed = speedPerSecondLR * delta;
- newVelocity[0] += speed * right.x;
- newVelocity[2] += speed * right.z;
- isMoving = true;
+ const message = JSON.stringify(messageObject);
+ window.p2pcf.broadcast(new TextEncoder().encode(message)), window.p2pcf;
+ lastNetworkUpdateTimeRef.current = now;
+ }
+ }
+
+ clearTimeout(movementTimeoutRef.current);
+ movementTimeoutRef.current = setTimeout(() => {
+ isMoving = false;
+ }, 500);
+ }
+ } else {
+ if (isMoving) {
+ isMoving = false;
+ clearTimeout(movementTimeoutRef.current);
+ if (window.p2pcf?.clientId) {
+ const participantObject = scene.getObjectByName("playerOne");
+ var target = new Vector3();
+ var worldPosition = participantObject.getWorldPosition(target);
+ const position = [
+ worldPosition.x,
+ worldPosition.y,
+ worldPosition.z
+ ];
+
+ const messageStopObject = {
+ [window.p2pcf.clientId]: {
+ isMoving: false,
+ position: position
+ }
+ };
+ const messageStop = JSON.stringify(messageStopObject);
+ window.p2pcf.broadcast(new TextEncoder().encode(messageStop));
+ lastNetworkUpdateTimeRef.current = now;
+ }
+ }
+ }
+
+ if (isPresenting && !presentingState) {
+ const newCamera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+ const participantObject = scene.getObjectByName("playerOne");
+ // set the rotation to 0
+ participantObject.parent.parent.rotation.set(0, 0, 0);
+ participantObject.rotation.set(0, 0, 0);
+ const xrCamera = gl.xr.getCamera(newCamera);
+ gl.xr.enabled = true;
+ state.camera = xrCamera;
+ setPresentingState(true);
+ } else if (!isPresenting && presentingState) {
+ setPresentingState(false);
+ }
+
+ handleBlinking(delta);
+
+ if (animationsRef.current) {
+ if (playerControllerRef.current && participantObject) {
+ const cameraWorldQuaternion = new Quaternion();
+ camera.getWorldQuaternion(cameraWorldQuaternion);
+ const cameraForward = new Vector3(0, 0, -1).applyQuaternion(cameraWorldQuaternion);
+
+ const characterWorldQuaternion = new Quaternion();
+ participantObject.parent.getWorldQuaternion(characterWorldQuaternion);
+ const characterForward = new Vector3(0, 0, 1).applyQuaternion(characterWorldQuaternion);
+ const neutralRotation = new Euler(0, 0, 0);
+
+ const characterToCamera = new Vector3().subVectors(camera.position, participantObject.getWorldPosition(new Vector3())).normalize();
+
+ const dotProduct = characterForward.dot(cameraForward);
+ const azimuthalAngle = Math.acos(Math.min(Math.max(dotProduct, -1), 1));
+
+ const angleThreshold = Math.PI / 2;
+ if (azimuthalAngle < angleThreshold) {
+ if (avatarIsSprite) {
+ if (isMoving && frameName !== 'WalkForward') {
+ setFrameName('WalkForward');
}
- if(props.movement.current.respawn === true){
- newPosition = spawnPoint;
- newVelocity = spawnPoint;
- velocity.current = spawnPoint;
+ if (isMoving === false) {
+ if (frameName !== 'ForwardIdle') {
+ setFrameName('ForwardIdle');
}
-
- // if shift is pressed, run by setting speed to 0.1
- if(canMoveRef.current){
- velocity.current = newVelocity;
}
+ }
+ } else {
+ if (avatarIsSprite && isMoving && frameName !== 'WalkBackward') {
+ setFrameName('WalkBackward');
+ }
+ if (avatarIsSprite && isMoving === false && frameName !== 'BackwardIdle') {
+ setFrameName('BackwardIdle');
+ }
+ }
+ }
- const rotationSpeed = 0.5;
- if (props.movement.current.backward) {
- orbitRef.current.minPolarAngle = Math.PI / 1.8;
- orbitRef.current.maxPolarAngle = Math.PI / 1.25;
- orbitRef.current.maxDistance = 2;
- orbitRef.current.minDistance = 2;
- } else {
- // Reset properties to default values
- if(isMoving){
- orbitRef.current.minPolarAngle = Math.PI / 1.5;
- } else {
- orbitRef.current.minPolarAngle = Math.PI / 1.8;
+ const { idle, walking, running, jump, falling } = animationsRef.current;
+
+ if (props.movement.current.respawn) {
+ characterRef.current.setBodyType(rapier.RigidBodyType.Fixed, 1);
+ characterRef.current.setTranslation(new Vector3(Number(spawnPoint[0]), Number(spawnPoint[1]), Number(spawnPoint[2])), true);
+ } else if (!props.movement.current.respawn && characterRef.current.bodyType() === 1) {
+ characterRef.current.setBodyType(rapier.RigidBodyType.Dynamic, 0);
+ }
+
+ if (isMoving && characterRef.current.userData.canJump) {
+ jump.clampWhenFinished = false;
+ jump.reset();
+ jump.setEffectiveTimeScale(0);
+ jump.setEffectiveWeight(0);
+ } else if (!isMoving && characterRef.current.userData.canJump) {
+ jump.clampWhenFinished = false;
+ jump.reset();
+ jump.setEffectiveTimeScale(0);
+ jump.setEffectiveWeight(0);
+ idle.setEffectiveTimeScale(1);
+ idle.setEffectiveWeight(1);
+ }
+
+ if (!characterRef.current.userData.canJump) {
+ if (window.p2pcf) {
+ const participantObject = scene.getObjectByName("playerOne");
+
+ var target = new Vector3();
+ var worldPosition = participantObject.getWorldPosition(target);
+ const position = [
+ worldPosition.x,
+ worldPosition.y,
+ worldPosition.z
+ ];
+
+ const rotation = [
+ participantObject.parent.parent.rotation.x,
+ participantObject.parent.parent.rotation.y,
+ participantObject.parent.parent.rotation.z
+ ];
+ if (!prevPositionRef.current || Math.abs(position[1] - prevPositionRef.current[1]) > 0.01) {
+ const messageObject = {
+ [window.p2pcf.clientId]: {
+ position: position,
+ rotation: rotation,
+ profileImage: userData.profileImage,
+ playerVRM: userData.playerVRM,
+ vrm: userData.vrm,
+ inWorldName: window.userData.inWorldName ? window.userData.inWorldName : userData.inWorldName,
+ isMoving: {
+ action: "jumping",
+ instance: 'first',
+ hangtime: countHangtime
+ }
}
- orbitRef.current.maxPolarAngle = Math.PI / 1.2;
- orbitRef.current.maxDistance = 2;
- orbitRef.current.minDistance = 1.3;
+ };
+ const message = JSON.stringify(messageObject);
+ if ((now - lastNetworkUpdateTimeRef.current > updateRate) && (lastNetworkUpdateTimeRef.current !== 0)) {
+ window.p2pcf.broadcast(new TextEncoder().encode(message)), window.p2pcf;
+ lastNetworkUpdateTimeRef.current = now;
}
-
- // send a raycast from the orbit camera and check if there is an obstacle in the way
-
- // We compute the direction from the camera to the player
- let direction = camera.getWorldDirection(new Vector3());
- // normalize the direction to not be looking up or downward
- direction.normalize();
- direction.y = 0;
-
- // Adjust the direction based on the movement direction
- if(props.movement.current.backward) {
- direction.negate(); // for backward movement, we want to reverse the direction
- } else if (props.movement.current.right && !props.movement.current.left && !props.movement.current.forward && !props.movement.current.backward) {
- direction.applyAxisAngle(new Vector3(0, 1, 0), -Math.PI / 2); // for right movement, rotate the direction 90 degrees counterclockwise
- } else if (props.movement.current.left && !props.movement.current.right && !props.movement.current.forward && !props.movement.current.backward) {
- direction.applyAxisAngle(new Vector3(0, 1, 0), Math.PI / 2); // for left movement, rotate the direction 90 degrees clockwise
}
+ prevPositionRef.current = position;
+ }
- // Define the desired rotation matrix
- let matrix = new Matrix4();
- matrix.lookAt(new Vector3(0,0,0), direction, new Vector3(0,1,0));
-
- // Create a quaternion from the rotation matrix
- let desiredQuaternion = new Quaternion();
- desiredQuaternion.setFromRotationMatrix(matrix);
-
- if ( props.movement.current.forward === true ||
- props.movement.current.backward === true ||
- props.movement.current.left === true ||
- props.movement.current.right === true
- ) {
- // Apply slerp to the player's current quaternion, gradually aligning it with the desired quaternion
- playerController.scene.quaternion.slerp(desiredQuaternion, rotationSpeed);
- }
- if(castRef.current){
- castRef.current.setRotation(desiredQuaternion);
+ countHangtime++;
+
+ if (jump.getEffectiveTimeScale() === 0) {
+ if (countHangtime > 3) {
+ jump.setEffectiveTimeScale(1);
+ jump.setEffectiveWeight(1);
+ jump.clampWhenFinished = true;
+ jump.time = jump._clip.duration;
+ jump.play();
+ running.setEffectiveTimeScale(0);
+ running.setEffectiveWeight(0);
+ walking.setEffectiveTimeScale(0);
+ walking.setEffectiveWeight(0);
}
+ }
- if (isMoving && canMoveRef.current) {
- newPosition = [
- velocity.current[0],
- rigidBodyPosition.y,
- velocity.current[2]
+ wasJumping = true;
+ } else {
+ if (wasJumping) {
+ if (window.p2pcf) {
+ const participantObject = scene.getObjectByName("playerOne");
+ setTimeout(() => {
+ var target = new Vector3();
+ var worldPosition = participantObject.getWorldPosition(target);
+ const position = [
+ worldPosition.x,
+ worldPosition.y,
+ worldPosition.z
];
- participantObject.parent.position.set(...newPosition);
- castRef.current.setTranslation({x: newPosition[0], y: newPosition[1], z: newPosition[2]});
- }
- // animation logic
- if (animationsRef.current) {
- const { idle, walking, running } = animationsRef.current;
-
- if (isMoving) {
- // If moving, but idle animation is playing, stop it and play walking animation
- // if (idle.isRunning()) {
- // blend from idle to walking
- if(props.movement.current.shift) {
- if (walking.isRunning()) {
- walking.crossFadeTo(running, 1);
- } else {
- idle.crossFadeTo(running, 1);
- }
- running.enabled = true;
- running.setEffectiveTimeScale(1);
- running.setEffectiveWeight(1);
- idle.enabled = true;
- idle.setEffectiveTimeScale(1);
- idle.setEffectiveWeight(0);
- walking.enabled = true;
- walking.setEffectiveTimeScale(1);
- walking.setEffectiveWeight(0);
- running.play();
- } else {
- if (running.isRunning()) {
- running.crossFadeTo(walking, 1);
- } else {
- idle.crossFadeTo(walking, 1);
- }
- walking.enabled = true;
- walking.setEffectiveTimeScale(1);
- walking.setEffectiveWeight(1);
- running.enabled = true;
- running.setEffectiveTimeScale(1);
- running.setEffectiveWeight(0);
- idle.enabled = true;
- idle.setEffectiveTimeScale(1);
- idle.setEffectiveWeight(0);
- walking.play();
- }
- // }
- } else {
- // If not moving, but walking animation is playing, stop it and play idle animation
- if (walking.isRunning()) {
- // blend from walking to idle
- walking.crossFadeTo(idle, 1);
- // set the walking animation to lower weight so it blends into the idle animation
- walking.enabled = true;
- walking.setEffectiveTimeScale(1);
- walking.setEffectiveWeight(0);
- running.setEffectiveTimeScale(1);
- running.setEffectiveWeight(0);
- idle.enabled = true;
- idle.setEffectiveTimeScale(1);
- idle.setEffectiveWeight(1);
- idle.play();
- } else if (running.isRunning()) {
- // blend from running to idle
- running.crossFadeTo(idle, 1);
- // set the running animation to lower weight so it blends into the idle animation
- running.enabled = true;
- running.setEffectiveTimeScale(1);
- running.setEffectiveWeight(0);
- walking.setEffectiveTimeScale(1);
- walking.setEffectiveWeight(0);
- idle.enabled = true;
- idle.setEffectiveTimeScale(1);
- idle.setEffectiveWeight(1);
- idle.play();
+
+ const rotation = [
+ participantObject.parent.parent.rotation.x,
+ participantObject.parent.parent.rotation.y,
+ participantObject.parent.parent.rotation.z
+ ];
+
+ if ((countHangtime > 0) && lastNetworkUpdateTimeRef.current !== 0) {
+ const messageStopObject = {
+ [window.p2pcf.clientId]: {
+ isMoving: {
+ action: "jumpStop",
+ hangtime: countHangtime
+ },
+ position: position,
+ rotation: rotation
}
+ };
+ const messageStop = JSON.stringify(messageStopObject);
+ window.p2pcf.broadcast(new TextEncoder().encode(messageStop));
+ countHangtime = 0;
+ lastNetworkUpdateTimeRef.current = now;
}
+ }, 100);
}
- if (participantObject) {
- camera.lookAt(
- participantObject.parent.position.x,
- playerController.firstPerson.humanoid.humanBones.head.node.getWorldPosition(new Vector3()).y,
- participantObject.parent.position.z
- );
-
- if (orbitRef.current){
- let newTarget = new Vector3(
- participantObject.parent.position.x,
- playerController.firstPerson.humanoid.humanBones.head.node.getWorldPosition(new Vector3()).y + 1.5,
- participantObject.parent.position.z
- );
- // lerpVectors() orbitRef from current position target to newTarget
- orbitRef.current.target.lerpVectors(orbitRef.current.target, newTarget, 0.5);
- }
- }
-
- // update rigidBody's position
- if (rigidRef.current && participantObject?.parent?.position?.x) {
- // // match the rigidBody's position to the participantObject's position.
- // set the rigidbody type to one that can be moved by setTranslation
- if(props.movement.current.backward || props.movement.current.forward || props.movement.current.left || props.movement.current.right || falling.current === true) {
- rigidRef.current.setBodyType(rapier.RigidBodyType.Dynamic, 1);
- // rigidRef.current.setFriction(1); // Set the friction to 1 so the player doesn't slide
- } else {
- rigidRef.current.setBodyType(rapier.RigidBodyType.Fixed, 1);
- }
+ wasJumping = false;
+ }
+ }
- // set a const of the rigidBody's current position
- rigidRef.current.setTranslation({ x: participantObject.parent.position.x, y: rigidBodyPosition.y, z: participantObject.parent.position.z});
+ if (isMoving && characterRef.current.userData.canJump) {
+ countHangtime = 0;
+
+ if (shift) {
+ if (walking.isRunning()) {
+ walking.crossFadeTo(running, 1.1);
+ } else {
+ idle.crossFadeTo(running, 1.1);
}
- if(props.movement.current.respawn === true){
-
- const x = Number(props.spawnPoint[0]);
- const y = Number(props.spawnPoint[1]);
- const z = Number(props.spawnPoint[2]);
- if (props.spawnPointsToAdd) {
- let finalPoints = [];
- props.spawnPointsToAdd.forEach((point) => {
- finalPoints.push([Number(point.position.x), Number(point.position.y), Number(point.position.z)]);
- });
- finalPoints.push([x, y, z]);
- //pick a random point
- let randomPoint = finalPoints[Math.floor(Math.random() * finalPoints.length)];
- if([x, y, z] !== [camera.position.x, camera.position.y, camera.position.z]){
- // Check if the converted values are valid and finite
- // Set the camera's position
- // orbitRef.position.set(randomPoint[0], randomPoint[1], randomPoint[2]);
- castRef.current.setTranslation({
- x: randomPoint[0],
- y: randomPoint[1],
- z: randomPoint[2]
- });
- participantObject.parent.position.set(randomPoint[0], randomPoint[1], randomPoint[2]);
- // move the rigidRef to the new position
- rigidRef.current.setTranslation({
- x: randomPoint[0],
- y: randomPoint[1],
- z: randomPoint[2]
- });
- }
-
- } else {
- // Check if the converted values are valid and finite
- // Set the camera's position
- camera.position.set(x, y, z);
-
- castRef.current.setTranslation({
- x: x,
- y: y,
- z: z
- });
- }
+ running.enabled = true;
+ running.setEffectiveTimeScale(1);
+ running.setEffectiveWeight(1);
+ idle.enabled = true;
+ idle.setEffectiveTimeScale(1);
+ idle.setEffectiveWeight(0);
+ walking.enabled = true;
+ walking.setEffectiveTimeScale(1);
+ walking.setEffectiveWeight(0);
+ running.play();
+ } else {
+ if (running.isRunning()) {
+ running.crossFadeTo(walking, 1);
+ } else {
+ idle.crossFadeTo(walking, 1);
}
- });
+ walking.enabled = true;
+ walking.setEffectiveTimeScale(1);
+ walking.setEffectiveWeight(1);
+ running.enabled = true;
+ running.setEffectiveTimeScale(1);
+ running.setEffectiveWeight(0);
+ idle.enabled = true;
+ idle.setEffectiveTimeScale(1);
+ idle.setEffectiveWeight(0);
+ walking.play();
+ }
+ } else {
+ if (characterRef.current.userData.canJump) {
+ isJumping = false;
+ if (walking.isRunning()) {
+ walking.crossFadeTo(idle, 1);
+ walking.enabled = true;
+ walking.setEffectiveTimeScale(1);
+ walking.setEffectiveWeight(0);
+ running.setEffectiveTimeScale(1);
+ running.setEffectiveWeight(0);
+ idle.enabled = true;
+ idle.setEffectiveTimeScale(1);
+ idle.setEffectiveWeight(1);
+ idle.play();
+ } else if (running.isRunning()) {
+ running.crossFadeTo(idle, 1);
+ running.enabled = true;
+ running.setEffectiveTimeScale(1);
+ running.setEffectiveWeight(0);
+ walking.setEffectiveTimeScale(1);
+ walking.setEffectiveWeight(0);
+ idle.enabled = true;
+ idle.setEffectiveTimeScale(1);
+ idle.setEffectiveWeight(1);
+ idle.play();
+ }
+ }
+ }
+ if (space) {
+ if (characterRef.current.userData.canJump) {
+ isJumping = true;
+ countHangtime = 0;
+ jump.setEffectiveTimeScale(1);
+ jump.setEffectiveWeight(1);
+ idle.setEffectiveTimeScale(0);
+ walking.setEffectiveTimeScale(0);
+ running.setEffectiveTimeScale(0);
+ idle.setEffectiveWeight(0);
+ walking.setEffectiveWeight(0);
+ running.setEffectiveWeight(0);
+ jump.setLoop(LoopOnce, 1);
+ jump.reset();
+ jump.clampWhenFinished = true;
+ jump.play();
+ }
+ }
+ }
+ });
- let animationFiles = [idleFile, walkingFile, runningFile];
- let animationsPromises = animationFiles.map(file => loadMixamoAnimation(file, currentVrm));
-
- Promise.all(animationsPromises)
- .then(animations => {
- const idleAction = currentMixer.clipAction(animations[0]);
- const walkingAction = currentMixer.clipAction(animations[1]);
- const runningAction = currentMixer.clipAction(animations[2]);
- idleAction.timeScale = 1;
- walkingAction.timeScale = 1;
- runningAction.timeScale = 1;
+ // Add this function at the top of your component or in a utility file
+ function debugVector3(name, vector) {
+ console.log(`${name}: x: ${vector.x.toFixed(2)}, y: ${vector.y.toFixed(2)}, z: ${vector.z.toFixed(2)}`);
+ }
+
+
+ function applySimpleIK(spineBone, boneChain, targetPosition, iterations = 10, elbowWeight = 0.8, wristWeight = 0.2, shoulderWeight = 0.2) {
+ const endEffector = boneChain[boneChain.length - 1];
- animationsRef.current = { idle: idleAction, walking: walkingAction, running: runningAction };
- idleAction.play();
- });
+ for (let i = 0; i < iterations; i++) {
+ for (let j = boneChain.length - 2; j >= 0; j--) {
+ const bone = boneChain[j];
+ const nextBone = boneChain[j + 1];
+
+ const toTarget = targetPosition.clone().sub(bone.getWorldPosition(new Vector3()));
+ const toNextBone = nextBone.getWorldPosition(new Vector3()).sub(bone.getWorldPosition(new Vector3()));
+
+ const quaternion = new Quaternion().setFromUnitVectors(toNextBone.normalize(), toTarget.normalize());
+
+ let weight;
+ if (j === 0) {
+ weight = shoulderWeight;
+ } else if (j === 1) {
+ const spineWorldPosition = new Vector3();
+ spineBone.getWorldPosition(spineWorldPosition);
+ const distanceToBody = targetPosition.distanceTo(spineWorldPosition);
+ const elbowBendThreshold = 0.3;
- return (
+ if (distanceToBody < elbowBendThreshold) {
+ const elbowBendAngle = Math.PI / 16;
+ const elbowBendAxis = new Vector3(0, 0, 1);
+ const elbowBendQuaternion = new Quaternion().setFromAxisAngle(elbowBendAxis, elbowBendAngle);
+ quaternion.multiply(elbowBendQuaternion);
+ }
+ weight = elbowWeight;
+ } else {
+ weight = wristWeight;
+ }
+ // limit weight to reasonable values
+ weight = MathUtils.clamp(weight, 0, 1);
+
+ bone.quaternion.slerp(quaternion, weight);
+ }
+ }
+ }
+
+ let frameCounter = 0;
+ const logFrequency = 60; // Log every 60 frames, adjust this value as needed
+ function conditionalLog(message, ...optionalParams) {
+ frameCounter++;
+ if (frameCounter % logFrequency === 0) {
+ console.log(message, ...optionalParams);
+ }
+ }
+ const HAND_VERTICAL_OFFSET = -1.0;
+ const ARM_FORWARD = new Vector3(1, 0, 0);
+ const UP = new Vector3(0, 1, 0);
+
+ const armRef = useRef(null);
+ const rigRef = useRef(null);
+// Add these as component-level variables
+const debugArrows = {
+ leftForward: null,
+ leftUp: null,
+ rightForward: null,
+ rightUp: null
+ };
+
+ useFrame((state, delta) => {
+ if (isPresenting && playerControllerRef.current && playerControllerRef.current.avatar) {
+ const avatar = playerControllerRef.current.avatar;
+ const avatarParent = avatar.model.parent.parent;
+
+ // Update avatar inputs
+ avatar.inputs.hmd.position.copy(camera.position);
+
+ // Update left and right hand positions and rotations
+ const leftHandPosition = leftController.controller.position.clone();
+ const leftHandQuaternion = leftController.controller.quaternion.clone();
+ avatarParent.worldToLocal(leftHandPosition);
+ avatar.inputs.leftGamepad.position.copy(leftHandPosition);
+ avatar.inputs.leftGamepad.quaternion.copy(leftHandQuaternion);
+
+ const rightHandPosition = rightController.controller.position.clone();
+ const rightHandQuaternion = rightController.controller.quaternion.clone();
+ avatarParent.worldToLocal(rightHandPosition);
+ avatar.inputs.rightGamepad.position.copy(rightHandPosition);
+ avatar.inputs.rightGamepad.quaternion.copy(rightHandQuaternion);
+
+ avatar.setFloorHeight(0);
+ avatar.update(delta);
+ }
+ });
+
+ const keyboardMap = [
+ { name: "forward", keys: ["ArrowUp", "KeyW"] },
+ { name: "backward", keys: ["ArrowDown", "KeyS"] },
+ { name: "leftward", keys: ["ArrowLeft", "KeyA"] },
+ { name: "rightward", keys: ["ArrowRight", "KeyD"] },
+ { name: "jump", keys: ["Space"] },
+ { name: "run", keys: ["Shift"] },
+ // Optional animation key map
+ { name: "action1", keys: ["1"] },
+ { name: "action2", keys: ["2"] },
+ { name: "action3", keys: ["3"] },
+ { name: "action4", keys: ["KeyF"] },
+ ];
+
+ const canvas = document.querySelector('div.threeov-main-canvas');
+
+ return (
+ <>
+
+
+ {isModelLoaded && playerControllerRef.current && (
<>
- {playerController && (
- <>
-
-
- {
- canMoveRef.current = false;
- }}
- onIntersectionExit={({ manifold, target }) => {
- canMoveRef.current = true;
- }}
- angularVelocity={[0, 0, 0]}
- linearVelocity={[0, 0, 0]}
- >
- console.log("enter")}
- position={[0, 1.4, -0.5]}
- args={[0.03, 0.03, 0.03]}
- />
-
-
- )}
+ {avatarIsSprite && (
+
+
+
+ );
}
diff --git a/blocks/environment/components/TeleportTravel.js b/blocks/environment/components/TeleportTravel.js
index 6bc8ef9..9d67e92 100644
--- a/blocks/environment/components/TeleportTravel.js
+++ b/blocks/environment/components/TeleportTravel.js
@@ -1,14 +1,18 @@
-import { Raycaster, Vector3 } from "three";
-import { useXR, Interactive } from "@react-three/xr";
+import { Raycaster, Vector3, Mesh, MeshBasicMaterial, BoxGeometry } from "three";
+import { useXR, Interactive, useController, useTeleportation } from "@react-three/xr";
import { useFrame, useThree } from "@react-three/fiber";
import { useCallback, useRef, useState, useEffect } from "react";
import { useRapier, useRigidBody, RigidBody } from "@react-three/rapier";
+import {
+ Text,
+} from "@react-three/drei";
export function TeleportIndicator(props) {
+
return (
<>
-
@@ -24,6 +28,88 @@ export function ClickIndicatorObject(props) {
);
}
+function Button({ onClick, position, color, hoverColor }) {
+ const mesh = React.useRef();
+
+ const [hovered, setHovered] = React.useState(false);
+ const currentColor = hovered ? hoverColor : color;
+
+ return (
+ setHovered(true)}
+ onBlur={() => setHovered(false)}
+ >
+
+
+
+ );
+}
+
+function Menu() {
+ const menuRef = useRef();
+ const { camera } = useThree();
+ const { player, controllers } = useXR();
+ const [ muted, setMuted ] = useState(false);
+ const handleButtonClick = () => {
+ console.log("Button clicked");
+ if(window.localStream){
+ // loop through all audio tracks and mute them
+ for (let i = 0; i < window.localStream.getAudioTracks().length; i++) {
+ window.localStream.getAudioTracks()[i].enabled = !window.localStream.getAudioTracks()[i].enabled;
+ }
+ // if(muted){
+ // window.localStream.getAudioTracks()[0].enabled = false;
+ // } else {
+ // window.localStream.getAudioTracks()[0].enabled = true;
+ // }
+ // console.log("window.localStream", window.localStream.getAudioTracks()[0]);
+ }
+ setMuted(!muted);
+ };
+
+ // when the player is available, add the menu to the player
+ // useEffect(() => {
+ // console.log("hit the player ref", player)
+ // if (player && menuRef.current) {
+ // //menuRef.current.visible = true;
+ // player.add(menuRef.current);
+ // menuRef.current.position.set(0, 2, -0.8);
+ // }
+ // console.log(window.localStream);
+ // }, [player]);
+
+
+ // useFrame(() => {
+ // if (menuRef.current) {
+
+ // }
+ // });
+
+ return (
+
+
+
+ { muted ? `Mute` : `Unmute`}
+
+ {/* Additional menu items */}
+
+ );
+}
+
export default function TeleportTravel(props) {
const { scene } = useThree();
@@ -38,6 +124,8 @@ export default function TeleportTravel(props) {
const [canInteract, setCanInteract] = useState(false);
const [spawnPos, setSpawnPos] = useState(props.spawnPoint);
const [intersectionPoint, setIntersectionPoint] = useState();
+ const [currentPosition, setCurrentPosition] = useState(new Vector3());
+
const target = useRef();
const targetLoc = useRef();
const ray = useRef(new Raycaster());
@@ -56,9 +144,15 @@ export default function TeleportTravel(props) {
const z = Number(spawnPos[2]);
if (isPresenting) {
- player.position.x = x
- player.position.y = y
- player.position.z = z
+ const participantObject = scene.getObjectByName("playerOne");
+ console.log("participantObject", participantObject);
+ if (participantObject) {
+ player.position.x = participantObject.parent.parent.position.x;
+ player.position.y = participantObject.parent.parent.position.y;
+ player.position.z = participantObject.parent.parent.position.z;
+ } else {
+ player.position.set(x, y, z);
+ }
}
}, [isPresenting])
@@ -68,24 +162,36 @@ export default function TeleportTravel(props) {
// Remove the reticle when the controllers are registered.
const reticle = scene.getObjectByName("reticle");
const participantObject = scene.getObjectByName("playerOne");
- if (controllers.length > 0 && reticle) {
+ if (controllers?.length > 0 && reticle) {
// console.log("participantObject", participantObject);
// set participantObject to invisible
participantObject.visible = false;
reticle.visible = false;
- }
+ }
}, [controllers]);
+ const movementTimeoutRef = useRef(null);
+ const teleport = useTeleportation();
+ let dominantController = useController('right');
+ // const rightController = useController('right')
+
+ const updateRate = 1000 / 5; // 5Hz update rate
+ const lastNetworkUpdateTimeRef = useRef(0);
+
+
+ useFrame((state, delta) => {
+ const now = state.clock.elapsedTime * 1000;
- useFrame(() => {
if (
isHovered &&
controllers.length > 0 &&
ray.current &&
target.current &&
- targetLoc.current
+ targetLoc.current &&
+ dominantController &&
+ dominantController.controller
) {
- controllers[0].controller.getWorldDirection(rayDir.current.dir);
- controllers[0].controller.getWorldPosition(rayDir.current.pos);
+ dominantController.controller.getWorldDirection(rayDir.current.dir);
+ dominantController.controller.getWorldPosition(rayDir.current.pos);
// ray.far = 0.05;
// ray.near = 0.01;
rayDir.current.dir.multiplyScalar(-1);
@@ -109,6 +215,7 @@ export default function TeleportTravel(props) {
}
});
if (containsInteractiveObject) {
+ // console.log("set teleport false in contains interactive object");
setCanInteract(true);
setCanTeleport(false);
} else {
@@ -128,67 +235,118 @@ export default function TeleportTravel(props) {
// new Vector3(1, 0, 0),
// Math.PI / 2
// );
- targetLoc.current.position.copy(p);
+ targetLoc.current.position.copy(p);
} else {
targetLoc.current.position.copy(intersection.point);
}
+ setCurrentPosition(intersection.point);
+ }
+ if (now - lastNetworkUpdateTimeRef.current > updateRate) {
+ const p2pcf = window.p2pcf;
+ if (p2pcf) {
+ const rotation = [
+ player.rotation.x,
+ player.rotation.y,
+ player.rotation.z,
+ ];
+ const messageObject = {
+ [p2pcf.clientId]: {
+ rotation: rotation,
+ profileImage: userData.profileImage,
+ vrm: userData.vrm,
+ inWorldName: userData.inWorldName,
+ },
+ };
+ const message = JSON.stringify(messageObject);
+ p2pcf.broadcast(new TextEncoder().encode(message)), p2pcf;
+ lastNetworkUpdateTimeRef.current = now;
+ }
}
}
});
const click = useCallback(() => {
+ console.log("clicking", player);
if (isHovered && !canInteract) {
- targetLoc.current.position.set(
- targetLoc.current.position.x,
- targetLoc.current.position.y + 0.1,
- targetLoc.current.position.z
- );
- if (canTeleport) {
- player.position.copy(targetLoc.current.position);
+ targetLoc.current.position.set(
+ targetLoc.current.position.x,
+ targetLoc.current.position.y + (props.avatarHeightOffset.current? (props.avatarHeightOffset.current -0.8) : 0.4),
+ targetLoc.current.position.z
+ );
+ if (canTeleport) {
+ console.log("teleporting to", targetLoc.current.position);
+ player.position.copy(targetLoc.current.position);
+ const p2pcf = window.p2pcf;
+ const participantObject = scene.getObjectByName("playerOne");
+ if (participantObject) {
+ console.log("participantObject", participantObject);
+ if (p2pcf) {
+ var target = new Vector3();
+ var worldPosition = participantObject.getWorldPosition(target);
+ const position = [
+ targetLoc.current.position.x,
+ targetLoc.current.position.y,
+ targetLoc.current.position.z,
+ ];
+ const rotation = [
+ player.rotation.x,
+ player.rotation.y,
+ player.rotation.z,
+ ];
+ const messageObject = {
+ [p2pcf.clientId]: {
+ position: position,
+ rotation: rotation,
+ profileImage: userData.profileImage,
+ vrm: userData.vrm,
+ inWorldName: userData.inWorldName,
+ isMoving: "walking",
+ },
+ };
+ console.log("sending message", messageObject);
+ clearTimeout(movementTimeoutRef.current);
+ movementTimeoutRef.current = setTimeout(() => {
+ const messageStopObject = {
+ [p2pcf.clientId]: {
+ isMoving: false,
+ },
+ };
+ const messageStop = JSON.stringify(messageStopObject);
+ p2pcf.broadcast(new TextEncoder().encode(messageStop));
+ }, 100);
+ const message = JSON.stringify(messageObject);
+ p2pcf.broadcast(new TextEncoder().encode(message)), p2pcf;
+ }
}
+ }
}
if (isHovered && canInteract) {
- if (controllers.length > 0) {
- const rigidBodyDesc = new rapier.RigidBodyDesc(
- rapier.RigidBodyType.Static
- )
- // The rigid body translation.
- // Default: zero vector.
- .setTranslation(
- targetLoc.current.position.x,
- targetLoc.current.position.y,
- targetLoc.current.position.z - 0.008
- )
- .setLinvel(0, 0, 0)
- // The linear velocity of this body.
- // .setLinvel(targetLoc.current.position.x, targetLoc.current.position.y - 1.1, targetLoc.current.position.z)
- // Default: zero vector.
- .setGravityScale(1)
- // Default: zero velocity.
- .setCanSleep(false)
- // Whether or not CCD is enabled for this rigid-body.
- // Default: false
- .setCcdEnabled(true);
- const rigidBody = world.createRigidBody(rigidBodyDesc);
-
- const collider = world.createCollider(
- rapier.ColliderDesc.cuboid(0.05, 0.05, 0.05),
- rigidBody
- // rapier.ColliderDesc.capsule(0.5, 0.5), rigidBody
- );
-
- collider.setFriction(0.1);
- collider.setRestitution(0);
- // collider.setSensor(true);
- // collider.setTranslation(intersects[0].point);
- setTimeout(() => {
- world.removeCollider(collider);
- world.removeRigidBody(rigidBody);
- }, 200);
- }
+ if (controllers.length > 0) {
+ const rigidBodyDesc = new rapier.RigidBodyDesc(rapier.RigidBodyType.Static)
+ .setTranslation(
+ targetLoc.current.position.x,
+ targetLoc.current.position.y,
+ targetLoc.current.position.z - 0.008
+ )
+ .setLinvel(0, 0, 0)
+ .setGravityScale(1)
+ .setCanSleep(false)
+ .setCcdEnabled(true);
+ const rigidBody = world.createRigidBody(rigidBodyDesc);
+ const collider = world.createCollider(
+ rapier.ColliderDesc.cuboid(0.05, 0.05, 0.05),
+ rigidBody
+ );
+ collider.setFriction(0.1);
+ collider.setRestitution(0);
+ setTimeout(() => {
+ world.removeCollider(collider);
+ world.removeRigidBody(rigidBody);
+ }, 200);
+ }
}
- }, [isHovered, canTeleport, canInteract]);
-
+ }, [isHovered, canTeleport, canInteract]);
+
return (
<>
{isHovered && canTeleport && (
@@ -201,8 +359,12 @@ export default function TeleportTravel(props) {
{
+
+ click();
+ }}
onHover={(e) => {
setIsHovered(true);
}}
diff --git a/blocks/environment/components/ThreeObjectEdit.js b/blocks/environment/components/ThreeObjectEdit.js
index 86f9658..391f345 100644
--- a/blocks/environment/components/ThreeObjectEdit.js
+++ b/blocks/environment/components/ThreeObjectEdit.js
@@ -1,6 +1,19 @@
-import * as THREE from "three";
+import {
+ VideoTexture,
+ Vector3,
+ TextureLoader,
+ Euler,
+ Color,
+ MeshBasicMaterial,
+ DoubleSide,
+ sRGBEncoding,
+ AudioListener,
+ BoxGeometry,
+ Mesh
+ } from "three";
+
import React, { Suspense, useRef, useState, useEffect, useMemo } from "react";
-import { Canvas, useLoader, useFrame, useThree } from "@react-three/fiber";
+import { Canvas, useLoader, useFrame, useThree, extend } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import {
@@ -21,13 +34,16 @@ import { VRMUtils, VRMLoaderPlugin } from "@pixiv/three-vrm";
import { GLTFAudioEmitterExtension } from "three-omi";
import { Icon, moveTo, rotateLeft, resizeCornerNE } from "@wordpress/icons";
// import { A11y } from "@react-three/a11y";
-import { Perf } from "r3f-perf";
+// 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";
import lightIcon from "../../../inc/assets/light_icon.png";
import { EditorPluginProvider, useEditorPlugins, EditorPluginContext } from './EditorPluginProvider'; // Import the PluginProvider
+import { LumaSplatsThree } from "@lumaai/luma-web";
+// Make LumaSplatsThree available to R3F
+extend( { LumaSplats: LumaSplatsThree } );
const { registerStore } = wp.data;
@@ -42,7 +58,7 @@ function TextObject(text) {
useEffect(() => {
if( text.focusID === text.htmlobjectId ) {
- const someFocus = new THREE.Vector3(Number(text.positionX), Number(text.positionY), Number(text.positionZ));
+ const someFocus = new Vector3(Number(text.positionX), Number(text.positionY), Number(text.positionZ));
text.changeFocusPoint(someFocus);
}
}, [text.focusID]);
@@ -66,7 +82,7 @@ function TextObject(text) {
object={textObj}
size={0.5}
onObjectChange={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(
e?.target.worldQuaternion
@@ -106,7 +122,7 @@ function TextObject(text) {
scale={[text.scaleX, text.scaleY, text.scaleZ]}
>
@@ -123,7 +139,7 @@ function TextObject(text) {
function ThreeSky(sky) {
const skyUrl = sky.src.skyUrl;
if (skyUrl) {
- const texture_1 = useLoader(THREE.TextureLoader, skyUrl);
+ const texture_1 = useLoader(TextureLoader, skyUrl);
return (
);
} else {
@@ -150,15 +166,24 @@ function ThreeSky(sky) {
function Spawn(spawn) {
const spawnObj = useRef();
const [isSelected, setIsSelected] = useState();
- const spawnBlockAttributes = wp.data
- .select("core/block-editor")
- .getBlockAttributes(spawn.spawnpointID);
+ const [spawnBlockAttributes, setSpawnPointAttributes] = useState(
+ wp.data
+ .select("core/block-editor")
+ .getBlockAttributes(spawn.spawnpointID)
+ );
+ useEffect(() => {
+ const attributes = wp.data
+ .select("core/block-editor")
+ .getBlockAttributes(spawn.spawnpointID);
+ setSpawnPointAttributes(attributes);
+ }, [spawn.spawnpointID]);
+
const TransformController = ({ condition, wrap, children }) =>
condition ? wrap(children) : children;
useEffect(() => {
if( spawn.focusID === spawn.spawnpointID ) {
- const someFocus = new THREE.Vector3(Number(spawn.positionX), Number(spawn.positionY), Number(spawn.positionZ));
+ const someFocus = new Vector3(Number(spawn.positionX), Number(spawn.positionY), Number(spawn.positionZ));
spawn.changeFocusPoint(someFocus);
}
}, [spawn.focusID]);
@@ -181,8 +206,8 @@ function Spawn(spawn) {
enabled={spawn.focusID === spawn.spawnpointID}
object={spawnObj}
size={0.5}
- onObjectChange={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ onMouseUp={(e) => {
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(
e?.target.worldQuaternion
@@ -200,31 +225,37 @@ function Spawn(spawn) {
scaleY: scale.y,
scaleZ: scale.z
});
+ setSpawnPointAttributes(
+ wp.data
+ .select("core/block-editor")
+ .getBlockAttributes(spawn.spawnpointID)
+ );
}}
>
{children}
)}
>
- {spawnBlockAttributes && (
+
- )}
+
);
@@ -232,7 +263,7 @@ function Spawn(spawn) {
}
function ImageObject(threeImage) {
- const texture2 = useLoader(THREE.TextureLoader, threeImage.url);
+ const texture2 = useLoader(TextureLoader, threeImage.url);
const imgObj = useRef();
const [isSelected, setIsSelected] = useState();
const threeImageBlockAttributes = wp.data
@@ -243,7 +274,7 @@ function ImageObject(threeImage) {
useEffect(() => {
if( threeImage.focusID === threeImage.imageID ) {
- const someFocus = new THREE.Vector3(Number(threeImage.positionX), Number(threeImage.positionY), Number(threeImage.positionZ));
+ const someFocus = new Vector3(Number(threeImage.positionX), Number(threeImage.positionY), Number(threeImage.positionZ));
threeImage.changeFocusPoint(someFocus);
}
}, [threeImage.focusID]);
@@ -266,7 +297,7 @@ function ImageObject(threeImage) {
object={imgObj}
size={0.5}
onObjectChange={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(e?.target.worldQuaternion);
wp.data
@@ -317,12 +348,12 @@ function ImageObject(threeImage) {
{threeImageBlockAttributes.transparent ? (
{
if( threeLight.focusID === threeLight.lightID ) {
- const someFocus = new THREE.Vector3(Number(threeLight.positionX), Number(threeLight.positionY), Number(threeLight.positionZ));
+ const someFocus = new Vector3(Number(threeLight.positionX), Number(threeLight.positionY), Number(threeLight.positionZ));
threeLight.changeFocusPoint(someFocus);
}
}, [threeLight.focusID]);
@@ -568,7 +599,7 @@ function LightObject(threeLight) {
object={lightObj}
size={0.5}
onMouseUp={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(e?.target.worldQuaternion);
wp.data
@@ -609,7 +640,7 @@ function LightObject(threeLight) {
{
if( threeVideo.focusID === threeVideo.videoID ) {
- const someFocus = new THREE.Vector3(Number(threeVideo.positionX), Number(threeVideo.positionY), Number(threeVideo.positionZ));
+ const someFocus = new Vector3(Number(threeVideo.positionX), Number(threeVideo.positionY), Number(threeVideo.positionZ));
threeVideo.changeFocusPoint(someFocus);
}
}, [threeVideo.focusID]);
@@ -737,7 +768,7 @@ function VideoObject(threeVideo) {
object={videoObj}
size={0.5}
onMouseUp={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(e?.target.worldQuaternion);
wp.data
@@ -790,7 +821,7 @@ function VideoObject(threeVideo) {
{
setTimeout(() => set(props.url), 2000);
}, []);
- const [listener] = useState(() => new THREE.AudioListener());
+ const [listener] = useState(() => new AudioListener());
useThree(({ camera }) => {
camera.add(listener);
});
const { camera } = useThree();
- const gltf = useLoader(GLTFLoader, props.url, (loader) => {
+ let gltf;
+ try {
+ gltf = useLoader(GLTFLoader, props.url, (loader) => {
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( threeObjectPluginRoot + "/inc/utils/draco/");
- dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
+ dracoLoader.setDecoderConfig({type: 'js'});
loader.setDRACOLoader(dracoLoader);
-
+
if(listener){
- loader.register(
- (parser) => new GLTFAudioEmitterExtension(parser, listener)
- );
+ loader.register(
+ (parser) => new GLTFAudioEmitterExtension(parser, listener)
+ );
}
loader.register((parser) => {
- return new VRMLoaderPlugin(parser);
+ return new VRMLoaderPlugin(parser);
});
- });
+ });
+ } catch (error) {
+ console.error("Failed to load GLTF file: ", error);
+ // Set gltf to a fallback Three.js object
+ const geometry = new BoxGeometry();
+ const material = new MeshBasicMaterial({color: 0x00ff00});
+ gltf = new Mesh(geometry, material);
+ }
- const { actions } = useAnimations(gltf.animations, gltf.scene);
+ const { actions } = useAnimations(gltf?.animations, gltf?.scene);
const animationList = props.animations ? props.animations.split(",") : "";
useEffect(() => {
@@ -859,7 +899,7 @@ function ModelObject(props) {
// update id if active
useEffect(() => {
if( props.focusID === props.modelID ) {
- const someFocus = new THREE.Vector3(Number(props.positionX), Number(props.positionY), Number(props.positionZ));
+ const someFocus = new Vector3(Number(props.positionX), Number(props.positionY), Number(props.positionZ));
props.changeFocusPoint(someFocus);
}
}, [props.focusID]);
@@ -891,7 +931,7 @@ function ModelObject(props) {
object={obj}
size={0.5}
onMouseUp={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(
e?.target.worldQuaternion
@@ -947,7 +987,10 @@ function ModelObject(props) {
);
}
- gltf.scene.rotation.set(0, 0, 0);
+
+ if ( gltf.scene ) {
+ gltf.scene.rotation.set(0, 0, 0);
+ }
// const copyGltf = useMemo(() => gltf.scene.clone(), [gltf.scene]);
return (
@@ -973,7 +1016,7 @@ function ModelObject(props) {
object={obj}
size={0.5}
onMouseUp={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(
e?.target.worldQuaternion
@@ -1002,7 +1045,7 @@ function ModelObject(props) {
)}
>
- {modelBlockAttributes && (
+ {modelBlockAttributes && gltf.scene && (
{
if( props.focusID === props.modelID ) {
- const someFocus = new THREE.Vector3(Number(props.positionX), Number(props.positionY), Number(props.positionZ));
+ const someFocus = new Vector3(Number(props.positionX), Number(props.positionY), Number(props.positionZ));
props.changeFocusPoint(someFocus);
}
}, [props.focusID]);
@@ -1064,10 +1107,10 @@ function NPCObject(props) {
const vrm = gltf.userData.vrm;
VRMUtils.rotateVRM0(vrm);
const rotationVRM = vrm.scene.rotation.y + parseFloat(0);
- let defaultColor = "0x000000";
+ let defaultColor = "#000000";
var colorValue = parseInt ( defaultColor.replace("#","0x"), 16 );
- const color = new THREE.Color( colorValue );
+ const color = new Color( colorValue );
return (
<>
@@ -1092,7 +1135,7 @@ function NPCObject(props) {
object={obj}
size={0.5}
onMouseUp={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(
e?.target.worldQuaternion
@@ -1170,7 +1213,7 @@ function NPCObject(props) {
object={obj}
size={0.5}
onMouseUp={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(
e?.target.worldQuaternion
@@ -1231,7 +1274,7 @@ function PortalObject(model) {
useEffect(() => {
if( model.focusID === model.portalID ) {
- const someFocus = new THREE.Vector3(Number(model.positionX), Number(model.positionY), Number(model.positionZ));
+ const someFocus = new Vector3(Number(model.positionX), Number(model.positionY), Number(model.positionZ));
model.changeFocusPoint(someFocus);
}
}, [model.focusID]);
@@ -1243,7 +1286,7 @@ function PortalObject(model) {
useEffect(() => {
setTimeout(() => set(model.url), 2000);
}, []);
- const [listener] = useState(() => new THREE.AudioListener());
+ const [listener] = useState(() => new AudioListener());
useThree(({ camera }) => {
camera.add(listener);
@@ -1317,7 +1360,7 @@ function PortalObject(model) {
object={obj}
size={0.5}
onMouseUp={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(
e?.target.worldQuaternion
@@ -1366,12 +1409,13 @@ function PortalObject(model) {
]}
>
{
setTimeout(() => set(props.url), 2000);
}, [props.url]);
- const [listener] = useState(() => new THREE.AudioListener());
+ const [listener] = useState(() => new AudioListener());
useThree(({ camera }) => {
camera.add(listener);
@@ -1563,7 +1619,7 @@ function ThreeObject(props) {
const gltf = useLoader(GLTFLoader, url, (loader) => {
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( threeObjectPluginRoot + "/inc/utils/draco/");
- dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
+ dracoLoader.setDecoderConfig({type: 'js'});
loader.setDRACOLoader(dracoLoader);
loader.register(
@@ -1622,7 +1678,7 @@ function ThreeObject(props) {
size={0.5}
position={ [ blockPosition.positionX, blockPosition.positionY, blockPosition.positionZ ] }
onObjectChange={(e) => {
- const rot = new THREE.Euler(0, 0, 0, "XYZ");
+ const rot = new Euler(0, 0, 0, "XYZ");
const scale = e?.target.worldScale;
rot.setFromQuaternion(
e?.target.worldQuaternion
@@ -1671,7 +1727,6 @@ function ThreeObject(props) {
positionZ={spawnpoint.positionZ}
transformMode={props.transformMode}
changeFocusPoint={props.changeFocusPoint}
- // setFocusPosition={props.setFocusPosition}
shouldFocus={props.shouldFocus}
/>
)}
@@ -1938,9 +1993,10 @@ export default function ThreeObjectEdit(props) {
+
@@ -181,7 +181,7 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
+
-
-
-
-
- );
- }
- }
-
-/**
- * Represents a participant in a virtual reality scene.
- *
- * @param {Object} participant - The props for the participant.
- *
- * @return {JSX.Element} The participant.
- */
-function Participant(participant) {
- // Participant VRM.
- const fallbackURL = threeObjectPlugin + defaultVRM;
- const playerURL = userData.vrm ? userData.vrm : fallbackURL;
-
- const someSceneState = useLoader(GLTFLoader, playerURL, (loader) => {
- loader.register((parser) => {
- return new VRMLoaderPlugin(parser);
- });
- });
-
- if (someSceneState?.userData?.gltfExtensions?.VRM) {
- const playerController = someSceneState.userData.vrm;
- VRMUtils.rotateVRM0(playerController);
- const rotationVRM = playerController.scene.rotation.y;
- playerController.scene.rotation.set(0, rotationVRM, 0);
- playerController.scene.scale.set(1, 1, 1);
-
- const theScene = useThree();
-
- useEffect(() => {
- participant.p2pcf.on("msg", (peer, data) => {
- // console.log(peer, data);
- const finalData = new TextDecoder("utf-8").decode(data);
- const participantData = JSON.parse(finalData);
- const participantObject = theScene.scene.getObjectByName(
- peer.client_id
- );
- if (participantObject) {
- // const loadedProfile = useLoader(
- // TextureLoader,
- // participantData[peer.client_id][2].profileImage
- // );
- // if (loadedProfile) {
- // participantObject.traverse((obj) => {
- // if (
- // obj.name === "profile" &&
- // obj.material.map === null
- // ) {
- // const newMat = obj.material.clone();
- // newMat.map = loadedProfile;
- // obj.material = newMat;
- // obj.material.map.needsUpdate = true;
- // }
- // });
- // }
- participantObject.position.set(
- participantData[peer.client_id][0].position[0],
- participantData[peer.client_id][0].position[1],
- participantData[peer.client_id][0].position[2]
- );
- participantObject.rotation.set(
- participantData[peer.client_id][1].rotation[0],
- participantData[peer.client_id][1].rotation[1],
- participantData[peer.client_id][1].rotation[2]
- );
- }
- });
- }, []);
-
- // participant.p2pcf.on('peerclose', peer => {
- // const participantObject = theScene.scene.getObjectByName(peer.client_id);
- // // theScene.scene.remove(participantObject.name);
- // theScene.scene.remove(...participantObject.children);
- // // removePeerUi(peer.id)
- // })
-
- const modelClone = SkeletonUtils.clone(playerController.scene);
- // set modelClone visible to true
- modelClone.visible = true;
-
+ )}
+
+ );
+ } else {
return (
<>
- {playerController && (
-
+
);
}
}
-function Participants(props) {
-
- useEffect(() => {
- const p2pcf = window.p2pcf;
- if (p2pcf) {
- p2pcf.on("peerconnect", (peer) => {
- // console.log("connected peer", peer);
- // add peer.client_id to participants
- props.setParticipant([...props.participants, peer.client_id]);
- });
- }
- }, []);
-
- return (
- <>
- {props.participants &&
- props.participants.map((item, index) => {
- return (
- <>
- {
- if(data.force > 1.5){
- movement.current.shift = true;
- } else {
- movement.current.shift = false;
- }
- if(data.direction && data.direction.angle){
- if(data.direction.angle === "up" && ! movement.current.forward){
- movement.current.forward = true;
- movement.current.backward = false;
- movement.current.left = false;
- movement.current.right = false;
- } else if(data.direction.angle === "down" && ! movement.current.backward){
- movement.current.forward = false;
- movement.current.backward = true;
- movement.current.left = false;
- movement.current.right = false;
- } else if(data.direction.angle === "left" && ! movement.current.left){
- movement.current.forward = false;
- movement.current.backward = false;
- movement.current.left = true;
- movement.current.right = false;
- } else if(data.direction.angle === "right" && ! movement.current.right){
- movement.current.forward = false;
- movement.current.backward = false;
- movement.current.left = false;
- movement.current.right = true;
- }
- }
- }}
- onEnd={( evt, data ) => {
- movement.current.forward = false;
- movement.current.backward = false;
- movement.current.left = false;
- movement.current.right = false;
- }}
- />
- /* {
- console.log(data.direction.angle);
- }}
- // onEnd={(evt, data) => setMobileRotControls(null)}
- /> */
- ) }
+ <>
+ {isMobile() && (
+
);
diff --git a/blocks/environment/components/Networking.js b/blocks/environment/components/Networking.js
index abde1d4..bfec508 100644
--- a/blocks/environment/components/Networking.js
+++ b/blocks/environment/components/Networking.js
@@ -1,127 +1,744 @@
import P2PCF from "./p2pcf/p2pcf.js";
+import React, { useEffect, useMemo, useState } from "react";
+import audioIcon from '../../../inc/assets/mic_icon.png';
+import audioIconMute from '../../../inc/assets/mic_icon_mute.png';
+import participants from '../../../inc/assets/participants.png';
+import worldIcon from '../../../inc/assets/world_icon.png';
+import cornerAccent from '../../../inc/assets/corner_accent.png';
+import settingsIcon from '../../../inc/assets/settings_icon.png';
+import { color } from "@wordpress/icons";
+import { XRButton } from "@react-three/xr";
-const Networking = (props) => {
- if (!document.location.hash) {
- document.location =
- document.location.toString() + `#xpp-${props.postSlug}`;
+const DEFAULT_TURN_ICE = [
+ {
+ urls: "turn:openrelay.metered.ca:80",
+ username: "openrelayproject",
+ credential: "openrelayproject"
+ },
+ {
+ urls: "turn:openrelay.metered.ca:443",
+ username: "openrelayproject",
+ credential: "openrelayproject"
+ },
+ {
+ urls: "turn:openrelay.metered.ca:443?transport=tcp",
+ username: "openrelayproject",
+ credential: "openrelayproject"
}
+];
+
+const generateRoomId = (sharedRoomID) => {
+ const domainName = window.location.hostname;
+ return `${domainName}-${sharedRoomID}`;
+ };
+
+
+ async function fetchTURNcredentials() {
+ const endpoint = turnCredentials['apiUrl'];
+ const nonce = turnCredentials['nonce'];
+
+ try {
+ // Fetch TURN credentials from the WordPress endpoint
+ const response = await fetch(endpoint, {
+ method: 'GET',
+ headers: {
+ 'X-WP-Nonce': nonce,
+ 'Content-Type': 'application/json'
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to fetch TURN credentials');
+ }
+
+ const data = await response.json();
+ const turnUrls = data;
+
+ return turnUrls;
+ } catch (error) {
+ console.error('Failed to fetch TURN credentials. Using defaults.', error);
+ return DEFAULT_TURN_ICE;
+ }
+}
+
+const Networking = (props) => {
+ let isNetworkActivated = props.networkingBlock.length > 0;
+ let isOffline = false;
+ let isMuted = false; // Initial state of the microphone
+ let localStream = null; // To hold the local media stream
+ const [p2pcf, setP2pcf] = useState(null);
+ const returnXRButton = (props) => {
+ return -
- { props.showUI && props.messages && props.messages.length > 0 && props.messages.map((message, index) => (
-
- {message} +
- {message} ))}
-
+ {props.showUI && props.messages && props.messages.length > 0 && props.messages.map((message, index) => (
+
+
-
- )}
-
- );
- } else {
- return (
- <>
-
{/* {props.messages.map((message, index) => (
{message}
))} */} -
-
-
-
-
- -
- { props.showUI && props.messages && props.messages.length > 0 && props.messages.map((message, index) => (
-
- {message} - ))} -
- {/* {props.messages.map((message, index) => (
-
- {message}
- ))} */} - -
+
+
+
+
+
+ -
+ {props.showUI && props.messages && props.messages.length > 0 && props.messages.map((message, index) => (
+
- {message} + ))} +
+ {/* {props.messages.map((message, index) => (
+
+ {message}
+ ))} */} + +
+
+
+ {/* Display Name */}
+ {(props.networkingBlock.length > 0) ? (
+ <>
+ setDisplayName(e.target.value)} />
+ {(props.networkingBlock[0].attributes.customAvatars && props.networkingBlock[0].attributes.customAvatars.value === "1") && (
+
+ {(props.networkingBlock.length > 0) && (
+
+ VRM or Sprite URL
+ {
+ e.preventDefault();
+ setPlayerAvatar(e.dataTransfer.getData('text'));
+ }}
+ value={playerAvatar}
+ onChange={(e) => setPlayerAvatar(e.target.value)}
+ />
+
+ )}
+
+
+ ) : (
+
+ VRM or Sprite URL
+ setPlayerAvatar(e.target.value)} />
+
+ )}
+
+
+ )}
After entering, use the "Join Voice" button to select your microphone.
+
- <>
-
- );
- }
- }
- ]
+ deprecated: deprecated
});
diff --git a/blocks/npc-block/Deprecated.js b/blocks/npc-block/Deprecated.js
new file mode 100644
index 0000000..f07cd55
--- /dev/null
+++ b/blocks/npc-block/Deprecated.js
@@ -0,0 +1,269 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+return [
+ {
+ 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.threeObjectUrl} -
-{props.attributes.scaleX}
-{props.attributes.scaleY}
-{props.attributes.scaleZ}
-- {props.attributes.positionX} -
-- {props.attributes.positionY} -
-- {props.attributes.positionZ} -
-- {props.attributes.rotationX} -
-- {props.attributes.rotationY} -
-- {props.attributes.rotationZ} -
-- {props.attributes.animations} -
-- {props.attributes.collidable ? 1 : 0} -
-{props.attributes.alt}
-
+ <>
+
+ );
+ }
+ },
+ {
+ 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"
+ },
+ animations: {
+ type: "string",
+ default: ""
+ }
+ },
+ 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} +
+
+ <>
+
+ );
+ }
+ },
+ {
+ attributes: {
+ name: {
+ type: "string"
+ },
+ personality: {
+ type: "string"
+ },
+ defaultMessage: {
+ type: "string"
+ },
+ positionX: {
+ type: "int",
+ default:0
+ },
+ positionY: {
+ type: "int",
+ default:0
+ },
+ positionZ: {
+ type: "int",
+ default:0
+ },
+ rotationX: {
+ type: "int",
+ default:0
+ },
+ rotationY: {
+ type: "int",
+ default:0
+ },
+ rotationZ: {
+ type: "int",
+ default:0
+ },
+ threeObjectUrl: {
+ type: "string",
+ default: null
+ },
+ objectAwareness: {
+ type: "boolean",
+ default: false
+ }
+ },
+ 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.animations} +
+
+ <>
+
+ );
+ }
+ }
+];
+}
\ No newline at end of file
diff --git a/blocks/npc-block/Save.js b/blocks/npc-block/Save.js
index 91a342e..bba140e 100644
--- a/blocks/npc-block/Save.js
+++ b/blocks/npc-block/Save.js
@@ -2,45 +2,22 @@ import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
+ const blockProps = useBlockProps.save();
+
return (
-
+
+
+ + {props.attributes.threeObjectUrl} +
++ {props.attributes.positionX} +
++ {props.attributes.positionY} +
++ {props.attributes.positionZ} +
++ {props.attributes.rotationX} +
++ {props.attributes.rotationY} +
++ {props.attributes.rotationZ} +
++ {props.attributes.name} +
++ {props.attributes.defaultMessage} +
++ {props.attributes.personality} +
++ {props.attributes.objectAwareness ? 1 : 0} +
+
- <>
-
+
-
-
- - {attributes.threeObjectUrl} -
-- {attributes.positionX} -
-- {attributes.positionY} -
-- {attributes.positionZ} -
-- {attributes.rotationX} -
-- {attributes.rotationY} -
-- {attributes.rotationZ} -
-- {attributes.name} -
-- {attributes.defaultMessage} -
-- {attributes.personality} -
-- {attributes.objectAwareness ? 1 : 0} -
-
- <>
-
- );
- }
- },
- {
- 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"
- },
- animations: {
- type: "string",
- default: ""
- }
- },
- 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} -
-
- <>
-
- );
- }
- }
- ]
+ deprecated: deprecated
});
diff --git a/blocks/sky-block/Deprecated.js b/blocks/sky-block/Deprecated.js
new file mode 100644
index 0000000..509da87
--- /dev/null
+++ b/blocks/sky-block/Deprecated.js
@@ -0,0 +1,69 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+ return [
+ {
+ attributes: {
+ skyUrl: {
+ type: "string",
+ default: null
+ },
+ },
+ 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.animations} -
-
+ <>
+
+ );
+ }
+ },
+ {
+ attributes: {
+ skyUrl: {
+ type: "string",
+ default: null
+ },
+ distance: {
+ type: "int",
+ default: 170000
+ },
+ rayleigh: {
+ type: "int",
+ default: 1
+ },
+ sunPositionX: {
+ type: "int",
+ default: 0
+ },
+ sunPositionY: {
+ type: "int",
+ default: 10000
+ },
+ sunPositionZ: {
+ type: "int",
+ default: -10000
+ }
+ },
+ save(props) {
+ return (
+
+
+
+ {props.attributes.skyUrl}
+
+ <>
+
+ );
+ }
+ }
+ ];
+}
diff --git a/blocks/sky-block/Edit.js b/blocks/sky-block/Edit.js
index 4fdfbee..70125e4 100644
--- a/blocks/sky-block/Edit.js
+++ b/blocks/sky-block/Edit.js
@@ -160,7 +160,7 @@ export default function Edit({ attributes, setAttributes, isSelected }) {
+
+
+ {props.attributes.skyUrl}
+{props.attributes.distance}
+{props.attributes.rayleigh}
+{props.attributes.sunPositionX}
+{props.attributes.sunPositionY}
+{props.attributes.sunPositionZ}
+- { __( 'Sky block', 'three-object-viewer' ) } + { __( 'Sky Block', 'three-object-viewer' ) }
{/*URL: {attributes.skyUrl}
*/}- { __( 'Sky block', 'three-object-viewer' ) } + { __( 'Sky Block', 'three-object-viewer' ) }
{/*URL: {attributes.skyUrl}
*/}
- <>
-
+
-
-
- {attributes.skyUrl}
-{attributes.distance}
-{attributes.rayleigh}
-{attributes.sunPositionX}
-{attributes.sunPositionY}
-{attributes.sunPositionZ}
-
- <>
-
- );
- }
- }
- ]
+ deprecated: deprecated
});
diff --git a/blocks/spawn-point-block/Deprecated.js b/blocks/spawn-point-block/Deprecated.js
new file mode 100644
index 0000000..e127363
--- /dev/null
+++ b/blocks/spawn-point-block/Deprecated.js
@@ -0,0 +1,62 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+ return [
+ {
+ attributes: {
+ positionX: {
+ type: "int",
+ default:0
+ },
+ positionY: {
+ type: "int",
+ default:0
+ },
+ positionZ: {
+ type: "int",
+ default:0
+ },
+ rotationX: {
+ type: "int",
+ default:0
+ },
+ rotationY: {
+ type: "int",
+ default:0
+ },
+ rotationZ: {
+ type: "int",
+ default:0
+ }
+ },
+ save(props) {
+ return (
+
-
-
- {props.attributes.skyUrl}
-
+ <>
+
+ );
+ }
+ }
+ ];
+}
diff --git a/blocks/spawn-point-block/Save.js b/blocks/spawn-point-block/Save.js
index 9ef1449..74bda1e 100644
--- a/blocks/spawn-point-block/Save.js
+++ b/blocks/spawn-point-block/Save.js
@@ -2,30 +2,17 @@ import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
+ const blockProps = useBlockProps.save();
+
return (
-
+
+
+ + {props.attributes.positionX} +
++ {props.attributes.positionY} +
++ {props.attributes.positionZ} +
++ {props.attributes.rotationX} +
++ {props.attributes.rotationY} +
++ {props.attributes.rotationZ} +
+
- <>
-
+
-
-
- - {attributes.positionX} -
-- {attributes.positionY} -
-- {attributes.positionZ} -
-- {attributes.rotationX} -
-- {attributes.rotationY} -
-- {attributes.rotationZ} -
-
- <>
-
- );
- }
- },
- {
- 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"
- },
- animations: {
- type: "string",
- default: ""
- }
- },
- 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} -
-
- <>
-
- );
- }
- }
- ]
+ deprecated: deprecated
});
diff --git a/blocks/three-audio-block/Deprecated.js b/blocks/three-audio-block/Deprecated.js
new file mode 100644
index 0000000..3dbdf5d
--- /dev/null
+++ b/blocks/three-audio-block/Deprecated.js
@@ -0,0 +1,326 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+ return [
+ {
+ 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.animations} -
-
+ <>
+
+ );
+ }
+ },
+ {
+ 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"
+ },
+ animations: {
+ type: "string",
+ default: ""
+ }
+ },
+ 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} +
+
+ <>
+
+ );
+ }
+ },
+ {
+ attributes: {
+ name: {
+ type: "string",
+ default: null
+ },
+ audioUrl: {
+ type: "string",
+ default: null
+ },
+ autoPlay: {
+ type: "bool",
+ default: true
+ },
+ loop: {
+ type: "bool",
+ default: true
+ },
+ volume: {
+ type: "int",
+ default: 1
+ },
+ positional: {
+ type: "bool",
+ default: true
+ },
+ coneInnerAngle: {
+ type: "int",
+ default:360
+ },
+ coneOuterAngle: {
+ type: "int",
+ default:0
+ },
+ coneOuterGain: {
+ type: "int",
+ default:0.8
+ },
+ distanceModel: {
+ type: "string",
+ default: "inverse"
+ },
+ maxDistance: {
+ type: "int",
+ default:10000
+ },
+ refDistance: {
+ type: "int",
+ default:5
+ },
+ rolloffFactor: {
+ type: "int",
+ default:5
+ },
+ positionX: {
+ type: "int",
+ default:0
+ },
+ positionY: {
+ type: "int",
+ default:0
+ },
+ positionZ: {
+ type: "int",
+ default:0
+ },
+ rotationX: {
+ type: "int",
+ default:0
+ },
+ rotationY: {
+ type: "int",
+ default:0
+ },
+ rotationZ: {
+ type: "int",
+ default:0
+ }
+ },
+ 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.animations} +
+
+ <>
+
+ );
+ }
+ }
+ ];
+}
diff --git a/blocks/three-audio-block/Save.js b/blocks/three-audio-block/Save.js
index 41500bb..7116dfe 100644
--- a/blocks/three-audio-block/Save.js
+++ b/blocks/three-audio-block/Save.js
@@ -2,67 +2,32 @@ import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
+ const blockProps = useBlockProps.save();
+
return (
-
+
+
+ {props.attributes.audioUrl}
+{props.attributes.scaleX}
+{props.attributes.scaleY}
+{props.attributes.scaleZ}
++ {props.attributes.positionX} +
++ {props.attributes.positionY} +
++ {props.attributes.positionZ} +
++ {props.attributes.rotationX} +
++ {props.attributes.rotationY} +
++ {props.attributes.rotationZ} +
++ {props.attributes.autoPlay ? '1' : '0'} +
++ {props.attributes.loop ? '1' : '0'} +
++ {props.attributes.volume} +
++ {props.attributes.positional ? '1' : '0'} +
++ {props.attributes.coneInnerAngle} +
++ {props.attributes.coneOuterAngle} +
++ {props.attributes.coneOuterGain} +
++ {props.attributes.distanceModel} +
++ {props.attributes.maxDistance} +
++ {props.attributes.refDistance} +
++ {props.attributes.rolloffFactor} +
+
- <>
-
+
-
-
- {attributes.audioUrl}
-{attributes.scaleX}
-{attributes.scaleY}
-{attributes.scaleZ}
-- {attributes.positionX} -
-- {attributes.positionY} -
-- {attributes.positionZ} -
-- {attributes.rotationX} -
-- {attributes.rotationY} -
-- {attributes.rotationZ} -
-- {attributes.autoPlay ? '1' : '0'} -
-- {attributes.loop ? '1' : '0'} -
-- {attributes.volume} -
-- {attributes.positional ? '1' : '0'} -
-- {attributes.coneInnerAngle} -
-- {attributes.coneOuterAngle} -
-- {attributes.coneOuterGain} -
-- {attributes.distanceModel} -
-- {attributes.maxDistance} -
-- {attributes.refDistance} -
-- {attributes.rolloffFactor} -
-
- <>
-
- );
- }
- },
- {
- 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"
- },
- animations: {
- type: "string",
- default: ""
- }
- },
- 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} -
-
- <>
-
- );
- }
- }
- ]
+ deprecated: deprecated
});
diff --git a/blocks/three-image-block/Deprecated.js b/blocks/three-image-block/Deprecated.js
new file mode 100644
index 0000000..52b2d1f
--- /dev/null
+++ b/blocks/three-image-block/Deprecated.js
@@ -0,0 +1,103 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+ return [
+ {
+ attributes: {
+ imageUrl: {
+ type: "string",
+ default: null
+ },
+ transparent: {
+ type: "boolean",
+ default: false
+ },
+ scaleX: {
+ type: "int",
+ default: 1
+ },
+ scaleY: {
+ type: "int",
+ default: 1
+ },
+ scaleZ: {
+ type: "int",
+ default: 1
+ },
+ positionX: {
+ type: "int",
+ default: 0
+ },
+ positionY: {
+ type: "int",
+ default: 0
+ },
+ positionZ: {
+ type: "int",
+ default: 0
+ },
+ rotationX: {
+ type: "int",
+ default: 0
+ },
+ rotationY: {
+ type: "int",
+ default: 0
+ },
+ rotationZ: {
+ type: "int",
+ default: 0
+ },
+ aspectHeight: {
+ type: "int",
+ default: 0
+ },
+ aspectWidth: {
+ type: "int",
+ default: 0
+ }
+ },
+ 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.animations} -
-
+ <>
+
+ );
+ }
+ }
+ ];
+}
diff --git a/blocks/three-image-block/Save.js b/blocks/three-image-block/Save.js
index 776c9f9..8d834b1 100644
--- a/blocks/three-image-block/Save.js
+++ b/blocks/three-image-block/Save.js
@@ -2,43 +2,24 @@ import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
+ const blockProps = useBlockProps.save();
+
return (
-
+
+
+ {props.attributes.imageUrl}
+{props.attributes.scaleX}
+{props.attributes.scaleY}
+{props.attributes.scaleZ}
++ {props.attributes.positionX} +
++ {props.attributes.positionY} +
++ {props.attributes.positionZ} +
++ {props.attributes.rotationX} +
++ {props.attributes.rotationY} +
++ {props.attributes.rotationZ} +
++ {props.attributes.aspectHeight} +
++ {props.attributes.aspectWidth} +
++ {props.attributes.transparent ? 1 : 0} +
+
- <>
-
+
-
-
- {attributes.imageUrl}
-{attributes.scaleX}
-{attributes.scaleY}
-{attributes.scaleZ}
-- {attributes.positionX} -
-- {attributes.positionY} -
-- {attributes.positionZ} -
-- {attributes.rotationX} -
-- {attributes.rotationY} -
-- {attributes.rotationZ} -
-- {attributes.aspectHeight} -
-- {attributes.aspectWidth} -
-- {attributes.transparent ? 1 : 0} -
-
- <>
-
- );
- }
- },
- {
- 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"
- },
- animations: {
- type: "string",
- default: ""
- }
- },
- 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} -
-
- <>
-
- );
- }
- }
- ]
+ deprecated: deprecated
});
diff --git a/blocks/three-light-block/Deprecated.js b/blocks/three-light-block/Deprecated.js
new file mode 100644
index 0000000..34a741e
--- /dev/null
+++ b/blocks/three-light-block/Deprecated.js
@@ -0,0 +1,120 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+ return [
+ {
+ attributes: {
+ type: {
+ type: "string",
+ default: "ambient"
+ },
+ color: {
+ type: "string",
+ default: "0xffffff"
+ },
+ intensity: {
+ type: "float",
+ default: 0.7
+ },
+ 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
+ }
+ },
+ 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.animations} -
-
+ <>
+
+ );
+ }
+ }
+ ];
+}
\ No newline at end of file
diff --git a/blocks/three-light-block/Save.js b/blocks/three-light-block/Save.js
index 7e0eee5..3fff041 100644
--- a/blocks/three-light-block/Save.js
+++ b/blocks/three-light-block/Save.js
@@ -2,60 +2,27 @@ import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
+ const blockProps = useBlockProps.save();
+
return (
-
+
+
+ + {props.attributes.positionX} +
++ {props.attributes.positionY} +
++ {props.attributes.positionZ} +
++ {props.attributes.rotationX} +
++ {props.attributes.rotationY} +
++ {props.attributes.rotationZ} +
++ {props.attributes.type} +
++ {props.attributes.color} +
++ {props.attributes.intensity} +
++ {props.attributes.distance} +
++ {props.attributes.decay} +
++ {props.attributes.targetX} +
++ {props.attributes.targetY} +
++ {props.attributes.targetZ} +
++ {props.attributes.angle} +
++ {props.attributes.penumbra} +
+
- <>
-
+
-
-
- - {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} -
-
+
+
+
+ {/*
+ {
+ onChangeAutoPlay(e);
+ }}
+ />
+ */}
+
+
+
+
+ onChangeParticipantLimit(value)}
+ />
+
+
+ { __( "Custom Avatars:", "three-object-viewer" ) }
+
+
+ {
+ setCustomAvatars(e);
+ }}
+ />
+
+
+
+
+ {isSelected ? (
+ <>
+ {attributes.videoUrl ? (
+
+ );
+}
diff --git a/blocks/three-networking-block/Edit.test.js b/blocks/three-networking-block/Edit.test.js
new file mode 100644
index 0000000..ab22d96
--- /dev/null
+++ b/blocks/three-networking-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(
+
+
+ ) : (
+
+
+
+ + {__( 'Networking Block', 'three-object-viewer' ) } +
+
+
+ )}
+
+ ) : (
+ <>
+ {attributes.videoUrl ? (
+
+
+
+ + {__( 'Networking Block', 'three-object-viewer' ) } +
+
+
+ ) : (
+
+
+
+ + { __( 'Networking Block', 'three-object-viewer' ) } +
+ {/*URL: {attributes.threeObjectUrl}
*/} +
+
+ )}
+
+ )}
+
+
+
+ + {__( 'Networking Block', 'three-object-viewer' ) } +
+
+ <>
+
+ );
+ }
+ }
+ ]
+});
diff --git a/blocks/three-networking-block/init.php b/blocks/three-networking-block/init.php
new file mode 100644
index 0000000..ab2a4c5
--- /dev/null
+++ b/blocks/three-networking-block/init.php
@@ -0,0 +1,16 @@
+ _x( 'Multiplayer Environment Block', 'block title', 'three-object-viewer' ),
+ 'description' => _x( 'A 3D multiplayer environment component', 'block description', 'three-object-viewer' ),
+ ] );
+ }
+ }
+});
diff --git a/blocks/three-networking-block/style.scss b/blocks/three-networking-block/style.scss
new file mode 100644
index 0000000..18f1fcf
--- /dev/null
+++ b/blocks/three-networking-block/style.scss
@@ -0,0 +1,44 @@
+.wp-block-three-object-block {
+ background-color: #fff;
+ color: #000;
+ padding: 2px;
+}
+
+.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: 10px;
+ border-radius: 30px;
+ background-color:#333;
+ color: white;
+}
+
+.three-object-block-tip {
+ overflow-wrap: break-word;
+ background-color: black;
+ color: white;
+ padding: 10px;
+ font-weight: 500;
+ max-width: 160px;
+ font-size: 14px;
+ margin-top: 0px;
+ margin: 0 auto;
+ text-align: center;
+}
+
+.glb-preview-container button:hover{
+ padding: 10px;
+ border-radius: 30px;
+ background-color:rgb(69, 69, 69);
+ color: white;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/blocks/three-object-block/Deprecated.js b/blocks/three-object-block/Deprecated.js
new file mode 100644
index 0000000..9657a17
--- /dev/null
+++ b/blocks/three-object-block/Deprecated.js
@@ -0,0 +1,259 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+ return [
+ {
+ 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.scaleX}
+
+ <>
+
+ );
+ },
+ },
+ {
+ 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',
+ },
+ animations: {
+ type: 'string',
+ default: '',
+ }
+ },
+ 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 } +
+
+ <>
+
+ );
+ },
+ },
+ {
+ attributes: {
+ bg_color: {
+ type: 'string',
+ default: '#FFFFFF',
+ },
+ zoom: {
+ type: 'integer',
+ default: 1,
+ },
+ 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',
+ },
+ animations: {
+ type: 'string',
+ default: '',
+ }
+ }, 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.animations } +
+
+ <>
+
+ );
+ },
+ }
+ ];
+}
\ No newline at end of file
diff --git a/blocks/three-object-block/Edit.js b/blocks/three-object-block/Edit.js
index 4d67033..6ea87a3 100644
--- a/blocks/three-object-block/Edit.js
+++ b/blocks/three-object-block/Edit.js
@@ -207,8 +207,9 @@ export default function Edit( { attributes, setAttributes, isSelected } ) {
+
+
+ + { 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 } +
+
- <>
-
+
-
-
- - { 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 } -
-
- <>
-
- );
- },
- },
- {
- 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',
- },
- animations: {
- type: 'string',
- default: '',
- }
- },
- 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 } -
-
- <>
-
- );
- },
- },
- ],
+ deprecated: deprecated,
} );
diff --git a/blocks/three-portal-block/Deprecated.js b/blocks/three-portal-block/Deprecated.js
new file mode 100644
index 0000000..3949c4e
--- /dev/null
+++ b/blocks/three-portal-block/Deprecated.js
@@ -0,0 +1,318 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+return [
+ {
+ 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.animations } -
-
+ <>
+
+ );
+ }
+ },
+ {
+ 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"
+ },
+ animations: {
+ type: "string",
+ default: ""
+ }
+ },
+ 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} +
+
+ <>
+
+ );
+ }
+ },
+ {
+ attributes: {
+ scaleX: {
+ type: "int",
+ default:1
+ },
+ scaleY: {
+ type: "int",
+ default:1
+ },
+ scaleZ: {
+ type: "int",
+ default:1
+ },
+ positionX: {
+ type: "int",
+ default:0
+ },
+ positionY: {
+ type: "int",
+ default:0
+ },
+ positionZ: {
+ type: "int",
+ default:0
+ },
+ rotationX: {
+ type: "int",
+ default:0
+ },
+ rotationY: {
+ type: "int",
+ default:0
+ },
+ rotationZ: {
+ type: "int",
+ default:0
+ },
+ threeObjectUrl: {
+ type: "string",
+ default: null
+ },
+ destinationUrl: {
+ type: "string",
+ default: null
+ },
+ label: {
+ type: "string",
+ default: null
+ },
+ labelTextColor: {
+ type: "string",
+ default: "0x000000"
+ },
+ labelOffsetX: {
+ type: "int",
+ default:0
+ },
+ labelOffsetY: {
+ type: "int",
+ default:0
+ },
+ labelOffsetZ: {
+ type: "int",
+ default:0
+ },
+ animations: {
+ type: "string",
+ default: ""
+ },
+ collidable: {
+ type: "boolean",
+ default: false
+ }
+ },
+ 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.animations} +
+
+ <>
+
+ );
+ }
+ }
+];
+}
\ No newline at end of file
diff --git a/blocks/three-portal-block/Save.js b/blocks/three-portal-block/Save.js
index 61d4ff1..3638074 100644
--- a/blocks/three-portal-block/Save.js
+++ b/blocks/three-portal-block/Save.js
@@ -2,63 +2,28 @@ import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
+ const blockProps = useBlockProps.save();
+
return (
-
+
+
+ + {props.attributes.threeObjectUrl} +
++ {props.attributes.destinationUrl} +
++ {props.attributes.scaleX} +
++ {props.attributes.scaleY} +
++ {props.attributes.scaleZ} +
++ {props.attributes.positionX} +
++ {props.attributes.positionY} +
++ {props.attributes.positionZ} +
++ {props.attributes.rotationX} +
++ {props.attributes.rotationY} +
++ {props.attributes.rotationZ} +
++ {props.attributes.animations} +
++ {props.attributes.label} +
++ {props.attributes.labelOffsetX} +
++ {props.attributes.labelOffsetY} +
++ {props.attributes.labelOffsetZ} +
++ {props.attributes.labelTextColor} +
+
- <>
-
+
-
-
- - {attributes.threeObjectUrl} -
-- {attributes.destinationUrl} -
-- {attributes.scaleX} -
-- {attributes.scaleY} -
-- {attributes.scaleZ} -
-- {attributes.positionX} -
-- {attributes.positionY} -
-- {attributes.positionZ} -
-- {attributes.rotationX} -
-- {attributes.rotationY} -
-- {attributes.rotationZ} -
-- {attributes.animations} -
-- {attributes.label} -
-- {attributes.labelOffsetX} -
-- {attributes.labelOffsetY} -
-- {attributes.labelOffsetZ} -
-- {attributes.labelTextColor} -
-
- <>
-
- );
- }
- },
- {
- 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"
- },
- animations: {
- type: "string",
- default: ""
- }
- },
- 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} -
-
- <>
-
- );
- }
- }
- ]
+ deprecated: deprecated
});
diff --git a/blocks/three-text-block/Deprecated.js b/blocks/three-text-block/Deprecated.js
new file mode 100644
index 0000000..4be143d
--- /dev/null
+++ b/blocks/three-text-block/Deprecated.js
@@ -0,0 +1,280 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+ return [
+ {
+ 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.animations} -
-
+ <>
+
+ );
+ }
+ },
+ {
+ 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"
+ },
+ animations: {
+ type: "string",
+ default: ""
+ }
+ },
+ 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} +
+
+ <>
+
+ );
+ }
+ },
+ {
+ attributes: {
+ scaleX: {
+ type: "int",
+ default:1
+ },
+ scaleY: {
+ type: "int",
+ default:1
+ },
+ scaleZ: {
+ type: "int",
+ default:1
+ },
+ positionX: {
+ type: "int",
+ default:0
+ },
+ positionY: {
+ type: "int",
+ default:0
+ },
+ positionZ: {
+ type: "int",
+ default:0
+ },
+ rotationX: {
+ type: "int",
+ default:0
+ },
+ rotationY: {
+ type: "int",
+ default:0
+ },
+ rotationZ: {
+ type: "int",
+ default:0
+ },
+ threeObjectUrl: {
+ type: "string",
+ default: null
+ },
+ destinationUrl: {
+ type: "string",
+ default: null
+ },
+ textContent: {
+ type: "string",
+ default: null
+ },
+ textColor: {
+ type: "string",
+ default: "0x000000"
+ },
+ animations: {
+ type: "string",
+ default: ""
+ },
+ collidable: {
+ type: "boolean",
+ default: false
+ }
+ },
+ 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.animations} +
+
+ <>
+
+ );
+ }
+ }
+ ];
+}
\ No newline at end of file
diff --git a/blocks/three-text-block/Save.js b/blocks/three-text-block/Save.js
index f03482e..ea3f6b4 100644
--- a/blocks/three-text-block/Save.js
+++ b/blocks/three-text-block/Save.js
@@ -2,37 +2,22 @@ import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
+ const blockProps = useBlockProps.save();
+
return (
-
+
+
+ + {props.attributes.textContent} +
++ {props.attributes.positionX} +
++ {props.attributes.positionY} +
++ {props.attributes.positionZ} +
++ {props.attributes.rotationX} +
++ {props.attributes.rotationY} +
++ {props.attributes.rotationZ} +
+{props.attributes.scaleX}
+{props.attributes.scaleY}
+{props.attributes.scaleZ}
+{props.attributes.textColor}
+
- <>
-
+
-
-
- - {attributes.textContent} -
-- {attributes.positionX} -
-- {attributes.positionY} -
-- {attributes.positionZ} -
-- {attributes.rotationX} -
-- {attributes.rotationY} -
-- {attributes.rotationZ} -
-{attributes.scaleX}
-{attributes.scaleY}
-{attributes.scaleZ}
-{attributes.textColor}
-
- <>
-
- );
- }
- },
- {
- 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"
- },
- animations: {
- type: "string",
- default: ""
- }
- },
- 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} -
-
- <>
-
- );
- }
- }
- ]
+ deprecated: deprecated
});
diff --git a/blocks/three-video-block/Deprecated.js b/blocks/three-video-block/Deprecated.js
new file mode 100644
index 0000000..90b9229
--- /dev/null
+++ b/blocks/three-video-block/Deprecated.js
@@ -0,0 +1,216 @@
+import { useBlockProps } from "@wordpress/block-editor";
+
+export default function Deprecated(){
+ return [
+ {
+ attributes: {
+ videoUrl: {
+ type: "string",
+ default: null
+ },
+ modelUrl: {
+ type: "string",
+ default: null
+ },
+ autoPlay: {
+ type: "bool",
+ default: true
+ },
+ scaleX: {
+ type: "int",
+ default: 1
+ },
+ scaleY: {
+ type: "int",
+ default: 1
+ },
+ scaleZ: {
+ type: "int",
+ default: 1
+ },
+ positionX: {
+ type: "int",
+ default: 0
+ },
+ positionY: {
+ type: "int",
+ default: 0
+ },
+ positionZ: {
+ type: "int",
+ default: 0
+ },
+ rotationX: {
+ type: "int",
+ default: 0
+ },
+ rotationY: {
+ type: "int",
+ default: 0
+ },
+ rotationZ: {
+ type: "int",
+ default: 0
+ },
+ aspectHeight: {
+ type: "int",
+ default: 0
+ },
+ aspectWidth: {
+ type: "int",
+ default: 0
+ }
+ },
+ 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.animations} -
-
+ <>
+
+ );
+ }
+ },
+ {
+ attributes: {
+ videoUrl: {
+ type: "string",
+ default: null
+ },
+ modelUrl: {
+ type: "string",
+ default: null
+ },
+ autoPlay: {
+ type: "bool",
+ default: true
+ },
+ scaleX: {
+ type: "int",
+ default:1
+ },
+ scaleY: {
+ type: "int",
+ default:1
+ },
+ scaleZ: {
+ type: "int",
+ default:1
+ },
+ positionX: {
+ type: "int",
+ default:0
+ },
+ positionY: {
+ type: "int",
+ default:0
+ },
+ positionZ: {
+ type: "int",
+ default:0
+ },
+ rotationX: {
+ type: "int",
+ default:0
+ },
+ rotationY: {
+ type: "int",
+ default:0
+ },
+ rotationZ: {
+ type: "int",
+ default:0
+ },
+ aspectHeight: {
+ type: "int",
+ default:0
+ },
+ aspectWidth: {
+ type: "int",
+ default:0
+ },
+ customModel: {
+ type: "bool",
+ default: false
+ }
+ },
+ save(props) {
+ return (
+
+
+
+ {props.attributes.videoUrl}
+ {props.attributes.scaleX}
+{props.attributes.scaleY}
+{props.attributes.scaleZ}
++ {props.attributes.positionX} +
++ {props.attributes.positionY} +
++ {props.attributes.positionZ} +
++ {props.attributes.rotationX} +
++ {props.attributes.rotationY} +
++ {props.attributes.rotationZ} +
++ {props.attributes.aspectHeight} +
++ {props.attributes.aspectWidth} +
++ {props.attributes.autoPlay ? 1 : 0} +
+
+ <>
+
+ );
+ }
+ }
+ ];
+}
diff --git a/blocks/three-video-block/Edit.js b/blocks/three-video-block/Edit.js
index f8baab7..f27715e 100644
--- a/blocks/three-video-block/Edit.js
+++ b/blocks/three-video-block/Edit.js
@@ -79,6 +79,9 @@ export default function Edit({ attributes, setAttributes, isSelected, clientId }
const onChangeCustomModel = (customModelSetting) => {
setAttributes({ customModel: customModelSetting });
};
+ const onChangeControlsEnabled = (videoControlsEnabled) => {
+ setAttributes({ videoControlsEnabled: videoControlsEnabled });
+ };
const { mediaUpload } = wp.editor;
@@ -161,6 +164,17 @@ export default function Edit({ attributes, setAttributes, isSelected, clientId }
}}
/>
+
+
+
+ {props.attributes.videoUrl}
+ {props.attributes.scaleX}
+{props.attributes.scaleY}
+{props.attributes.scaleZ}
++ {props.attributes.positionX} +
++ {props.attributes.positionY} +
++ {props.attributes.positionZ} +
++ {props.attributes.rotationX} +
++ {props.attributes.rotationY} +
++ {props.attributes.rotationZ} +
++ {props.attributes.autoPlay ? 1 : 0} +
++ {props.attributes.customModel ? 1 : 0} +
++ {props.attributes.aspectHeight} +
++ {props.attributes.aspectWidth} +
+{props.attributes.modelUrl}
+
-
-
- {attributes.videoUrl}
- {attributes.scaleX}
-{attributes.scaleY}
-{attributes.scaleZ}
-- {attributes.positionX} -
-- {attributes.positionY} -
-- {attributes.positionZ} -
-- {attributes.rotationX} -
-- {attributes.rotationY} -
-- {attributes.rotationZ} -
-- {attributes.autoPlay ? 1 : 0} -
-- {attributes.customModel ? 1 : 0} -
-- {attributes.aspectHeight} -
-- {attributes.aspectWidth} -
-{attributes.modelUrl}
-
- <>
-
- );
- }
- }
- ]
+ deprecated: deprecated
});
diff --git a/inc/assets/corner_accent.png b/inc/assets/corner_accent.png
new file mode 100644
index 0000000..4a4cde5
Binary files /dev/null and b/inc/assets/corner_accent.png differ
diff --git a/inc/assets/hmdicon.png b/inc/assets/hmdicon.png
new file mode 100644
index 0000000..de17e99
Binary files /dev/null and b/inc/assets/hmdicon.png differ
diff --git a/inc/assets/mic_icon.png b/inc/assets/mic_icon.png
new file mode 100644
index 0000000..b2d5406
Binary files /dev/null and b/inc/assets/mic_icon.png differ
diff --git a/inc/assets/mic_icon_mute.png b/inc/assets/mic_icon_mute.png
new file mode 100644
index 0000000..05b87f9
Binary files /dev/null and b/inc/assets/mic_icon_mute.png differ
diff --git a/inc/assets/participants.png b/inc/assets/participants.png
new file mode 100644
index 0000000..03ef893
Binary files /dev/null and b/inc/assets/participants.png differ
diff --git a/inc/assets/room_entry_background.svg b/inc/assets/room_entry_background.svg
new file mode 100644
index 0000000..c36652b
--- /dev/null
+++ b/inc/assets/room_entry_background.svg
@@ -0,0 +1,254 @@
+
+
+
diff --git a/inc/assets/settings_icon.png b/inc/assets/settings_icon.png
new file mode 100644
index 0000000..f343202
Binary files /dev/null and b/inc/assets/settings_icon.png differ
diff --git a/inc/assets/world_icon.png b/inc/assets/world_icon.png
new file mode 100644
index 0000000..ffad075
Binary files /dev/null and b/inc/assets/world_icon.png differ
diff --git a/inc/avatars/Jump.fbx b/inc/avatars/Jump.fbx
new file mode 100644
index 0000000..207599b
Binary files /dev/null and b/inc/avatars/Jump.fbx differ
diff --git a/inc/avatars/Running.fbx b/inc/avatars/Running.fbx
index ab4beb5..87433b4 100644
Binary files a/inc/avatars/Running.fbx and b/inc/avatars/Running.fbx differ
diff --git a/inc/avatars/blank_avatar.vrm b/inc/avatars/blank_avatar.vrm
new file mode 100644
index 0000000..ef25982
Binary files /dev/null and b/inc/avatars/blank_avatar.vrm differ
diff --git a/inc/avatars/falling.fbx b/inc/avatars/falling.fbx
new file mode 100644
index 0000000..ffa0479
Binary files /dev/null and b/inc/avatars/falling.fbx differ
diff --git a/inc/utils/basis/basis_transcoder.js b/inc/utils/basis/basis_transcoder.js
new file mode 100644
index 0000000..9e285dd
--- /dev/null
+++ b/inc/utils/basis/basis_transcoder.js
@@ -0,0 +1,21 @@
+
+var BASIS = (function() {
+ var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined;
+ if (typeof __filename !== 'undefined') _scriptDir = _scriptDir || __filename;
+ return (
+function(BASIS) {
+ BASIS = BASIS || {};
+
+var Module=typeof BASIS!=="undefined"?BASIS:{};var readyPromiseResolve,readyPromiseReject;Module["ready"]=new Promise(function(resolve,reject){readyPromiseResolve=resolve;readyPromiseReject=reject});var moduleOverrides={};var key;for(key in Module){if(Module.hasOwnProperty(key)){moduleOverrides[key]=Module[key]}}var arguments_=[];var thisProgram="./this.program";var quit_=function(status,toThrow){throw toThrow};var ENVIRONMENT_IS_WEB=false;var ENVIRONMENT_IS_WORKER=false;var ENVIRONMENT_IS_NODE=false;var ENVIRONMENT_IS_SHELL=false;ENVIRONMENT_IS_WEB=typeof window==="object";ENVIRONMENT_IS_WORKER=typeof importScripts==="function";ENVIRONMENT_IS_NODE=typeof process==="object"&&typeof process.versions==="object"&&typeof process.versions.node==="string";ENVIRONMENT_IS_SHELL=!ENVIRONMENT_IS_WEB&&!ENVIRONMENT_IS_NODE&&!ENVIRONMENT_IS_WORKER;var scriptDirectory="";function locateFile(path){if(Module["locateFile"]){return Module["locateFile"](path,scriptDirectory)}return scriptDirectory+path}var read_,readAsync,readBinary,setWindowTitle;var nodeFS;var nodePath;if(ENVIRONMENT_IS_NODE){if(ENVIRONMENT_IS_WORKER){scriptDirectory=require("path").dirname(scriptDirectory)+"/"}else{scriptDirectory=__dirname+"/"}read_=function shell_read(filename,binary){if(!nodeFS)nodeFS=require("fs");if(!nodePath)nodePath=require("path");filename=nodePath["normalize"](filename);return nodeFS["readFileSync"](filename,binary?null:"utf8")};readBinary=function readBinary(filename){var ret=read_(filename,true);if(!ret.buffer){ret=new Uint8Array(ret)}assert(ret.buffer);return ret};if(process["argv"].length>1){thisProgram=process["argv"][1].replace(/\\/g,"/")}arguments_=process["argv"].slice(2);process["on"]("uncaughtException",function(ex){if(!(ex instanceof ExitStatus)){throw ex}});process["on"]("unhandledRejection",abort);quit_=function(status){process["exit"](status)};Module["inspect"]=function(){return"[Emscripten Module object]"}}else if(ENVIRONMENT_IS_SHELL){if(typeof read!="undefined"){read_=function shell_read(f){return read(f)}}readBinary=function readBinary(f){var data;if(typeof readbuffer==="function"){return new Uint8Array(readbuffer(f))}data=read(f,"binary");assert(typeof data==="object");return data};if(typeof scriptArgs!="undefined"){arguments_=scriptArgs}else if(typeof arguments!="undefined"){arguments_=arguments}if(typeof quit==="function"){quit_=function(status){quit(status)}}if(typeof print!=="undefined"){if(typeof console==="undefined")console={};console.log=print;console.warn=console.error=typeof printErr!=="undefined"?printErr:print}}else if(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER){if(ENVIRONMENT_IS_WORKER){scriptDirectory=self.location.href}else if(typeof document!=="undefined"&&document.currentScript){scriptDirectory=document.currentScript.src}if(_scriptDir){scriptDirectory=_scriptDir}if(scriptDirectory.indexOf("blob:")!==0){scriptDirectory=scriptDirectory.substr(0,scriptDirectory.lastIndexOf("/")+1)}else{scriptDirectory=""}{read_=function shell_read(url){var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.send(null);return xhr.responseText};if(ENVIRONMENT_IS_WORKER){readBinary=function readBinary(url){var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.responseType="arraybuffer";xhr.send(null);return new Uint8Array(xhr.response)}}readAsync=function readAsync(url,onload,onerror){var xhr=new XMLHttpRequest;xhr.open("GET",url,true);xhr.responseType="arraybuffer";xhr.onload=function xhr_onload(){if(xhr.status==200||xhr.status==0&&xhr.response){onload(xhr.response);return}onerror()};xhr.onerror=onerror;xhr.send(null)}}setWindowTitle=function(title){document.title=title}}else{}var out=Module["print"]||console.log.bind(console);var err=Module["printErr"]||console.warn.bind(console);for(key in moduleOverrides){if(moduleOverrides.hasOwnProperty(key)){Module[key]=moduleOverrides[key]}}moduleOverrides=null;if(Module["arguments"])arguments_=Module["arguments"];if(Module["thisProgram"])thisProgram=Module["thisProgram"];if(Module["quit"])quit_=Module["quit"];var tempRet0=0;var setTempRet0=function(value){tempRet0=value};var wasmBinary;if(Module["wasmBinary"])wasmBinary=Module["wasmBinary"];var noExitRuntime;if(Module["noExitRuntime"])noExitRuntime=Module["noExitRuntime"];if(typeof WebAssembly!=="object"){abort("no native wasm support detected")}var wasmMemory;var ABORT=false;var EXITSTATUS;function assert(condition,text){if(!condition){abort("Assertion failed: "+text)}}var UTF8Decoder=typeof TextDecoder!=="undefined"?new TextDecoder("utf8"):undefined;function UTF8ArrayToString(heap,idx,maxBytesToRead){var endIdx=idx+maxBytesToRead;var endPtr=idx;while(heap[endPtr]&&!(endPtr>=endIdx))++endPtr;if(endPtr-idx>16&&heap.subarray&&UTF8Decoder){return UTF8Decoder.decode(heap.subarray(idx,endPtr))}else{var str="";while(idx
-
-
- {props.attributes.videoUrl}
- {props.attributes.scaleX}
-{props.attributes.scaleY}
-{props.attributes.scaleZ}
-- {props.attributes.positionX} -
-- {props.attributes.positionY} -
-- {props.attributes.positionZ} -
-- {props.attributes.rotationX} -
-- {props.attributes.rotationY} -
-- {props.attributes.rotationZ} -
-- {props.attributes.aspectHeight} -
-- {props.attributes.aspectWidth} -
-- {props.attributes.autoPlay ? 1 : 0} -
-