Utilizing OrbitControls with Socket.io in a Three.js Sphere

I'm currently troubleshooting an issue with my project. I have a three.js sphere ("HTML1" on Desktop) with controls (THREE.OrbitControls) that is functioning properly on both my computer and tablet. My goal is to control this sphere through my iPad, so I created a blank scene on an HTML file ("HTML2") running on my iPad. This blank three.js sphere also has control functions that I want to send to a server (socket.io), which will then relay them to the Desktop Sphere ("HTML1").

However, I am encountering an issue with my server. It is receiving data from the Tablet but not sending it to the Desktop (or the Desktop is not receiving it).

io.on('connection', function(socket){
socket.on('cameraControls', function(controls){
        socket.emit('sendControls', function(controls) {
        console.log('Controls');
        });
    });
  console.log('a user connected');
});

The data sent from the iPad ("HTML2") (loaded in the render function):

socket.emit('cameraControls', function(controls){});

The data received by the Desktop Sphere (also loaded in the render function):

socket.on('sendControls', function(controls){
         //this.controls = controls;
         console.log("got EVENT");
});

I am seeking advice on this issue as this is my first time working with socket.io. There are no errors in the Terminal or the Console Log, so I am unsure of where I am going wrong.

Answer №1

It is important to pass an object when emitting an event:

socket.emit('cameraControls', {controls: controls});

In order to send control information to the desktop, your server code should be:

io.on('connection', function(socket){
    socket.on('cameraControls', function(data){
        socket.emit('sendControls', {controls: data.controls});
    });
    console.log('a user connected');
});

Then, in your desktop's event listener, you can access the controls in this way:

socket.on('sendControls', function(data){
    // this.controls = data.controls
    console.log("received EVENT");
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Appwrite error message: Unable to access properties of undefined (looking for 'endpoint')

I am currently working on a project using Appwrite and I have encountered an issue with SDKs. When I use a client-side SDK to interact with the functions of Appwrite Teams, everything works perfectly like this: import { Client, Teams } from "appwrite& ...

What is the best way to use jQuery to retrieve information from one child element in an XML API in order to locate another child

Hi there, I'm new to jQuery and could use some help. I'm attempting to retrieve specific information like CPU and RAM details from a particular phone model. I've written the jQuery code, but I'm having trouble displaying the RAM and CPU ...

Error sound produced when detecting KeyCode on the keyboard

I'm currently working on a JavaScript project that involves capturing keyboard input. However, I'm encountering an issue where every time the user presses a key, it triggers an error sound. Is there a way to disable this sound? ...

Capture the Promise Rejection

During my test with WebdriverIO, I consistently encounter an issue specifically with this line of code: await browser.waitForVisible('#tx-sent li', 15000) Intermittently, a Promise rejection error occurs: Error: Promise was rejected with the ...

How to incorporate text into the white circle object using three.js

View the current state of my project on this JS Fiddle. I am looking to incorporate rotating text, whether in 3D or 2D. The text should rotate in sync with the white circle. I am open to any method that achieves the desired outcome. Below is the provided c ...

Exploring the realm of external variables and scoping within a jQuery function

I am facing an issue with the following code, where I want to execute test() every time the window is resized. var i = 0; var test = (function() { console.log(i++); })(); $(window).resize(function() { test(); }); Code: http://jsfiddle.net/qhoc/N ...

Triggering a function without the presence of an actual event

I need to come up with a solution for reusing a function triggered by an event binding. This problem stems from browsers remembering checkbox states, which is why I have to call the function on document load. One approach could involve wrapping setGrid() ...

How can you verify user identity in Firebase when making a call to a cloud function on a

I have integrated Firebase into my React Native app, and I have only enabled anonymous login feature. Currently, I am attempting to invoke a Cloud Function from the app without utilizing the firebase SDK. Instead, I intend to make the call using axios. De ...

Utilizing media queries to tailor the pre-designed website and ensure adaptability

I find myself in a situation where I need to make adjustments to my current website to ensure it fits properly on smaller desktop screens. While the site is viewable on all screen sizes, issues arise with screens as small as 14 inches, resulting in an unwa ...

Adding additional information using Mongoose leads to enhanced output in Handlebars

Imagine having a function that identifies all open bets in a specific collection: app.get('/profile/bet-history', function(req, res, next){ var user = req.user; if(user){ Bet.find({$query : {"username" : user.username ...

Nextjs couldn't locate the requested page

After creating a new Next.js application, I haven't made any changes to the code yet. However, when I try to run "npm run dev," it shows me the message "ready started server on [::]:3000, url: http://localhost:3000." But when I attempt to access it, I ...

Tips for implementing a draggable image within an <a-scene> by utilizing <a-assets> and <a-image> tags

Exploring the world of augmented reality for the web has been an interesting journey for me. I have been experimenting with aframe-ar.js and aframe.js to create a unique experience. One of the challenges I faced was making an image draggable within the & ...

Ways to have a function return a promise from the final "then" in a series of promises

I am delving into the world of test automation with Selenium and JavaScript. As a newcomer to both, along with functional programming and promises, I am facing a challenge in creating a function that performs three essential tasks: Click on an input Clea ...

Using styled components but lacking the ability to use the className property

Currently, I am working with React and styled components and utilizing a third-party component called IntlTelInput. Below is a snippet of my code: const StyledIntlTelInput = styled(IntlTelInput)` background: blue; `; export default function PhoneNu ...

What is the Vercel equivalent to .netlify/functions?

I'm in the process of deploying this repository: https://github.com/DataStax-Examples/astra-tik-tok using Vercel instead of Netlify. I've converted vanilla React to Next.js, but I'm unsure how to transition the code in the Home.js file to w ...

Execute a PHP script to modify a section of a PHP file

I successfully implemented a piece of code into a PHP file by manually searching for the right section and inserting it. Now, I am looking to automate this process with an install script for my code. The ideal installation script would: 1. Copy the exist ...

When working with NodeJS, Express, and MySQL, it is important to avoid setting headers after they have already been sent

I am working on a NodeJS application using Express and here is the relevant code snippet. app.post('/open', checkStatus, function(req, res) { if (req.error) { console.log(req.log); return res.json(req.error); } console.log(current ...

What is the process for implementing save-exact in bunfig.toml file?

Do bun repositories have a setting similar to .npmrc's save-exact configuration? I attempted to include save-exact = true in bunfig.toml but it did not have any effect. My bun version is 1.0.0. ...

Encounter a routing issue in Node.js/Express

I am encountering an error Cannot Get / while working on my project, and this is my current folder structure: Below is the content of my route.js file: //route.js 'use strict'; var app = require('../../config/express'); var router ...

Having trouble with Angular ngRoute functionality?

I'm currently working on configuring a basic Angular app. Here is my main HTML: <html ng-app="CostumerApp"> <head> <title> Customers </title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstr ...