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