Obj loader - add the ability to rotate objects with the mouse in any direction?

U

Universa12016-11-06 22:39:22

JavaScript

Universa1, 2016-11-06 22:39:22

I have a regular obj loader, help me add it so that objects can be rotated with the mouse in any direction on their own, as well as zoom in / out with the wheel, for example, it is possible with OrbitControls.js, but how to do it all?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
        <title></title> 

  
     
    </head>

<body>
   	<script src="js/three.min.js"></script>
    <script src="js/OBJLoader.js"></script>	
        <script src="js/script.js"></script>       
     </body>
</html>

var clock = new THREE.Clock();
            var delta = clock.getDelta(); // seconds.
            var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second
      var container, stats;

      var camera, scene, renderer;

      var mouseX = 0, mouseY = 0;

      var windowHalfX = window.innerWidth / 2;
      var windowHalfY = window.innerHeight / 2;


      init();
      animate();


      function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );
//Задание размеров и расположения 
        camera = new THREE.PerspectiveCamera( 18, window.innerWidth / window.innerHeight, 1, 5000 );
        camera.position.z = 900;

        // сцена

        scene = new THREE.Scene();
//Задание цвета
        var ambient = new THREE.AmbientLight( 0x006400);
        scene.add( ambient );
//Задание освещения
        var directionalLight = new THREE.DirectionalLight( 0xffeedd );
        directionalLight.position.set( 0, 0, 1 );
        scene.add( directionalLight );

        // Отображение текстур
                var manager = new THREE.LoadingManager();
                manager.onProgress = function ( item, loaded, total ) {

               console.log( item, loaded, total );

};

                 var texture = new THREE.Texture();

                   var onProgress = function ( xhr ) {
            if ( xhr.lengthComputable ) {
           var percentComplete = xhr.loaded / xhr.total * 100;
               console.log( Math.round(percentComplete, 2) + '% downloaded' );}
         };

                       var onError = function ( xhr ) {
          };

        
        // Загрузка модели
        var loader = new THREE.OBJLoader( manager );
        loader.load( 'cube.obj', function ( object ) {

          object.traverse( function ( child ) {

            if ( child instanceof THREE.Mesh ) {

            

            }

          } );
        //Задание координат
          object.position.x = 10;
                    object.rotation.x = 20* Math.PI / 180;
                    object.rotation.z = 20* Math.PI / 180;
                    object.scale.x = 30;
                    object.scale.y = 30;
                    object.scale.z = 30;
                    obj = object
          scene.add( obj );

        } );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

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

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

      }

      function onWindowResize() {
        windowHalfX = window.innerWidth / 5;
        windowHalfY = window.innerHeight / 5;

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

        renderer.setSize( window.innerWidth, window.innerHeight );
      }
//Движение мышкой
      function onDocumentMouseMove( event ) {
        mouseX = ( event.clientX - windowHalfX ) / 0.5;
        mouseY = ( event.clientY - windowHalfY ) / 0.5;  
      }

      function animate() {
        requestAnimationFrame( animate ) ;
        render();
      }
// Вращение
      function render() {
        
                /*obj.rotation.x += (0.2*(Math.PI / 180));
                obj.rotation.x %=360;*/
/*Движение мышкой
        camera.position.x += ( mouseX - camera.position.x ) * .05;
        camera.position.y += ( - mouseY - camera.position.y ) * .05;*/

        camera.lookAt( scene.position );

        renderer.render( scene, camera );
      }

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

P

Pavel K, 2016-11-07
@PavelK

An example with OrbitCOntrol:
https://codepen.io/nireno/pen/cAoGI
To move the object itself with the mouse, you first need to get the click coordinates from the canvas, project them onto the 3D scene (via THREE.Ray), in order to find out by which it was the object that was clicked relative to the location of the object and the camera, remember the choice, and rotate this particular object when the mouse coordinates change.
Code:
https://threejs.org/examples/canvas_interactive_cu...