1、代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
<style>
body{
background-color: #000000;
margin: 0px;
overflow: hidden;
}
a{
color: #0078ff;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="../build/three.js"></script>
<script src="../node_modules/three/examples/js/renderers/Projector.js"></script>
<script src="../node_modules/three/examples/js/renderers/CanvasRenderer.js"></script>
<script src="../node_modules/three/examples/js/libs/stats.min.js"></script>
<script src="../node_modules/three/examples/js/libs/tween.min.js"></script>
<script src="../THREE.MeshLine/demo/js/dat.gui.min.js"></script>var
<script src="../node_modules/three/examples/js/controls/OrbitControls.js"></script>
<script>
var container;
var renderer;
//鼠标坐标
var mouseX = 0,mouseY = 0;
//窗口中心点
var windowHalfX = window.innerWidth /2;
var windowHalfY = window.innerWidth /2;
//初始化空的容器,装在粒子
{
var krq = new THREE.Object3D();
krq.position.z = -200;
krq.rotateZ(1);
}
function initRender(){
//创建容器div并添加到document中
container = document.createElement('div');
document.body.appendChild(container);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,5000);
camera.position.z = 1000;
}
var scene;
function initScene()
{
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000040);
scene.add(krq);
}
var light;
function initLight(){ //初始化光
scene.add(new THREE.AmbientLight(0x404040));
light = new THREE.DirectionalLight(0xffffff);
light.position.set(1,1,1);
scene.add(light)
}
function initModel(){ //初始化轴辅助
var object = new THREE.AxesHelper(500);
scene.add(object);
}
var stats;
function initStats() {
stats = new Stats();
container.appendChild(stats.dom);
}
var fireConGui;
var cloud;
function initGui() { //初始化gui
fireConGui = {
//"粒子尺寸" : 2,
//"背景透明" : true,
//"vertexColor" : true,
//"粒子速度" : 8,
// "粒子颜色" : 0Xffffff,
//"sizeAttenuation" : true,
//"rotateSystem" : false,
redraw : function () {
if(cloud){
scene.remove(cloud);
}
createParticles( fireConGui.粒子尺寸, fireConGui.背景透明, fireConGui.粒子速度,fireConGui.粒子颜色);
}
};
var datGui = new dat.GUI();
//datGui.add( fireConGui,'粒子速度',8,40).onChange( fireConGui.redraw);
// datGui.add( fireConGui,'粒子尺寸',1,10).onChange( fireConGui.redraw);
//datGui.add( fireConGui,'背景透明').onChange( fireConGui.redraw);
//datGui.addColor( fireConGui,'粒子颜色').onChange( fireConGui.redraw);
fireConGui.redraw();
}
//生成粒子的方法
function createParticles(size, transparent, speed,color) {
var material = new THREE.SpriteMaterial({ //sprite材质{
size : size,
transparent : true,
opacity : 0.08,
color : color,
map : new THREE.CanvasTexture(generateSprite()),
blending: THREE.AdditiveBlending,
});
for(var i = 0; i < 1500; i++){
var particle = new THREE.Sprite(material);
initParticle(particle, i*10 );
krq.add(particle);
}
//生成模型,添加到场景当中
renderer = new THREE.CanvasRenderer();
//设置像素比
renderer.setPixelRatio(window.devicePixelRatio);
//设置大小
renderer.setSize(window.innerWidth,window.innerHeight);
//添加render到容器
container.appendChild(renderer.domElement);
//窗口大小检测
window.addEventListener('resize',onWindowResize,false)
}
function onWindowResize() {
windowHalfX = window.innerWidth /2;
windowHalfY = window.innerHeight /2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}
function generateSprite() {
//创建 canvas并设置大小
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
//得到2d,canvas
var context = canvas.getContext('2d');
//渐变方式
var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
gradient.addColorStop(0, 'rgba(255,97,0,5)');
gradient.addColorStop(0.6, 'rgba(178,34,34,5)');
gradient.addColorStop(0.8, 'rgba(255,128,0,1)');
gradient.addColorStop(1, 'rgba(255,0,0,1)');
//#ff9500
//填充方式
context.fillStyle = gradient;
//context.setFillStyle = gradient;
//填充矩形
context.fillRect(0, 0, canvas.width, canvas.height);
return canvas;
}
function initParticle(particle,delay) {
//粒子
var particle = this instanceof THREE.Sprite ? this : particle;
var delay = delay !== undefined ? delay : 0;
//粒子大小以及位置
particle.position.set(0,0,0);
particle.scale.x = particle.scale.y = Math.random() * 32 + 16;
//下面是一系列动画
var xx= Math.random() * 400 - 200;
var yy= - Math.cos((Math.PI/400)*xx)* 500;
//位移
new TWEEN.Tween(particle.position)
.delay(delay)
.to({
x:xx,
y:yy,
z:Math.random()*-100 + 50
},3000)
.start();
if(Math.abs(xx) > 150){
new TWEEN.Tween(particle)
.delay(delay)
.to({},0)
.onComplete(initParticle)
.start();
}else{
new TWEEN.Tween(particle)
.delay(delay)
.to({},2000)
.onComplete(initParticle)
.start();
}
//大小
new TWEEN.Tween(particle.scale)
.delay(delay)
.to({x:0.01,y:0.01},2000)
.start();
}
function render() {
renderer.render(scene,camera);
TWEEN.update();
if(krq.position.z !=0){
krq.position.z += 1;
krq.position.x;
}else{
krq.rotation.z = 3;
}
renderer.render(scene,camera );
}
var controls;
function initControls() {
controls = new THREE.OrbitControls(camera,container);
controls.enableDamping = true;
controls.enableZoom = true;
controls.autoRotate = false;
controls.enablePan = true;
}
function animate() {
requestAnimationFrame(animate);
render();
controls.update();
stats.update();
}
function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
initGui();
animate();
window.onresize = onWindowResize();
}
</script>
</html>