CODEWITHSUNDEEP
javascriptanimationvectorrotationthree.js
chris
chris

Reputation: 21

THREE.js smooth axis rotation via mouse and THREE.Quaternion

I tried to build a smooth rotation for THREE.Object3D via mousemove - without any jitter, gaps, interruption or something else... here is an isolated jsfiddle of my problem: http://jsfiddle.net/vYvmk/

I am not getting it - tried several different scenarios via nested groups etc. i guess Quaternion will do the trick but something went wrong...

Upvotes: 0

Views: 5076

Answers (2)

Ben Chung
Ben Chung

Reputation: 11

I've just published a post on rotating an object that may be similar to what you're looking for: Smooth Mouse Rotation in Three.js

Upvotes: 1

chris
chris

Reputation: 21

Im not sure but my slerp-solution looks exakt like mesh.lookAt( mouse3D )?! The mesh should spin continuously around target axis... Im not sure but mesh.quaternion.multiplySelf should be the trick - from here i have problems again =|

var v = new THREE.Vector3( mouse2D.y, -mouse2D.x, 0 );//.normalize();
var q = new THREE.Quaternion().setFromEuler( v );
var newQuaternion = new THREE.Quaternion();
THREE.Quaternion.slerp( mesh.quaternion, q, newQuaternion, 0.07 );
mesh.quaternion = newQuaternion;
// mesh.quaternion.multiplySelf( newQuaternion );
mesh.quaternion.normalize();

see jsfiddle: http://jsfiddle.net/DLta8/

Upvotes: 1

Related Questions