Webgl开发技巧汇总

1、限制最小值

 

var random = Math.random()*100;
//  限制最小时间为3000ms
var time = Math.max(3000,(random*40));

 

2、将HTML元素做为材质对象使用

 

var context = canvas.getContext('2d');

context.globalAlpha = 1;
context.font = "bold 14pt 微软雅黑";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillStyle = "#FFFFFF";
context.fillText('Text',0, 0);

var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

 

 3、轨迹移动

 

var spline = new THREE.Spline([
	new THREE.Vector3(-100, 100, 100)
	new THREE.Vector3(100, -100, 100)
	new THREE.Vector3(100, 100, -100)
]);

var sprite = new THREE.Sprite();

var tween = new TWEEN.Tween({value: 0)
	.to( { value: 1 }, 2000 )
	.onUpdate(function (){
		current_point = this.line.getPoint(this.value);
		sprite.position = new THREE.Vector3(current_point.x, current_point.y, current_point.z);
	})
	.easing( TWEEN.Easing.Exponential.InOut );
tween.start();

 

 4、阴影的三个必要条件：渲染器、光源、物体

 

renderer.shadowMapEnabled = true;
light.castShadow = true;
obj.receiveShadow = true;  //可选，如果为true，物体将接受由光照引起的其他物体的阴影
obj.castShadow = true;

 

 5、各向异性过滤

 

 

var maxAnisotropy = renderer.getMaxAnisotropy();

var texture1 = THREE.ImageUtils.loadTexture( "textures/crate.gif" );
var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );

texture1.anisotropy = maxAnisotropy;
texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set( 512, 512 );

var texture2 = THREE.ImageUtils.loadTexture( "textures/crate.gif" );
var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );

texture2.anisotropy = 1;
texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
texture2.repeat.set( 512, 512 );

 

 6、纹理过滤方式：最近点采样（Nearest）、线性过滤（Linear）