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 );
【three.js学习 函数使用方法散记3】

二十四 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 ); //貌似这个为truecamera就会停下来表现为碰撞到物体了}}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 = https://www.it610.com/article/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的点和面


function test(name, geometry) { var d = document.createElement('div'); d.innerHTML = '

' + name + '
'; d.appendChild(THREE.UVsDebug(geometry)); //传入geometry对象 返回的是一个canvas 已画出geometry的结构 document.body.appendChild(d); }




三十四 webglrederer3


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 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 cube var 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();





    推荐阅读