CODEWITHSUNDEEP
javascriptthree.js
corporalpoon
corporalpoon

Reputation: 229

rotate obj on its axis on mousedown (OBJLoader) THREE.js

I would like to rotate my object on its axis when the mouse is dragged. I can only access my skull object inside the function, so I can put a rotation increment inside render().

Can someone tell me how to get my object to update its rotation based on my variables mouseY and mouseX?

var loader = new THREE.OBJLoader();
    loader.load(
        'images/SKULL.obj',
        function(object) {
            var skull = object;
            scene.add(skull);
           skull.position.y = -50;
           skull.rotation.y += mouseY;
           skull.rotation.x += mouseX;




            skull.traverse(function (child) {
                //console.log(child);
                if (child instanceof THREE.Mesh) {
                    child.material = chrome;
                }
            });



        },
        function(xhr) {
            var loaded = (xhr.loaded / xhr.total * 100);
            loadPercentageText.innerHTML = parseInt(loaded) + "%";
            //console.log(loaded + " % loaded");
            if (loaded == 100) {
                document.body.classList.remove("loading");
                animate();
            }
        },
        function (error) {
            //console.log("Error");
        }
    );

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );


   function onDocumentMouseMove( event ) {
        mouseX = ( event.clientX - windowHalfX ) / 2;
        mouseY = ( event.clientY - windowHalfY ) / 2;

      }



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

Upvotes: 1

Views: 476

Answers (2)

Rabbid76
Rabbid76

Reputation: 210878

You have to set the rotation of the mesh and you have to update the object matrix (Object3D.updateMatrix) like this:

function onDocumentMouseMove( event ) {
    var mouseX = window.innerWidth / 2 - event.clientX;
    var mouseY = window.innerHeight / 2 - event.clientY;
    mesh.rotation.y = Math.PI*2*mouseX/window.innerWidth;
    mesh.rotation.x = -Math.PI*2*mouseY/window.innerHeight;
    mesh.updateMatrix();
}

See the code snippet:

var renderer, camera, controls, scene;
var mesh;

function init(){
    renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});   
    renderer.setClearColor(0x000044);        

    scene = new THREE.Scene();        
    camera = new THREE.OrthographicCamera(window.innerWidth/-2,window.innerWidth/2,window.innerHeight/-2,window.innerHeight/2, -1000, 1000);    
    
    resize();
    window.onresize = resize;

    var geometry = new THREE.BoxGeometry(100, 100, 1);
    var material = new THREE.MeshBasicMaterial({
        color: 0xFF1111,
    });
    mesh = new THREE.Mesh(geometry,material);
    scene.add(mesh);

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}

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

function onDocumentMouseMove( event ) {
    var mouseX = window.innerWidth / 2 - event.clientX;
    var mouseY = window.innerHeight / 2 - event.clientY;
    mesh.rotation.y = Math.PI*2*mouseX/window.innerWidth;
    mesh.rotation.x = -Math.PI*2*mouseY/window.innerHeight;
    mesh.updateMatrix();
}   

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

init(); render();
<script src="https://threejs.org/build/three.min.js"></script>
<canvas id="myCanvas"></canvas>

Upvotes: 1

Mahmudur Rahman
Mahmudur Rahman

Reputation: 678

I have done the similar kind of things in one of my projects. Here is what i did:

Declare a variable for handling move related data:

var mouseRotationData = {
    startX : 0,
    startY : 0,
    endX : 0,
    endY : 0,
    x : 0,
    y : 0
};

Then on onDocumentMouseMove() add this:

mouseRotationData.endX = event.clientX;
mouseRotationData.endY = event.clientY;
mouseRotation();
mouseRotationData.startX = event.clientX;
mouseRotationData.startY = event.clientY;

Finally in the mouseRotation() function rotate your object:

var lim = 360;
var rFactor = lim / window.innerWidth;

mouseRotationData.y = (mouseRotationData.endX - mouseRotationData.startX)* rFactor;
mouseRotationData.x = (mouseRotationData.endY - mouseRotationData.startY)* rFactor;

var rot_x = mouseRotationData.x * (Math.PI / 180); // in radians
var rot_y = mouseRotationData.y * (Math.PI / 180);

Now you got the rotation amount for the x & y axis.

Upvotes: 0

Related Questions