Sync the 3d object

Questions
1

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)
						});
2

You could use websockets to synchronise Object3D positions and quaternions.

Here is an example.

Open this on 2 browsers.

Example : https://sbedit.net/69e203d427b042dfcb63f1f413dc10969512b2bf

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

image
image1455×552 29.1 KB

3

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.

4

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

5

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 );

}

6

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.

1 Like
7

Thanks for your time ,
I does meant that.