html5星球爆炸动画效果是一款炫酷的基于html5 canvas绘制实现危险的星球爆炸动画特效。
js代码
<script>
// Shaders
var vertShader = document.querySelector('#vertexshader').innerHTML;
var fragShader = document.querySelector('#fragmentshader').innerHTML;
// Renderer
var renderer = new THREE.WebGLRenderer({canvas:document.getElementById('main'),antialiasing:true});
renderer.setClearColor(0x111111);
renderer.setSize(window.innerWidth,window.innerHeight);
// Camera
var camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.1, 5000 );
camera.position.y = 20;
camera.position.z = 40;
// Scene
var scene = new THREE.Scene();
scene.rotation.x = 2;
// Create + init position mesh
var ammount = 1;
var material = new THREE.ShaderMaterial( {
uniforms: {
time: { type: "f", value: 0 },
},
vertexShader : vertShader,
fragmentShader : fragShader
} );
var geometry = new THREE.SphereGeometry( 30,200,200);
var planet = new THREE.Mesh( geometry, material );
scene.add( planet );
// planet.scale.x = 1;
planet.position.x = 0;
planet.position.y = 0;
planet.position.z = 0;
planet.modifier = Math.random();
planet.material.transparent = true;
planet.material.opacity = 1*Math.random();
// Render
var start = Date.now();
function render(){
material.uniforms[ 'time' ].value = .00015 * ( Date.now() - start );
scene.rotation.y += 0.002;
renderer.render(scene,camera);
window.requestAnimationFrame(render);
}
window.requestAnimationFrame(render);
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791