<!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>