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

来源：互联网发布：大闹天宫动画知乎编辑：程序博客网时间：2024/06/05 19:43

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

//SphereGeometryvar sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );var sphereMesh = new THREE.Mesh( sphereGeometry, material );//Setup animationsphereMesh.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 );//任意一个geometrygeometry.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值.然后getelementbyidvar fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;// cloth meshobject = 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) = 21845var 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 cubevar d = 12, d2 = d/2;// individual triangle sizevar 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 ) {// positionsvar 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 normalspA.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;// colorsvar 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();



                                                     0        0           	
					
					   three.js学习 函数使用方法散记3
	  	   three.js学习 函数使用方法散记
	  	   three.js学习 函数使用方法散记2
	  	   three.js学习 函数使用方法散记4
	  	   three.js 天空盒子使用方法
	  	   Three.js函数说明
	  	   js散记
	  	   如何学习Three.JS 3D引擎
	  	   HTML5 - Three.js 3D特效学习
	  	   如何学习Three.JS 3D引擎
	  	   Three.JS学习 3：Threejs画网格
	  	   three.js学习
	  	   three.js学习
	  	   Three.js学习
	  	   three.js学习点滴0
	  	   three.js学习笔记 射线
	  	   Three.JS学习 6：光源
	  	   Three.JS学习 8：纹理
	     		  
	  	   openstack
	  	   assert
	  	   你能读懂这段文字吗？  //转自《拆掉思维里的墙》
	  	   前端开发框架推荐
	  	   京东内的潜伏者：腾讯将成最大股东
	  	   three.js学习 函数使用方法散记3
	  	   MFC滑动动条控件Slider的用法
	  	   苏定方
	  	   Oracle Spatial
	  	   侯君集
	  	   查询和设置服务器最小最大内存
	  	   聊聊生产者消费者模式
	  	   VdcEye manager
	  	   MFRC522 IC卡模块工作原理

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

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