From 92d101c6a511363c1090d74a9c4a844e335a7644 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Wed, 5 Jun 2019 20:18:40 -0500 Subject: [PATCH 01/18] add joinServer menu option to Engine.jsx --- ui/src/components/Engine.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 28bc381..6a4db30 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -219,6 +219,12 @@ class Engine extends React.Component { }); } + joinServer() { + window.postMessage({ + method: 'joinServer', + }); + } + blur() { this.setState({ item: null, @@ -244,6 +250,7 @@ class Engine extends React.Component {
New
Exit
+
this.joinServer()}>Join Server
{/*
World
*/} From 2b6a37db5c73067a211262aedbae2b318a4a54bd Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Wed, 5 Jun 2019 20:21:09 -0500 Subject: [PATCH 02/18] add joinServer case to studio's index.html --- index.html | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index a13187a..96fdf06 100644 --- a/index.html +++ b/index.html @@ -130,7 +130,7 @@ let serverConnectedUrl = null; const DEFAULT_URL = 'http://lol.com'; -const DEFAULT_REGISTRY_URL = 'http://xrmp.exokit.org:9001'; +const DEFAULT_REGISTRY_URL = 'https://xrmp.exokit.org:9001'; const DEFAULT_SKIN_URL = 'skin2.png'; const RAY_COLOR = 0x44c2ff; const RAY_HIGHLIGHT_COLOR = new THREE.Color(RAY_COLOR).multiplyScalar(0.5).getHex(); @@ -995,6 +995,20 @@ window.browser.setSetting(key, value); break; } + case 'joinServer': { + XRMultiplayer.requestServers(`${registryUrl}/servers`) + .then(result => { + servers = result.servers; + console.log("servers = " + servers); + const {name} = servers[0]; + _openServer(`${registryUrl}/servers/${name}`, true); + }) + .catch(err => { + console.warn(err.stack); + }); + + break; + } case 'fakeVrMetrics': { const {width, height} = m.data; _endFakeVrDisplay() From 88c9402cd2c20e2a94dd68453c3c302f15596290 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Wed, 5 Jun 2019 20:24:13 -0500 Subject: [PATCH 03/18] add transformControls xrmp update --- index.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/index.html b/index.html index 96fdf06..63fb335 100644 --- a/index.html +++ b/index.html @@ -1126,6 +1126,12 @@ transformControls = new THREE.TransformControls(camera, document.body, viewport); transformControls.iframe = iframe; + for(i = 0; i < tabs.length; i++){ + if(tabs[i].iframe === iframe){ + transformControls.transformId = tabs[i].id; + } + } + transformControls.addEventListener('dragging-changed', e => { orbitControls.enabled = !e.value; }); @@ -1133,6 +1139,14 @@ iframe.position = mesh.position.toArray(); iframe.orientation = mesh.quaternion.toArray(); iframe.scale = mesh.scale.toArray(); + if (serverConnectedUrl) { + const objectMesh = xrmp.getObjectMeshes().find(objectMesh => objectMesh.object.id === transformControls.transformId); + const {object} = objectMesh; + const {objectMatrix} = object; + mesh.position.toArray(objectMatrix.position); + mesh.quaternion.toArray(objectMatrix.quaternion); + object.pushUpdate(); + } }); const mesh = new THREE.Object3D(); From 297ee90d22ffbaf5ef1684900451ce8a7ffee2c1 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Wed, 5 Jun 2019 20:26:00 -0500 Subject: [PATCH 04/18] fix https -> http --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 63fb335..bcbdd22 100644 --- a/index.html +++ b/index.html @@ -130,7 +130,7 @@ let serverConnectedUrl = null; const DEFAULT_URL = 'http://lol.com'; -const DEFAULT_REGISTRY_URL = 'https://xrmp.exokit.org:9001'; +const DEFAULT_REGISTRY_URL = 'http://xrmp.exokit.org:9001'; const DEFAULT_SKIN_URL = 'skin2.png'; const RAY_COLOR = 0x44c2ff; const RAY_HIGHLIGHT_COLOR = new THREE.Color(RAY_COLOR).multiplyScalar(0.5).getHex(); From a845767ee1832cdc1b143039bfbf23750698bc20 Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Wed, 5 Jun 2019 23:15:17 -0500 Subject: [PATCH 05/18] add webrtc settings --- ui/src/components/Engine.jsx | 127 ++++++++++++++++++++++++++++++++++- 1 file changed, 126 insertions(+), 1 deletion(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index 6a4db30..ec6ee53 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -25,6 +25,7 @@ class Engine extends React.Component { flags: [], item: null, settings: null, + joinServerSettings: null, urlFocus: false, addTab: 'template', url: 'https://aframe.io/a-painter/', @@ -129,6 +130,15 @@ class Engine extends React.Component { }); } + openJoinServerSettings(joinServerSettings) { + this.setState({ + item: null, + joinServerSettings, + }, () => { + this.postMenuStatus(); + }); + } + openAddTab(e, addTab) { this.setState({ addTab, @@ -229,6 +239,7 @@ class Engine extends React.Component { this.setState({ item: null, settings: null, + joinServerSettings: null, urlFocus: false, }, () => { this.postMenuStatus(); @@ -238,7 +249,7 @@ class Engine extends React.Component { postMenuStatus() { window.postMessage({ method: 'menu', - open: this.state.item !== null || this.state.settings !== null || this.state.urlFocus, + open: this.state.item !== null || this.state.settings !== null || this.state.joinServerSettings !== null ||this.state.urlFocus, }); } @@ -251,6 +262,7 @@ class Engine extends React.Component {
New
Exit
this.joinServer()}>Join Server
+
this.openJoinServerSettings('joinServerSettings')}>Join Server Settings...
{/*
World
*/} @@ -347,6 +359,7 @@ class Engine extends React.Component { this.openSettings(null)}/> + this.openJoinServerSettings(null)}/>
this.onEngineRenderClick()} /> @@ -465,4 +478,116 @@ class Settings extends React.Component { } } +class JoinServerSettings extends React.Component { + + constructor(props) { + super(props); + + this.state = { + pcState: null, + dcState: null + }; + } + + classNames() { + const classNames = ['joinServerSettings']; + if (this.props.open) { + classNames.push('open'); + } + return classNames.join(' '); + } + + onMetricsBlur() { + } + + + + async createOffer() { + const button = document.getElementById('button'); + const offer = document.getElementById('offer'); + const answer = document.getElementById('answer'); + + const config = {iceServers: [{urls: "stun:stun.1.google.com:19302"}]}; + const pc = new RTCPeerConnection(config); + const dc = pc.createDataChannel("chat", {negotiated: true, id: 0}); + + dc.onopen = () => console.log("------ dc.onopen"); + dc.onmessage = e => console.log(`> ${e.data}`); + pc.oniceconnectionstatechange = e => console.log(pc.iceConnectionState); + + button.disabled = true; + await pc.setLocalDescription(await pc.createOffer()); + pc.onicecandidate = ({candidate}) => { + if (candidate) return; + offer.value = pc.localDescription.sdp; + offer.select(); + answer.placeholder = "Paste answer here"; + }; + + this.setState({ + pcState: pc, + dcState: dc + }); + } + + async createAnswer() { + const button = document.getElementById('button'); + const offer = document.getElementById('offer'); + const answer = document.getElementById('answer'); + const config = {iceServers: [{urls: "stun:stun.1.google.com:19302"}]}; + const pc = new RTCPeerConnection(config); + const dc = pc.createDataChannel("chat", {negotiated: true, id: 0}); + + if (pc.signalingState != "stable") return; + + button.disabled = offer.disabled = true; + await pc.setRemoteDescription({type: "offer", sdp: offer.value}); + await pc.setLocalDescription(await pc.createAnswer()); + + pc.onicecandidate = ({candidate}) => { + if (candidate) return; + answer.focus(); + answer.value = pc.localDescription.sdp; + answer.select(); + }; + }; + + async submitAnswer(e) { + // xxx not tested yet + const answer = document.getElementById('answer'); + const pc = this.state.pcState; + + + if (e.key != 'Enter' || pc.signalingState != "have-local-offer") return; + + answer.disabled = true; + pc.setRemoteDescription({type: "answer", sdp: answer.value}); + }; + + handleKeyPress = (event) => { + if(event.key == 'Enter'){ + console.log('enter press here! '); + this.createAnswer(); + } +} + + render() { + return ( +
+
this.props.close()}>
+
+
--- webrtc ---
+
+ + +
this.createOffer()}> +
Create Offer
+
+
+
+
+ ); + } +} + export default Engine; From 676896e84b8adf553f64bb17d17500c9434ae65f Mon Sep 17 00:00:00 2001 From: chrisplatorres Date: Thu, 6 Jun 2019 03:29:12 -0500 Subject: [PATCH 06/18] change engine.jsx to postmessage to index's functions --- ui/src/components/Engine.jsx | 93 +++++++++++++++++------------------- 1 file changed, 43 insertions(+), 50 deletions(-) diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx index ec6ee53..2f46fd0 100644 --- a/ui/src/components/Engine.jsx +++ b/ui/src/components/Engine.jsx @@ -484,11 +484,12 @@ class JoinServerSettings extends React.Component { super(props); this.state = { - pcState: null, - dcState: null }; } + componentDidMount() { + } + classNames() { const classNames = ['joinServerSettings']; if (this.props.open) { @@ -500,76 +501,59 @@ class JoinServerSettings extends React.Component { onMetricsBlur() { } - - async createOffer() { const button = document.getElementById('button'); const offer = document.getElementById('offer'); const answer = document.getElementById('answer'); - const config = {iceServers: [{urls: "stun:stun.1.google.com:19302"}]}; - const pc = new RTCPeerConnection(config); - const dc = pc.createDataChannel("chat", {negotiated: true, id: 0}); + window.addEventListener('message',function(e) { + offer.value = e.data.sdp; + },false); - dc.onopen = () => console.log("------ dc.onopen"); - dc.onmessage = e => console.log(`> ${e.data}`); - pc.oniceconnectionstatechange = e => console.log(pc.iceConnectionState); + window.postMessage({ + method: 'createOffer', + }); button.disabled = true; - await pc.setLocalDescription(await pc.createOffer()); - pc.onicecandidate = ({candidate}) => { - if (candidate) return; - offer.value = pc.localDescription.sdp; - offer.select(); - answer.placeholder = "Paste answer here"; - }; - - this.setState({ - pcState: pc, - dcState: dc - }); } - async createAnswer() { + async createAnswer(sdp) { const button = document.getElementById('button'); const offer = document.getElementById('offer'); const answer = document.getElementById('answer'); - const config = {iceServers: [{urls: "stun:stun.1.google.com:19302"}]}; - const pc = new RTCPeerConnection(config); - const dc = pc.createDataChannel("chat", {negotiated: true, id: 0}); - - if (pc.signalingState != "stable") return; - - button.disabled = offer.disabled = true; - await pc.setRemoteDescription({type: "offer", sdp: offer.value}); - await pc.setLocalDescription(await pc.createAnswer()); - pc.onicecandidate = ({candidate}) => { - if (candidate) return; + window.addEventListener('message',function(e) { answer.focus(); - answer.value = pc.localDescription.sdp; + answer.value = e.data.sdp; answer.select(); - }; + },false); + + window.postMessage({ + method: 'createOffer', + sdp: offer.value + }); + + button.disabled = offer.disabled = true; }; - async submitAnswer(e) { - // xxx not tested yet + submitAnswer(e) { const answer = document.getElementById('answer'); - const pc = this.state.pcState; - - if (e.key != 'Enter' || pc.signalingState != "have-local-offer") return; + window.postMessage({ + method: 'submitAnswer', + sdp: answer.value + }); answer.disabled = true; - pc.setRemoteDescription({type: "answer", sdp: answer.value}); }; - handleKeyPress = (event) => { - if(event.key == 'Enter'){ - console.log('enter press here! '); - this.createAnswer(); + joinServer() { + // console.log("joinServer ---- datachannel = " + this.state.dcState); + // window.postMessage({ + // method: 'joinServer', + // datachannel: this.state.dcState, + // }); } -} render() { return ( @@ -578,11 +562,20 @@ class JoinServerSettings extends React.Component {
--- webrtc ---
- - -
this.createOffer()}> +