javascript - Rotating two 3D images in sync using three.js -
i trying rotate 2 3d images simultaneously on mouse click event. images rotating there angular difference in rotation. i.e. images not getting rotated in sync.
i have used 2 functions reference three.js sample code. first function init() contains initialization details. have used trackballcontrols zooming effect.
function init() { document.getelementbyid("image").addeventlistener( 'mouseup', ondocumentmousemove, false ); container = document.getelementbyid('image'); camera = new three.perspectivecamera( 100, screen_width / screen_height, 1, 100000); camera.position.z = 700; controls = new three.trackballcontrols( camera ); controls.rotatespeed = 1.0; controls.zoomspeed = 1.2; controls.panspeed = 0.8; controls.nozoom = false; controls.nopan = false; controls.staticmoving = false; controls.dynamicdampingfactor = 0.3; controls.keys = [ 65, 83, 68 ]; controls.addeventlistener( 'change', render ); scene = new three.scene(); var ambient = new three.ambientlight( 0xffffff ); scene.add( ambient ); try { webglrenderer = new three.webglrenderer(); webglrenderer.setsize( screen_width, screen_height ); webglrenderer.domelement.style.position = "relative"; container.appendchild( webglrenderer.domelement ); }catch (e) {} var loader = new three.jsonloader(); var callbackleft = function ( geometry, materials ) {createscene( geometry, materials, -400, floor, 50, 105 ) }; var callbackright = function ( geometry, materials ){createsceneright( geometry, materials, 400, floor, 50, 105 ) }; loader.load( "../view3d/female02_slim.js", callbackleft ); loader.load( "../view3d/female02_slim.js", callbackright ); } function createscene( geometry, materials, x, y, z, b ) { zmesh = new three.mesh( geometry, new three.meshfacematerial( materials ) ); zmesh.position.set( x, y, z ); zmesh.scale.set( 3, 3, 3 ); three.geometryutils.center( geometry ); scene.add( zmesh ); } function createsceneright( geometry, materials, x, y, z, b ) { zmeshright = new three.mesh( geometry, new three.meshfacematerial( materials ) ); zmeshright.position.set( x, y, z ); zmeshright.scale.set( 3, 3, 3 ); three.geometryutils.center( geometry ); scene.add( zmeshright ); } function ondocumentmousemove(event) { mousex = ( windowhalfx - event.clientx); } function animate() { requestanimationframe( animate ); controls.update(); render(); } var prevmousex = 0; function render() { if(mousex > -300) { zmesh.rotation.y -= 0.8; zmeshright.rotation.y -= 0.8; } else if(mousex < -300) { zmesh.rotation.y += 0.8; zmeshright.rotation.y += 0.8; } else { zmesh.rotation.y += 0; zmeshright.rotation.y -= 0.8; } webglrenderer.render( scene, camera ); }
please advise
Comments
Post a Comment