html5 3d引擎 星空,HTML5特效库 用three.js实现3d星空动画特效源码

效果图

各位长友，大家上午好！

今天给大家带来的是 用three.js实现3d星空动画特效源码

大家可以按照自己的意愿进行修改，改成自己喜欢的模样！

若是有想文件版源码的可以进HTML5前端技术交流 522323792

好了，上源码！

JS:

var vertexHeight = 15000;

var planeDefinition = 100;

var planeSize = 1245000;

var totalObjects = 50000;

var frame = 0;

var container = document.createElement_x('div');

document.body.appendChild( container );

var camera = new THREE.PerspectiveCamera(55, windows.innerWidth /

windows.innerHeight,1, 400000)

camera.position.z = 550000;

camera.position.y =10000;

camera.lookAt( new THREE.Vector3(0,6000,0) );

var scene = new THREE.Scene();

scene.fog = new THREE.Fog( 0x23233f, 1, 300000 );

var uniforms =

{

time: { type: "f", value: 0.0 }

};

var material = new THREE.ShaderMaterial( {

uniforms: uniforms,

vertexShader: document.getElementByIdx_x( 'vertexShader'

).textContent,

fragmentShader: document.getElementByIdx_x( 'fragmentShader'

).textContent,

wireframe: true,

fog: false

} );

varplane = new THREE.Mesh( new THREE.PlaneGeometry( planeSize,

planeSize, planeDefinition, planeDefinition ), material );

plane.rotation.x -=Math.PI*.5;

scene.add( plane );

var geometry = new THREE.Geometry();

for (i = 0; i < totalObjects; i ++)

{

var vertex = new THREE.Vector3();

vertex.x = Math.random()*planeSize-(planeSize*.5);

vertex.y = (Math.random()*100000)+10000;

vertex.z = Math.random()*planeSize-(planeSize*.5);

geometry.vertices.push( vertex );

}

var material = new THREE.ParticleBasicMaterial( { size: 200 });

var particles = new THREE.ParticleSystem( geometry, material );

scene.add( particles );

var renderer = new THREE.WebGLRenderer();

renderer.setSize(windows.innerWidth, windows.innerHeight);

container.appendChild( renderer.domElement );

render();

function render() {

requestAnimationFrame( render );

camera.position.z -= 150;

uniforms.time.value = frame;

frame += .04;

// dateVerts();

renderer.render( scene, camera );

}