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();
推荐阅读
- 由浅入深理解AOP
- 继续努力,自主学习家庭Day135(20181015)
- python学习之|python学习之 实现QQ自动发送消息
- 一起来学习C语言的字符串转换函数
- C语言字符函数中的isalnum()和iscntrl()你都知道吗
- C语言浮点函数中的modf和fmod详解
- C语言中的时间函数clock()和time()你都了解吗
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法(这篇教程请收藏好了!)
- 《深度倾听》第5天──「RIA学习力」便签输出第16期