使用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.... 我不是初学者使用three.js文件，所以如果有人知道我的问题，请帮助我...只想在鼠标按下时旋转对象....

Thanks, Pratik 谢谢，Pratik

Answer 1

TrackballControls.js is used to control the camera, you can't manipulate the object with it. TrackballControls.js用于控制相机，你无法用它来操纵对象。 see How to rotate a 3D object on axis three.js? 请参阅如何在轴three.js上旋转3D对象？ Maybe it should help for your case. 也许这应该有助于你的情况。

Answer 2

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 创建一个旋转，该旋转将使用轴的叉积，以及第一个矢量的长度作为旋转量

使用three.js旋转对象而不是摄像机

问题描述

2 个解决方案

解决方案1
2 2014-04-07 08:34:09

解决方案2
1 2014-04-07 19:21:48

使用three.js旋转对象而不是摄像机

问题描述

2 个解决方案

解决方案1 2 2014-04-07 08:34:09

解决方案2 1 2014-04-07 19:21:48

解决方案1
2 2014-04-07 08:34:09

解决方案2
1 2014-04-07 19:21:48