系列文章
three.js从入门到放弃(一)
three.js从入门到放弃(二)
three.js从入门到放弃(三)
three.js从入门到放弃(四)
three.js从入门到放弃(五)
接下来我们为光源添加一些纹理,让其更炫一点
Lensflare.js文件地址点击这里
图片资源下载
<!DOCTYPE html>
<html>
<head>
<title>three.js初探</title>
<script type="text/javascript" src="three.js"></script>
<script type="text/javascript" src="Lensflare.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
canvas{display:block;}
</style>
</head>
<body>
<div id="fwhf"></div>
<script type="text/javascript">
//创建一个渲染器 即默认创建一个canvas antialias: true圆滑效果
var renderer = new THREE.WebGLRenderer({antialias: true});
//渲染器宽高 即canvas宽高
renderer.setSize(window.innerWidth,window.innerHeight);
//渲染器颜色 即canvas的底色 参数: 颜色 (rgb也行), 透明度
renderer.setClearColor('#333',.5);
//将渲染器添加到fwhf标签中 即将canvas添加至div中
document.getElementById("fwhf").append(renderer.domElement);
//创建一个场景
var scene=new THREE.Scene();
//生成一个坐标轴,辅助线,坐标轴的参数 rgb色对应xyz坐标轴
var axes=new THREE.AxisHelper(20);
//将辅助线添加至场景中
scene.add(axes);
var light = new THREE.PointLight( '#f1b018', 1.5, 300 );
light.position.set(-200,100,200);
//引入纹理 由于此处,本程序一定要走服务,即localhost之类,fill协议会报错
var textureLoader = new THREE.TextureLoader();
var textureFlare0 = textureLoader.load( "lensflare0.png" );
//炫光镜头
var lensflare = new THREE.Lensflare();
lensflare.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
lensflare.position.copy(light.position);
light.add( lensflare );
scene.add(light);
var light1 = new THREE.PointLight( '#f1b018', 1.5, 300 );
light1.position.set(200,100,200);
var lensflare1 = new THREE.Lensflare();
lensflare1.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
lensflare1.position.copy(light1.position);
light1.add( lensflare1 );
scene.add(light1);
var light2 = new THREE.PointLight( '#f1b018', 1.5, 300 );
light2.position.set(0,0,-200);
var lensflare2 = new THREE.Lensflare();
lensflare2.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
lensflare2.position.copy(light2.position);
light2.add( lensflare2 );
scene.add(light2);
var light3 = new THREE.PointLight( '#f1b018', 1.5, 100 );
light3.position.set(0,0,0);
var lensflare3 = new THREE.Lensflare();
lensflare3.addElement( new THREE.LensflareElement( textureFlare0, 512, 0 ) );
lensflare3.position.copy(light3.position);
light3.add( lensflare3 );
scene.add(light3);
//创建一个物体 正方体+材质
for(var i = 0 ; i < 800 ; i++){
var length = rand(4,9);
var cube = new THREE.Mesh(
new THREE.CubeGeometry(length,length,length),
new THREE.MeshLambertMaterial({color:0xffffff})
)
//设置物体的位置
cube.position.x=rand(-200,200);
cube.position.y=rand(-200,200);
cube.position.z=rand(-200,200);
//为物体添加旋转
var deg = rand(0,9);
cube.rotation.x += deg;
cube.rotation.y += deg;
cube.rotation.z += deg;
//将物体添加至场景
scene.add(cube);
}
//创建一个相机 PerspectiveCamera透视相机 参数:视角,纵横比,进平面的距离,远平面的距离
var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,3000);
//设置相机的位置
camera.position.x=20;
camera.position.y=20;
camera.position.z=200;
//通过修改照相机的位置来实现画面旋转的效果
var deg = 0;
var offsetX = -1;
fwhf.onmousemove = function(e){
var e = e || event;
offsetX = e.offsetX;
}
var animate = function () {
requestAnimationFrame( animate );
if(offsetX > 0){
if(offsetX > window.innerWidth/2+100){
deg += 0.01;
}else if(offsetX < window.innerWidth/2-100){
deg += -0.01;
}else{
deg += 0;
}
}
//实现沿Y轴旋转的效果,可将Y轴忽略看作是照相机在x与z轴所在的平面内的圆周运动
camera.position.x = 20*Math.sin(deg)- 200*Math.cos(deg);
camera.position.z = 200*Math.sin(deg) + 20*Math.cos(deg);
camera.lookAt(scene.position);
renderer.render( scene, camera );
};
animate();
function rand(n,m){
var c = m - n + 1;
return Math.floor(Math.random() * c + n);
}
</script>
</body>
</html>
静态效果图如下