three.js学习 函数使用方法散记3

二十三  通过json对象控制动画

//SphereGeometry
				var sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
				var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
				var sphereMesh = new THREE.Mesh( sphereGeometry, material );
				
				//Setup animation
				sphereMesh.animation = {
					"name"      : "Action",
					"fps"       : 25,
					"length"    : 2.0, 
					"hierarchy" : [
						{
							"parent" : -1, //root
							"keys"   : [
								{
									"time":0,
									"pos" :[0,0,0],
									"rot" :[0,0,0],
									"scl" :[1,1,1]
								},
								{
									"time":1.0,
									"pos" :[30,0,0]
								}
								,
								{
									"time":2.0,
									"pos" :[0,0,0]
								}
							]
						}
					]
				};
				//定义json对象
				ensureLoop( sphereMesh.animation );
				//保持循环 函数定义将下一个动作赋值为上一个动作
				THREE.AnimationHandler.add( sphereMesh.animation );
				//添加动画监听器								
				var sphereMeshAnimation = new THREE.Animation( sphereMesh, sphereMesh.animation.name )
				//定义动画对象 
				sphereMeshAnimation.play();
				//动画播放
				scene.add( sphereMesh );

ensure函数定义

var ensureLoop = function( animation ) {

				for ( var i = 0; i < animation.hierarchy.length; i ++ ) {
          
					var obj = animation.hierarchy[ i ];

					var first = obj.keys[ 0 ];
					var last = obj.keys[ obj.keys.length - 1 ];

					last.pos = first.pos;
					last.rot = first.rot;
					last.scl = first.scl;

				}

			};

还要在render函数里调用

var delta = clock.getDelta();

THREE.AnimationHandler.update( delta );

二十四 flycontrols

controls = new THREE.FlyControls( camera );

				controls.movementSpeed = 1000;
				controls.domElement = container;
				controls.rollSpeed = Math.PI / 24;
				controls.autoForward = false;
				controls.dragToLook = false;

二十五 three.js 还支持or的模拟..很碉堡的样子

二十六 给场景添加雾

scene = new THREE.Scene();
				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002/*雾的浓度 越小越稀疏*/ );

二十七 用鼠标控制场景obit contorl

controls = new THREE.OrbitControls( camera );
				controls.addEventListener( 'change', render );//render函数作为参数 "change"貌似是内定的  改成change1控制会失效

二十八 按照路径控制镜头

controls = new THREE.PathControls( camera );

				controls.waypoints = [ [ -500, 0, 0 ], [ 0, 200, 0 ], [ 500, 0, 0 ] ];
                //传入一些点 摄像头会根据点的顺序依次走 走完回到原点继续走
				controls.duration = 28
                //摄像头的移动速度 越小越快
				controls.useConstantSpeed = true;
				//controls.createDebugPath = true;
				//controls.createDebugDummy = true;
				controls.lookSpeed = 0.06;//鼠标控制镜头观察点速度
				controls.lookVertical = true;//允许鼠标控制观察点 上下移动
				controls.lookHorizontal = true;//....              左右移动
				controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };
				controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };
				controls.lon = 180;//貌似影响着鼠标控制的速度

				controls.init();
controls.animation.play();

render函数里要调用 controls.update(delta); var delta = clock.getDelta(); var clock = new THREE.Clock();

二十九  鼠标锁定对象

controls = new THREE.PointerLockControls( camera );
				scene.add( controls.getObject() );

				ray = new THREE.Raycaster();//用以检测controls对象 和场景物体的碰撞
				ray.ray.direction.set( 0, -1, 0 );//设置碰撞的方向
var objects  = [];					
objects.push( mesh );
function animate() {

				requestAnimationFrame( animate );

				//

				controls.isOnObject( false );//先设置没有碰撞到物体

				ray.ray.origin.copy( controls.getObject().position );
				ray.ray.origin.y -= 10;//这两个是获得初始位置?

				var intersections = ray.intersectObjects( objects );//碰撞对象传进参数

				if ( intersections.length > 0 ) {

					var distance = intersections[ 0 ].distance;

					if ( distance > 0 && distance < 10 ) {

						controls.isOnObject( true );//貌似这个为true  camera就会停下来  表现为碰撞到物体了

					}

				}

				controls.update( Date.now() - time );//以时间为标志更新摄像头的位置么

				renderer.render( scene, camera );

				time = Date.now();

			}

三十 动态修改矩阵方法(来自misc-lookat例子)

var geometry = new THREE.CylinderGeometry( 0, 10, 100, 3 );//任意一个geometry
geometry.applyMatrix(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(-Math.PI/2, Math.PI,0)));
//euler应该是返回一个原点指向参数的向量 前3个参数是x y z 以弧度为单位 然后传入geometry的applyMatrix 通过matrix4的旋转方法将geometry指向向量的方向 这里用来初始化物体方向
scene.matrixAutoUpdate = false;//改由手动修改矩阵
for ( var i = 1, l = scene.children.length; i < l; i ++ ) {
scene.children[ i ].lookAt( sphere.position );//object.lookat 传入向量可以使物体旋转
				}

三十一 声音使用

var Sound = function ( sources, radius, volume ) {

				var audio = document.createElement( 'audio' );//新建audio元素

				for ( var i = 0; i < sources.length; i ++ ) {

					var source = document.createElement( 'source' );
					source.src = sources[ i ];

					audio.appendChild( source );//新建source元素并添加到audio元素

				}

				this.position = new THREE.Vector3();

				this.play = function () {

					audio.play();//播放
                    
				}

				this.update = function ( camera ) {

					var distance = this.position.distanceTo( camera.position );

					if ( distance <= radius ) {

						audio.volume = volume * ( 1 - distance / radius );//用volume控制音量 这里通过距离控制音量

					} else {

						audio.volume = 0;

					}

				}

			}

三十二 FirstPersonControls.js

controls = new THREE.FirstPersonControls( camera );

				controls.movementSpeed = 70;
				controls.lookSpeed = 0.05;
				controls.noFly =false;//这个不知何用
				controls.lookVertical = true;//设置是否允许摄像头上下移动
				controls.handleResize();//用在窗口大小变换时候执行
var delta = clock.getDelta(),
					time = clock.getElapsedTime() * 5;

				controls.update( 0.02 );//这个参数越小镜头运动越快,,设置的是什么= =











三十三 测试geometry的点和面


		<script src="js/UVsUtils.js"></script>
function test(name, geometry) {
				var d = document.createElement('div');
				d.innerHTML = '<br><br>' + name + '<br>';
				d.appendChild(THREE.UVsDebug(geometry));//传入geometry对象 返回的是一个canvas 已画出geometry的结构
				document.body.appendChild(d);
			}





三十四 webglrederer3 
<script src="js/renderers/WebGLRenderer3.js"></script>


renderer = new THREE.WebGLRenderer3( { contextAttributes: { antialias: false /*抗锯齿*/ } } );
//提供参数设置属性也许性能比较好?



三十五 着色器用法



var uniforms = { texture:  { type: "t", value: clothTexture } };
				var vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;//在script标签设置id值.然后getelementbyid
				var fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;

				// cloth mesh

				object = new THREE.Mesh( clothGeometry, clothMaterial );
				object.position.set( 0, 0, 0 );
				object.castShadow = true;
				object.receiveShadow = true;
				scene.add( object );

				object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );//添加着色器把..






三十六  buffergeometry 用法

大概是新建一个buffergeometry 先初始化数组 在往数组里赋值   
运行前先加载..加载后处理速度较快




var triangles = 160000;

				var geometry = new THREE.BufferGeometry();

				geometry.addAttribute( 'index', Uint16Array, triangles * 3, 1);
				geometry.addAttribute( 'position', Float32Array, triangles * 3, 3 );
				geometry.addAttribute( 'normal', Float32Array, triangles * 3, 3 );
				geometry.addAttribute( 'color', Float32Array, triangles * 3, 3 );//添加属性  应该类似初始化 未有值的..

				// break geometry into
				// chunks of 21,845 triangles (3 unique vertices per triangle)
				// for indices to fit into 16 bit integer number
				// floor(2^16 / 3) = 21845

				var chunkSize = 21845;//整体的大小?

				var indices = geometry.attributes.index.array;

				for ( var i = 0; i < indices.length; i ++ ) {

					indices[ i ] = i % ( 3 * chunkSize );//获取索引数组

				}

				var positions = geometry.attributes.position.array;
				var normals = geometry.attributes.normal.array;
				var colors = geometry.attributes.color.array;

				var color = new THREE.Color();

				var n = 800, n2 = n/2;	// triangles spread in the cube
				var d = 12, d2 = d/2;	// individual triangle size

				var pA = new THREE.Vector3();
				var pB = new THREE.Vector3();
				var pC = new THREE.Vector3();

				var cb = new THREE.Vector3();
				var ab = new THREE.Vector3();

				for ( var i = 0; i < positions.length; i += 9 ) {

					// positions

					var x = Math.random() * n - n2;
					var y = Math.random() * n - n2;
					var z = Math.random() * n - n2;

					var ax = x + Math.random() * d - d2;
					var ay = y + Math.random() * d - d2;
					var az = z + Math.random() * d - d2;

					var bx = x + Math.random() * d - d2;
					var by = y + Math.random() * d - d2;
					var bz = z + Math.random() * d - d2;

					var cx = x + Math.random() * d - d2;
					var cy = y + Math.random() * d - d2;
					var cz = z + Math.random() * d - d2;

					positions[ i ]     = ax;
					positions[ i + 1 ] = ay;
					positions[ i + 2 ] = az;

					positions[ i + 3 ] = bx;
					positions[ i + 4 ] = by;
					positions[ i + 5 ] = bz;

					positions[ i + 6 ] = cx;
					positions[ i + 7 ] = cy;
					positions[ i + 8 ] = cz;

					// flat face normals

					pA.set( ax, ay, az );
					pB.set( bx, by, bz );
					pC.set( cx, cy, cz );

					cb.subVectors( pC, pB );
					ab.subVectors( pA, pB );
					cb.cross( ab );

					cb.normalize();

					var nx = cb.x;
					var ny = cb.y;
					var nz = cb.z;

					normals[ i ]     = nx;
					normals[ i + 1 ] = ny;
					normals[ i + 2 ] = nz;

					normals[ i + 3 ] = nx;
					normals[ i + 4 ] = ny;
					normals[ i + 5 ] = nz;

					normals[ i + 6 ] = nx;
					normals[ i + 7 ] = ny;
					normals[ i + 8 ] = nz;

					// colors

					var vx = ( x / n ) + 0.5;
					var vy = ( y / n ) + 0.5;
					var vz = ( z / n ) + 0.5;

					color.setRGB( vx, vy, vz );

					colors[ i ]     = color.r;
					colors[ i + 1 ] = color.g;
					colors[ i + 2 ] = color.b;

					colors[ i + 3 ] = color.r;
					colors[ i + 4 ] = color.g;
					colors[ i + 5 ] = color.b;

					colors[ i + 6 ] = color.r;
					colors[ i + 7 ] = color.g;
					colors[ i + 8 ] = color.b;

				}

				geometry.offsets = [];

				var offsets = triangles / chunkSize;

				for ( var i = 0; i < offsets; i ++ ) {

					var offset = {
						start: i * chunkSize * 3,
						index: i * chunkSize * 3,
						count: Math.min( triangles - ( i * chunkSize ), chunkSize ) * 3
					};

					geometry.offsets.push( offset );

				}

				geometry.computeBoundingSphere();