# Sync the 3d object

**URL:** <https://discourse.threejs.org/t/sync-the-3d-object/65509>\
**Category:** Questions\
**Tags:** transform\
**Created:** [May 14, 2024, 5:47am UTC](https://discourse.threejs.org/t/sync-the-3d-object/65509 "2024-05-14T05:47:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![harishm](https://avatars.discourse-cdn.com/v4/letter/h/6bbea6/32.png) [@harishm](https://discourse.threejs.org/u/harishm)\
**Post date:** [May 14, 2024, 5:47am UTC](https://discourse.threejs.org/t/sync-the-3d-object/65509/1 "2024-05-14T05:47:36Z")

</div>

I have a requirement that i need to sync the iPad and desktop monitor, So i have loaded the 3D model with obj file and same as in iPad , So i just need to sync when user move the object in iPad so it will also move object with same coordinates on desktop monitor, But currently i am not able to move the object,

Please help me out

```
						var originalDistance = camera.position.distanceTo(new THREE.Vector3(0, 0, 0));
									 
						
						var x = parseFloat(data.data.x_coordinate);
						var y = parseFloat(data.data.y_coordinate);
						var z = parseFloat(data.data.z_coordinate);
						
						gsap.to(camera.position, {
							x: x,
							y: y,
							z: z,
							//rotation: 7,
							onUpdate: function() {
								var currentDistance = camera.position.distanceTo(new THREE.Vector3(0, 0, 0));
								var distanceRatio = originalDistance / currentDistance;
								camera.position.x *= distanceRatio;
								camera.position.y *= distanceRatio;
								camera.position.z *= distanceRatio;
								camera.rotation.x = parseFloat(data.data.x_rotation) ;
								camera.rotation.y = parseFloat(data.data.y_rotation);
								camera.rotation.z = parseFloat(data.data.z_rotation);
								camera.rotation.w = parseFloat(data.data.w_rotation);
								camera.lookAt(new THREE.Vector3(0, 0, 0));
							},
						});
						gsap.to(camera.quaternion, {
							x: parseFloat(data.data.x_object_quaternion),
							y: parseFloat(data.data.y_object_quaternion),
							z: parseFloat(data.data.z_object_quaternion),
							w: parseFloat(data.data.w_object_quaternion)
						});

```

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [May 14, 2024, 8:52am UTC](https://discourse.threejs.org/t/sync-the-3d-object/65509/2 "2024-05-14T08:52:39Z")

</div>

You could use websockets to synchronise Object3D positions and quaternions.

Here is an example.

Open this on 2 browsers.

Example : [https://sbedit.net/69e203d427b042dfcb63f1f413dc10969512b2bf](https://sbedit.net/69e203d427b042dfcb63f1f413dc10969512b2bf)

Changes you make to the controls in one scene, are mirrored onto the other scene in the other browser.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/7/57cc86f60ecae40597359b1d3f68835348327901.png)

---

<div class="post-metadata">

**Author:** ![harishm](https://avatars.discourse-cdn.com/v4/letter/h/6bbea6/32.png) [@harishm](https://discourse.threejs.org/u/harishm)\
**Post date:** [May 14, 2024, 9:00am UTC](https://discourse.threejs.org/t/sync-the-3d-object/65509/3 "2024-05-14T09:00:22Z")

</div>

Yes i have using socket IO and taking xyz cordinate from iPad, But the only thing is the 3d Model cordinate not getting set properly on the desktop monitor.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [May 14, 2024, 9:12am UTC](https://discourse.threejs.org/t/sync-the-3d-object/65509/4 "2024-05-14T09:12:56Z")

</div>

my example works for me. Only you know what code you are using.

---

<div class="post-metadata">

**Author:** ![harishm](https://avatars.discourse-cdn.com/v4/letter/h/6bbea6/32.png) [@harishm](https://discourse.threejs.org/u/harishm)\
**Post date:** [May 14, 2024, 9:15am UTC](https://discourse.threejs.org/t/sync-the-3d-object/65509/5 "2024-05-14T09:15:31Z")

</div>

Yes your code is working.  
Please have a look in my code.

function init() {  
/\*\*  
\* Create Camera Object  
\*\*/  
// var window.innerWidth = 768;  
// var window.innerHeight = 1024;  
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 7000);  
camera.position.set(0.5, 2.8, 21);

```
// scene
scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
const ambientLight = new THREE.AmbientLight(0xffffff, 4);
scene.add(ambientLight);
scene.background = new THREE.Color( 0xbfe3dd );
 
// manager
function loadModel() {
	$("#player-loader").hide();
	$("#load-time").html("");
	object.traverse(function (child) {
		if (child.isMesh) child.material.map = texture;
	});
	// object.position.y = - 0.95;
	object.scale.setScalar(0.0075);
	scene.add(object);
	render();
}

const manager = new THREE.LoadingManager(loadModel);

// texture
const textureLoader = new THREE.TextureLoader(manager);
const texture = textureLoader.load('textures/uv_grid_opengl.jpg', render);
texture.colorSpace = THREE.SRGBColorSpace;

// model
function onProgress(xhr) {
	$("#player-loader").show();
	if (xhr.lengthComputable) {
		const percentComplete = xhr.loaded / xhr.total * 100;
		$("#load-time").html(percentComplete.toFixed(2) + '% downloaded');
		//console.log('model ' + percentComplete.toFixed(2) + '% downloaded');
	}
}

function onError() { }
let image = $("#obj-image").html();
let imageMtl = $("#obj-mtl").html();

var mtlLoader = new MTLLoader();
mtlLoader.load( imageMtl, function( materials ) {
	materials.preload();
 	const loader = new OBJLoader(manager);
	loader.setMaterials( materials );
	loader.load(image, function (obj) {
		obj.name = "myObject";
		object = obj;
		scene.add( object );
	}, onProgress, onError);
	// $("body").find('canvas').addClass("testcanvas");
});

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

controls = new TrackballControls( camera, renderer.domElement );
// controls.rotateSpeed = 0.5;
controls.zoomSpeed = 1.2;
// controls.panSpeed = 0.2;
controls.keys = ['KeyA', 'KeyS', 'KeyD'];
window.addEventListener('resize', onWindowResize);

```

}

function onWindowResize() {  
camera.aspect = window.innerWidth / window.innerHeight;  
camera.updateProjectionMatrix();  
renderer.setSize(window.innerWidth, window.innerHeight);  
controls.handleResize();  
}

function render() {  
renderer.render(scene, camera);  
}

function animate() {  
requestAnimationFrame( animate );  
controls.update();  
renderer.render( scene, camera );

}

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [May 14, 2024, 9:25am UTC](https://discourse.threejs.org/t/sync-the-3d-object/65509/6 "2024-05-14T09:25:27Z")

</div>

I am not going to fix your code.  
I cannot reproduce your problem from the information you have supplied. I would need to dedicate too many hours and my own serever resources to try and reproduce.  
I would try to fix it if I was employed by your company, but I am not.  
Use my example as a guide to show you that it is possible.  
My example isn’t the only alternative solution available to you on the internet.

---

<div class="post-metadata">

**Author:** ![harishm](https://avatars.discourse-cdn.com/v4/letter/h/6bbea6/32.png) [@harishm](https://discourse.threejs.org/u/harishm)\
**Post date:** [May 14, 2024, 9:33am UTC](https://discourse.threejs.org/t/sync-the-3d-object/65509/7 "2024-05-14T09:33:46Z")

</div>

Thanks for your time ,  
I does meant that.