作为礼物的网页动画【肝爆啦】

前话 未经许可不能转载 By：一个正在学习中的小哥

一个网页动画，作为礼物送给我的一个朋友，做网页动画真的太费时间了，再加上小哥我有颈椎病，本来还打算配上音乐和音效的，但实在是坚持不下去，于是就变成了现在的半吊子，完整的动画删减了很多。

是作为生日礼物送给我姐姐的，但无奈自己的能力不够，镜头和颜色都没搭配好，我太弱了🤦‍。

我用的是js的一个三维动画库three.js。还挺强大，里面的粒子效果挺方便的。我满怀着信心计划了一个宏伟的动画计划，然后发现一个人完成起码要一个月。我一边学一边编，整整用了10天，three.js的中文文档都要被我翻烂了都。下面是我小小的
demo：Demo链接 http://47.94.255.141/-0-/3dtest.html

而且,代码中还有些错误，虽然错了，但代码整体却依旧完成了我想要的结果，我把一段取消动画的话“cancelAnimationFrame()”写成了"cancelAniamtion()“，然后我把这个错误改正了后，整段代码的效果就出错了。我也不想再改了，错就错在哪里吧，哭唧唧。

部分代码如下：

var  sign =0;
var id78=0;
var di1=0;
var di =0;
var idt2=0;
var id300=0;
var id400=0;
var id500=0;
var id600=0;
var id800=0;
var id900=0;
var ni=0;
var id1=0;
var id2=0;
var a6X=[];
var a6Y=[];
var a6Z=[]; 
var prt=[];
var iuj=0;
var dprtG=0;
var dprt=[];
var speed=[];

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500);
var scene = new THREE.Scene();

document.body.appendChild( renderer.domElement );

var z=400;
camera.position.set( 0,10, z);
camera.lookAt( 0, 10, 0 );

//var z=-4000;
//camera.position.set( 0,-401, z);
//camera.lookAt( 0, -401,z);



//planeMesh.position.y=-100;
//planeMesh.position.z=-1050;



var Hum=[];
Hum[0]=new THREE.MeshLambertMaterial({color:0xff7e00,fog:true})
Hum[1]=new THREE.MeshLambertMaterial({color:0xaaaaaa,fog:true})
Hum[2]=new THREE.MeshLambertMaterial({color:0xaeff00,fog:true})
Hum[3]=new THREE.MeshLambertMaterial({color:0xff3600,fog:true})
Hum[4]=new THREE.MeshLambertMaterial({color:0x00ff4e,fog:true})

var star=[];
var  house=[];
var  tree=[];
var bodyH=[];
var bodyH1=[];
var nvb=0;
for(i=0;i<=2000;i++)
{
var hhg=new THREE.Geometry();
hhg.vertices.push(new THREE.Vector3(-10,-10,-10));
star[i]= new THREE.Points(hhg,new THREE.PointsMaterial({color:0xffffff,size:1}));
}
for(i=0;i<=500;i++)
{
house[i]=new THREE.Mesh(new THREE.CubeGeometry(Math.random()*5+10,Math.random()*5+15,10,10),Hum[parseInt(Math.random()*4)]);
tree[i]= new THREE.Mesh(new THREE.CylinderGeometry(0.1,5,Math.random()*5+10,10,20),new THREE.MeshLambertMaterial({color:0x334801,fog:true}))
}

for(i=0;i<=100;i++)
{
if(nvb==4){nvb=0;}
bodyH[i]=new THREE.Mesh(new THREE.CubeGeometry(Math.random()*25+50,Math.random()*25+120,50,10),Hum[nvb]);
bodyH1[i]=new THREE.Mesh(new THREE.CubeGeometry(Math.random()*25+50,Math.random()*25+120,50,10),Hum[nvb]);
nvb++;
}

for(i=0;i<=500;i++)
{
house[i].position.set(Math.random()*800-400,-90,Math.random()*3800-4000);
tree[i].position.set(Math.random()*800-400,-90,Math.random()*3800-4000);
scene.add(tree[i],house[i]);
}
var nbi=0;
for(i=0;i<=100;i++)
{
nbi+=35;
bodyH[i].position.set(-50,-501,-4000-nbi);
bodyH1[i].position.set(50,-501,-4000-nbi);
scene.add(bodyH[i],bodyH1[i]);
}
//主体模型

完整源文件下载链接：
百度网盘
提取码: f4x9