threejs 鼠标移动控制模型旋转

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>threejs鼠标移动控制模型旋转</title>

</head>

<body>

    <script src="js/threejs/three.js"></script>
    <!--<script src="http://jsrun.it/assets/a/q/3/W/aq3Wl" type="text/javascript"></script>-->
    <script src="js/threejs/renderers/CanvasRenderer.js"></script>
    <script src="js/threejs/renderers/Projector.js"></script>
    <script src="js/threejs/DDSLoader.js"></script>
        <script src="js/threejs/MTLLoader.js"></script>
        <script src="js/threejs/OBJLoader.js"></script>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script src="https://raw.githack.com/mrdoob/three.js/master/examples/fonts/helvetiker_regular.typeface.js"></script> 

    <script>
    var camera, scene, renderer, geometry, material, mesh;
    var pivot5, pivot6;

    init();

    function init() {

      scene = new THREE.Scene();

      camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
      camera.position.z = 500;
      camera.position.y = 100;
      scene.add(camera);

      //坐标轴辅助  
      var axes = new THREE.AxisHelper(500);
      scene.add(axes);

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setClearColor( 0xffffcc );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize(window.innerWidth, window.innerHeight);

      //添加环境光
      var ambient = new THREE.AmbientLight( 0x444444 );
        scene.add( ambient );

        // 添加定向光线
        var directionalLight = new THREE.DirectionalLight( 0xffeedd );
        directionalLight.position.set( 0, 0, 1 ).normalize();
        scene.add( directionalLight );

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

        //加载obj 、材质、贴图
        var onError = function ( xhr ) { };

        THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() ); 

        var texture = new THREE.Texture();  
        var loader = new THREE.OBJLoader();
        loader.setPath( 'models/' );
        pivot5 = new THREE.Object3D();
        //导入obj模型
        loader.load( 'tree.obj', function ( object ) {

            object.traverse( function ( child ) {

                if ( child instanceof THREE.Mesh ) {

                    child.material.map = texture;
                    //将模型放大40倍
                    var n=40;
                    child.scale.x =n;
                    child.scale.y =n;
                    child.scale.z =n;
                }

            } );

            pivot5.position.x = -100;
            pivot5.position.z = 100;

            object.position.x = 0;
            object.position.z = 0;

            object.position.y = 50;
            //scene.add( object );
            pivot5.add(object);

        }, onProgress, onError );

        //导入贴图
        var cubemtlLoader = new THREE.MTLLoader();
        cubemtlLoader.setPath( 'models/' );
        pivot6 = new THREE.Object3D();

        cubemtlLoader.load( 'cube.mtl', function( materials ) {


            materials.preload();

            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials( materials );
            objLoader.setPath( 'models/' );
            objLoader.load( 'cube.obj', function ( object ) {
                var n= 20;
                object.scale.x =n;
                object.scale.y =n;
                object.scale.z =n;
                //修改旋转轴的坐标点，默认是(0,0,0);
                pivot6.position.x = 100;
                pivot6.position.z = 100;

                object.position.x = 0;
                object.position.z = 0;

                object.position.y = 100;
                pivot6.add(object);
                render();

            }, onProgress, onError );
        });

      scene.add(pivot5);
      scene.add(pivot6);

      document.body.appendChild(renderer.domElement);
      document.addEventListener( 'mousedown', onMouseDown, false );
      document.addEventListener( 'mouseup', onMouseup, false );

    }

    var rotateStart;
    rotateStart = new THREE.Vector2();

    /*
        鼠标移动控制模型旋转思想：
        当按下鼠标时及时当前鼠标的水平坐标clientX1，在鼠标移动的过程中不断触发onMouseMove事件，
        不停的记录鼠标的当前坐标clientX2，由当前坐标减去记录的上一个水平坐标，
        并且将当前的坐标付给上一个坐标clientX1，计算两个坐标的之间的差clientX2-clientX1，
        将得到的差值除以一个常量（这个常量可以根据自己的需要调整），得到旋转的角度
    */
    function onMouseDown(event){
        event.preventDefault();
        mouseDown = true;
        mouseX = event.clientX;//出发事件时的鼠标指针的水平坐标

        rotateStart.set( event.clientX, event.clientY );
        document.addEventListener( 'mousemove', onMouseMove2, false );
    }

    function onMouseup(event){      
        mouseDown = false;

        document.removeEventListener("mousemove", onMouseMove2);
    }

    function onMouseMove2(event){
        if(!mouseDown){
            return;
        }       
        var deltaX = event.clientX - mouseX;
        mouseX = event.clientX;
        rotateScene(deltaX);        
    }

    //设置模型旋转速度，可以根据自己的需要调整
    function rotateScene(deltaX){
        //设置旋转方向和移动方向相反，所以加了个负号
        var deg = -deltaX/279;
        //deg 设置模型旋转的弧度
        pivot5.rotation.y += deg;
        pivot6.rotation.y += deg;
        render();
    }

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

    </script>
</body>
</html>
threejs 鼠标移动控制模型旋转

猜你喜欢
