CODEWITHSUNDEEP
c#asp.netthree.jstrackball
Pratik
Pratik

Reputation: 171

Rotate the object not camera using three.js

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

Upvotes: 1

Views: 4289

Answers (2)

pailhead
pailhead

Reputation: 5421

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

Upvotes: 1

Dude Lebowski
Dude Lebowski

Reputation: 159

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.

Upvotes: 2

Related Questions