threejs 鼠标移动控制模型旋转

来源：互联网发布：软件开发兼职合同编辑：程序博客网时间：2024/05/18 02:09
<!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>
阅读全文
0 0