Rotate the object not camera using three.js

Question

I want to rotate object when the mouse down event occur, but right now the problem is that when i click left mouse down the object is rotated across the camera...I do not understand where is the issue..

Below is the code

<html lang="en">
<head>
    <title>three.js webgl - loaders - OBJ loader</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #000;
            color: #fff;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            color: #fff;
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display:block;
        }
        #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
    </style>
</head>

<body>
    <div id="container">

    </div>

    <script src="build/three.min.js"></script>
    <script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
    <script src="js/loaders/OBJLoader_f.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>

    <script>

        if (!Detector.webgl) Detector.addGetWebGLMessage();

        var container, stats;
        var projector;
        var camera, scene, renderer, controls;

        var width = 1200;
        var height = 800;

        var mouseX = 0, mouseY = 0;


        init();
        animate();


        function init() {


            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.z = 100;


            // trackball controls
            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 = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [65, 83, 68];

            controls.target.set(0, 10, 0);

            controls.addEventListener('change', render);

            //Scene
            scene = new THREE.Scene();
            scene.add(camera);

            var ambient = new THREE.AmbientLight(0x101030);
            scene.add(ambient);

            var directionalLight = new THREE.DirectionalLight(0xffeedd);
            directionalLight.position.set(0, 0, 1).normalize();
            scene.add(directionalLight);

           var loader = new THREE.OBJLoader();


            loader.load('http://localhost:56689/obj/spine/spine_test.js', function (object)
            {
                scene.add( object );

            });


            // RENDERER

            renderer = new THREE.WebGLRenderer({ antialias: false });

            renderer.setSize(window.innerWidth, window.innerHeight);

            container = document.getElementById('container');
            container.appendChild(renderer.domElement);

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.zIndex = 100;
            container.appendChild(stats.domElement);

            window.addEventListener('resize', onWindowResize, false);


        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth, window.innerHeight);

            controls.handleResize();

            render();

        }


        function animate() {
            try
            {
                requestAnimationFrame(animate);
                controls.update();                  
            }
            catch (err)
            {
                alert("animate error. " + err.message);
            }
        }

        function render() {

            renderer.render(scene, camera);

            stats.update();
        }

    </script>

</body>

I am not beginner for using three.js file, so please help me if anybody know my problem...Just want to rotation the object when mouse down is click....

Thanks, Pratik

score 2 · Answer 1 · edited May 23 '17 at 10:27

2

TrackballControls.js is used to control the camera, you can't manipulate the object with it. see How to rotate a 3D object on axis three.js? Maybe it should help for your case.

edited May 23 '17 at 10:27

Community

1
1

answered Apr 07 '14 at 08:34

Dude Lebowski

159
1
10

Thank you very much for good information....I check the link but still confused...so if you have any working example for rotating the object then please share me...Thank you – Pratik Apr 07 '14 at 11:57

score 1 · Answer 2 · answered Apr 07 '14 at 19:21

1

This does not sound like a trivial problem at all.

The first thing you can take a look at are the orbit controls that you have right now, and find the code that actually applies rotation to the camera.

In order to rotate an object by dragging, you need to do something like this:

you first need to figure out the direction your mouse moves between the frames
unproject this vector into world space
find the direction where you are looking with the camera in world space
find the cross product of these vectors ( world space )
Create a rotation that will use the cross product for the axis, and the length of the first vector as the amount of rotation

answered Apr 07 '14 at 19:21

pailhead

5,162
2
25
46

Thanks you very much for explaining....It would be helpful if you have example with the code...because i am the beginner for three.js file....so want have much coding knowledge for it...Thanks – Pratik Apr 08 '14 at 09:12
As i have said, it's not exactly trivial. Quaternions for starters, are a very complicated concept. The example above posted by West, seems like a great place to start, if you can understand it and get it going, use something like ArrowHelper to play with the THREE.Vector3 operations to set up the rotation axis first. You can consult the documentation for the methods. – pailhead Apr 08 '14 at 21:28

Rotate the object not camera using three.js

2 Answers2