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