three.js入门4——2014.5.27让场景动起来

最新推荐文章于 2023-10-17 14:38:25 发布
最新推荐文章于 2023-10-17 14:38:25 发布
阅读量1.8k 收藏
点赞数
分类专栏： three.js/webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fly_xiaoyou2015/article/details/27367233
版权

早前写过一个正方体自己旋转的例子，后想了下让物体随鼠标的方向滚动，让场景动起来有俩种方法

第一种方法是让物体在坐标系里面移动，摄像机不动。第二种方法是让摄像机在坐标系里面移动，物体不动。

这样场景就能够动起来了。摄像机可以理解我们自己的眼睛。但我们通常选择第二种，因为第一种方式对计算机资源的消耗是不可忽视的。

闲话少说，上码。

<!DOCTYPE>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
   <script src="../build/three.min.js"></script>
   <script src="../Demojs/TrackballControls.js"></script>
</head>
<body>
   <script type="text/javascript">
       //摄像机，场景，渲染器全局变量
       var camera, scene, renderer;

       //几何体，材质，网格全局变量
       var geometry, material, mesh;


       //
       var controls;
       init();
       animate();

       function init() {//初始化，包括对相机，场景，渲染器，网格的初始化（对网格初始化，对其施加材质等）

           //下面设置一个透视相机 近剪裁面为1，远剪裁面为10000；垂直视域为75度角
           //相机的可见范围是个四凌锥（削平了尖顶的金子塔）。前、后裁剪面是指相机能看见的最近距离和最远距离。

           camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 10000);
           //设置相机在z轴位置为1000
           camera.position.z = 1000;
           //建立场景
           scene = new THREE.Scene();
           //建立一个立方体，长宽高依次为200,200,200,
           geometry = new THREE.CubeGeometry(200, 200, 200);
           //建立一个红色的材质，要注意,Three.js提供了很多的材质，其中这个MeshBasicMaterial材质的颜色不会受到漫反射光的染色。
           material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
           
           //建立一个200,200,200的正方体网格，并施加为红色的基础材质
           mesh = new THREE.Mesh(geometry, material);

           //将网格加入场景，对象加入到场景后，如果不设定位置的话，默认的是在场景中心哦
           scene.add(mesh);


           //建立渲染器，这里Three.js提供了多种渲染器，WebGLRenderer等，具体差别还在学习中
           renderer = new THREE.CanvasRenderer();
           //设计渲染的范围
           renderer.setSize(window.innerWidth, window.innerHeight);
           //将渲染器加入到网页中，其实这里的render.dommElement是一个Canvas标签；
           document.body.appendChild(renderer.domElement);

           controls = new THREE.TrackballControls(camera);
       }
       //这是一个动画循环
       function animate() {

           // note: three.js includes requestAnimationFrame shim

           controls.update();
           requestAnimationFrame(animate);//基于脚本的动画的计时控制
           //每次渲染让网格旋转一定角度
           mesh.rotation.x += 0.01;
           mesh.rotation.y += 0.02;
           //施加渲染
           renderer.render(scene, camera);

       }
</script>
</body>
</html>
这里引用了除three.min.js外的另一个js文件，文件是由three.js Demo里提供的。 

THREE.TrackballControls = function ( object, domElement ) {

	THREE.EventDispatcher.call( this );

	var _this = this;
	var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM: 4, TOUCH_PAN: 5 };

	this.object = object;
	this.domElement = ( domElement !== undefined ) ? domElement : document;

	// API

	this.enabled = true;

	this.screen = { width: 0, height: 0, offsetLeft: 0, offsetTop: 0 };
	this.radius = ( this.screen.width + this.screen.height ) / 4;

	this.rotateSpeed = 1.0;
	this.zoomSpeed = 1.2;
	this.panSpeed = 0.3;

	this.noRotate = false;
	this.noZoom = false;
	this.noPan = false;

	this.staticMoving = false;
	this.dynamicDampingFactor = 0.2;

	this.minDistance = 0;
	this.maxDistance = Infinity;

	this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];

	// internals

	this.target = new THREE.Vector3();

	var lastPosition = new THREE.Vector3();

	var _state = STATE.NONE,
	_prevState = STATE.NONE,

	_eye = new THREE.Vector3(),

	_rotateStart = new THREE.Vector3(),
	_rotateEnd = new THREE.Vector3(),

	_zoomStart = new THREE.Vector2(),
	_zoomEnd = new THREE.Vector2(),

	_touchZoomDistanceStart = 0,
	_touchZoomDistanceEnd = 0,

	_panStart = new THREE.Vector2(),
	_panEnd = new THREE.Vector2();

	// for reset

	this.target0 = this.target.clone();
	this.position0 = this.object.position.clone();
	this.up0 = this.object.up.clone();

	// events

	var changeEvent = { type: 'change' };


	// methods

	this.handleResize = function () {

		this.screen.width = window.innerWidth;
		this.screen.height = window.innerHeight;

		this.screen.offsetLeft = 0;
		this.screen.offsetTop = 0;

		this.radius = ( this.screen.width + this.screen.height ) / 4;

	};

	this.handleEvent = function ( event ) {

		if ( typeof this[ event.type ] == 'function' ) {

			this[ event.type ]( event );

		}

	};

	this.getMouseOnScreen = function ( clientX, clientY ) {

		return new THREE.Vector2(
			( clientX - _this.screen.offsetLeft ) / _this.radius * 0.5,
			( clientY - _this.screen.offsetTop ) / _this.radius * 0.5
		);

	};

	this.getMouseProjectionOnBall = function ( clientX, clientY ) {

		var mouseOnBall = new THREE.Vector3(
			( clientX - _this.screen.width * 0.5 - _this.screen.offsetLeft ) / _this.radius,
			( _this.screen.height * 0.5 + _this.screen.offsetTop - clientY ) / _this.radius,
			0.0
		);

		var length = mouseOnBall.length();

		if ( length > 1.0 ) {

			mouseOnBall.normalize();

		} else {

			mouseOnBall.z = Math.sqrt( 1.0 - length * length );

		}

		_eye.copy( _this.object.position ).sub( _this.target );

		var projection = _this.object.up.clone().setLength( mouseOnBall.y );
		projection.add( _this.object.up.clone().cross( _eye ).setLength( mouseOnBall.x ) );
		projection.add( _eye.setLength( mouseOnBall.z ) );

		return projection;

	};

	this.rotateCamera = function () {

		var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );

		if ( angle ) {

			var axis = ( new THREE.Vector3() ).crossVectors( _rotateStart, _rotateEnd ).normalize(),
				quaternion = new THREE.Quaternion();

			angle *= _this.rotateSpeed;

			quaternion.setFromAxisAngle( axis, -angle );

			_eye.applyQuaternion( quaternion );
			_this.object.up.applyQuaternion( quaternion );

			_rotateEnd.applyQuaternion( quaternion );

			if ( _this.staticMoving ) {

				_rotateStart.copy( _rotateEnd );

			} else {

				quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
				_rotateStart.applyQuaternion( quaternion );

			}

		}

	};

	this.zoomCamera = function () {

		if ( _state === STATE.TOUCH_ZOOM ) {

			var factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
			_touchZoomDistanceStart = _touchZoomDistanceEnd;
			_eye.multiplyScalar( factor );

		} else {

			var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;

			if ( factor !== 1.0 && factor > 0.0 ) {

				_eye.multiplyScalar( factor );

				if ( _this.staticMoving ) {

					_zoomStart.copy( _zoomEnd );

				} else {

					_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;

				}

			}

		}

	};

	this.panCamera = function () {

		var mouseChange = _panEnd.clone().sub( _panStart );

		if ( mouseChange.lengthSq() ) {

			mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );

			var pan = _eye.clone().cross( _this.object.up ).setLength( mouseChange.x );
			pan.add( _this.object.up.clone().setLength( mouseChange.y ) );

			_this.object.position.add( pan );
			_this.target.add( pan );

			if ( _this.staticMoving ) {

				_panStart = _panEnd;

			} else {

				_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );

			}

		}

	};

	this.checkDistances = function () {

		if ( !_this.noZoom || !_this.noPan ) {

			if ( _this.object.position.lengthSq() > _this.maxDistance * _this.maxDistance ) {

				_this.object.position.setLength( _this.maxDistance );

			}

			if ( _eye.lengthSq() < _this.minDistance * _this.minDistance ) {

				_this.object.position.addVectors( _this.target, _eye.setLength( _this.minDistance ) );

			}

		}

	};

	this.update = function () {

		_eye.subVectors( _this.object.position, _this.target );

		if ( !_this.noRotate ) {

			_this.rotateCamera();

		}

		if ( !_this.noZoom ) {

			_this.zoomCamera();

		}

		if ( !_this.noPan ) {

			_this.panCamera();

		}

		_this.object.position.addVectors( _this.target, _eye );

		_this.checkDistances();

		_this.object.lookAt( _this.target );

		if ( lastPosition.distanceToSquared( _this.object.position ) > 0 ) {

			_this.dispatchEvent( changeEvent );

			lastPosition.copy( _this.object.position );

		}

	};

	this.reset = function () {

		_state = STATE.NONE;
		_prevState = STATE.NONE;

		_this.target.copy( _this.target0 );
		_this.object.position.copy( _this.position0 );
		_this.object.up.copy( _this.up0 );

		_eye.subVectors( _this.object.position, _this.target );

		_this.object.lookAt( _this.target );

		_this.dispatchEvent( changeEvent );

		lastPosition.copy( _this.object.position );

	};

	// listeners

	function keydown( event ) {

		if ( _this.enabled === false ) return;

		window.removeEventListener( 'keydown', keydown );

		_prevState = _state;

		if ( _state !== STATE.NONE ) {

			return;

		} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && !_this.noRotate ) {

			_state = STATE.ROTATE;

		} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && !_this.noZoom ) {

			_state = STATE.ZOOM;

		} else if ( event.keyCode === _this.keys[ STATE.PAN ] && !_this.noPan ) {

			_state = STATE.PAN;

		}

	}

	function keyup( event ) {

		if ( _this.enabled === false ) return;

		_state = _prevState;

		window.addEventListener( 'keydown', keydown, false );

	}

	function mousedown( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		if ( _state === STATE.NONE ) {

			_state = event.button;

		}

		if ( _state === STATE.ROTATE && !_this.noRotate ) {

			_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );

		} else if ( _state === STATE.ZOOM && !_this.noZoom ) {

			_zoomStart = _zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );

		} else if ( _state === STATE.PAN && !_this.noPan ) {

			_panStart = _panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );

		}

		document.addEventListener( 'mousemove', mousemove, false );
		document.addEventListener( 'mouseup', mouseup, false );

	}

	function mousemove( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		if ( _state === STATE.ROTATE && !_this.noRotate ) {

			_rotateEnd = _this.getMouseProjectionOnBall( event.clientX, event.clientY );

		} else if ( _state === STATE.ZOOM && !_this.noZoom ) {

			_zoomEnd = _this.getMouseOnScreen( event.clientX, event.clientY );

		} else if ( _state === STATE.PAN && !_this.noPan ) {

			_panEnd = _this.getMouseOnScreen( event.clientX, event.clientY );

		}

	}

	function mouseup( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		_state = STATE.NONE;

		document.removeEventListener( 'mousemove', mousemove );
		document.removeEventListener( 'mouseup', mouseup );

	}

	function mousewheel( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		var delta = 0;

		if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9

			delta = event.wheelDelta / 40;

		} else if ( event.detail ) { // Firefox

			delta = - event.detail / 3;

		}

		_zoomStart.y += ( 1 / delta ) * 0.05;

	}

	function touchstart( event ) {

		if ( _this.enabled === false ) return;

		switch ( event.touches.length ) {

			case 1:
				_state = STATE.TOUCH_ROTATE;
				_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
				break;

			case 2:
				_state = STATE.TOUCH_ZOOM;
				var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
				var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
				_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
				break;

			case 3:
				_state = STATE.TOUCH_PAN;
				_panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
				break;

			default:
				_state = STATE.NONE;

		}

	}

	function touchmove( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		switch ( event.touches.length ) {

			case 1:
				_rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
				break;

			case 2:
				var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
				var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
				_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy )
				break;

			case 3:
				_panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
				break;

			default:
				_state = STATE.NONE;

		}

	}

	function touchend( event ) {

		if ( _this.enabled === false ) return;

		switch ( event.touches.length ) {

			case 1:
				_rotateStart = _rotateEnd = _this.getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
				break;

			case 2:
				_touchZoomDistanceStart = _touchZoomDistanceEnd = 0;
				break;

			case 3:
				_panStart = _panEnd = _this.getMouseOnScreen( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
				break;

		}

		_state = STATE.NONE;

	}

	this.domElement.addEventListener( 'contextmenu', function ( event ) { event.preventDefault(); }, false );

	this.domElement.addEventListener( 'mousedown', mousedown, false );

	this.domElement.addEventListener( 'mousewheel', mousewheel, false );
	this.domElement.addEventListener( 'DOMMouseScroll', mousewheel, false ); // firefox

	this.domElement.addEventListener( 'touchstart', touchstart, false );
	this.domElement.addEventListener( 'touchend', touchend, false );
	this.domElement.addEventListener( 'touchmove', touchmove, false );

	window.addEventListener( 'keydown', keydown, false );
	window.addEventListener( 'keyup', keyup, false );

	this.handleResize();

};


事实上通过改变摄像机来改变场景是非常简单的，关键代码也就是 controls = new THREE.TrackballControls(camera);以及controls.update();

言多_必失
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js入门5——2014.5.28高亮显示
fly_xiaoyou2015
05-28 2559
现可以通过改变摄像机来旋转场景了，
Three.js教程：gui调试3
ygtu2018的博客
06-28 204
前面大家学过通过.add()方法可以添加一个拖动条用来改变对象的某个属性，本节课给大家介绍.add()方法创建新的UI交互界面，比如下拉菜单、单选框。
threejs 切换场景
07-29
threejs切换场景 实现图朴上的切换效果， 而不是相机的视角移动，不浪费性能，非常棒的效果，代码简单，实现思路简单，适合新手开发项目中，遇到当前视角切换到模型内部 等效果 ， threejs scene的切换 ， 视角的移动会导致页面不是很流畅，而且旋转也会有点小bug 直接切换场景，就不会存在这种的问题，值得收藏，学不会找博主 私信 看到了会回复
【ThreeJS基础教程-初识Threejs】1.2掌控我们的物体和模型
qq_42760477的博客
10-14 885
threejs基础教程：掌控物体和模型
threejs学习 ，GUI控制面板更改dom后问题记录
add_ysd的博客
10-17 220
threejs 学习文章
图形化开发（四）-Three.js之调式工具-dat.GUI
weixin_44867717的博客
09-09 657
图形化开发（四）-Three.js之调式工具-dat.GUI 调式方法 有些时候，我们需要调整模型的位置或者大小什么的需要每次都去场景内进行调试，现在我推荐一种常用的插件dat.GUI，接下来，我们将一起看看如何使用这一款插件： https://github.com/dataarts/dat.gui 功能 参数调整 自动匹配参数类型 (滑块， checkbox, 编辑 等) 可以自定义函数 使用 1.引入 <script src="https://cdn.bootcss.com/dat-gui/0
vue引入three.js模型无法移动，希望大佬帮忙解答一下谢谢
lyk8080的博客
02-13 238
Vue 引入three.js 模型无法移动控制
Three.js学习六——模型动画
热门推荐
Mr_Bobcp的博客
06-09 2万+
让模型实现动画效果，需要使用Three动画系统。 模型使用的是官方示例中的Soldier模型，文件位置：three.js-master\examples\models\gltf\Soldier.glb
Three动画animation初步
lqiqil的博客
09-27 762
值数组中的每一个成员，属于某一特定时间点，不仅可以是一个简单的数字，还可以是一个向量（如果是位置动画）或者是一个四元数（如果是旋转动画）。因此，值数组的长度可能是时间数组的三四倍。关键帧轨道(KeyframeTrack)中总是存在两个数组：times数组按顺序存储该轨道的所有关键帧的时间值，而values数组包含动画属性的相应更改值。关键帧轨道(KeyframeTrack)是关键帧(keyframes)的定时序列, 它由时间和相关值的列表组成, 用来让一个对象的某个特定属性动起来。
【Three.js】手把手教你在三维场景中实现人物行走动画效果
chengzhf的专栏
03-29 2492
当然，glb里面直接集成了位移的动画也不是不可以，但这样的轨迹控制就不方便。gltf是可以集成动画的，像行人行走的动画，一般是通过骨骼动画实现的。一个gltf里面可以有多组动画，加载到three.js引擎里面之后，可以选择所需要的动画进行播放。在这段代码里面，model1和model2的position属性被不停地更改，所以在场景刷新的时候，人物就走动起来了。第二个参数是一个回调函数，当加载完毕之后，我们就开始调用骨骼动画了。右下角可以切换不同的动画，这个例程里面有4个动画，奔跑、慢走、站立、伸展。
three.js 轨道控制器的常用属性和初始化（OrbitControls）
weixin_50207776的博客
08-30 3452
1.认识轨道控制器 控制器是three的外置包，通过引入，可以对模型进行鼠标的某些操作，例：拖放。旋转，放大。缩小。还有一些其他属性：比如模型的自转。 2.初始化控制器（常用属性详解） 首先引入外部包 <scriptsrc="../js/OrbitControls.js"></script> 初始化 var controls = new THREE.OrbitControls(camera, renderer.domElement);//建立控..
three.js仿人行走的动画效果
04-08
利用three导入json模型 饼渲染 加上three自带的动画效果 模拟像人一样走路的动画。
three.js自定义第一人称键盘控制
12-27
居于three.js，实现键盘控制前进后退，上升下降的第一人称控制。
three.js室内场景+模型第三人称行走demo
05-21
three.js室内场景+模型第三人称行走demo 跟随模型的第三人称相机控制，以键盘wasd控制模型的行走，以鼠标控制模型的朝向。 具体效果参见：https://blog.csdn.net/u014529917/article/details/106610955
three.js 入门三：THREE.BoxGeometry 解析
最新发布
03-14
three.js 入门三：THREE.BoxGeometry 解析
使用three.js搭建室内场景
05-21
使用three.js搭建室内场景 不使用模型倒入，完全使用three.js接口搭建场景 具体效果参见我的博客：https://blog.csdn.net/u014529917/article/details/82801737
vue页面引入three.js实现3d动画场景操作
10-14
主要介绍了vue页面引入three.js实现3d动画场景操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Three.js入门之hello world以及如何绘制线
10-19
主要给大家介绍了关于Three.js入门之hello world以及如何绘制线的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
three.js three.js入门指南-中文基础教程
01-23
three.js是一款用于创建3D图形的JavaScript库。它提供了丰富的功能和工具，可以在Web上轻松创建复杂的3D场景和动画效果。如果你想学习three.js，可以按照下面的入门指南来开始。 首先，你需要了解一些基本的Web开发...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值