生成流

示例

在这里插入图片描述

HTML

<body></body>

CSS

/* Use your mouse :) */

body {
  
    margin: 0px;
    overflow: hidden;
  
}

JS

/*
 * Copyright MIT © <2013> <Francesco Trillini>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
 * documentation files (the "Software"), to deal in the Software without restriction, including without limitation 
 * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and 
 * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
 * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
 * PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE 
 * FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 
 * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

var self = window;

;(function(self) {	
	
	var container, scene, camera, renderer, geometry, stats, mouse = { x: innerWidth * 0.5, y: innerHeight * 0.5 }, skin = 0, particleColor1, particleColor2;

	// Dat GUI default value
	var showStats = false;
	
	/*
	 * List of colors.
	 */
	
	var colors = [
	
		{
		
			first: '#800080',
			second: '#f0ff00'
		
		},
		
		{
		
			first: '#8bff00',
			second: '#03bd52'
		
		},
		
		{
		
			first: '#00ffb0',
			second: '#00b0ff'
		
		},
		
		{
		
			first: '#ff00d6',
			second: '#ad00ff'
		
		}
	
	];
	
	/*
	 * Settings.
	 */
	
	var Settings = function() {
		
		this.showStats = false;
	
		this.enableStats = function(value) {
		
			showStats = value;
		
			showStats ? stats.domElement.style.visibility = 'visible' : stats.domElement.style.visibility = 'hidden';
		
		};
				
	};	
	
	window.addEventListener ? window.addEventListener('load', init, false) : window.onload = init;
	  
   /*
	* Init.
	*/

	function init() {
		
		if(!window.WebGLRenderingContext) { 
		
			console.error("Sorry, your browser doesn't support WebGL."); 
			
			return; 
			
		} 
		
		var settings = new Settings();
		var GUI = new dat.GUI();
				
		// Dat GUI main
		GUI.add(settings, 'showStats').onChange(settings.enableStats);
						
		var body = document.querySelector('body');
	
		container = document.createElement('div');
		
		container.width = innerWidth;
		container.height = innerHeight;
				
		container.style.position = 'absolute';
		container.style.top = 0;
		container.style.bottom = 0;
		container.style.left = 0;
		container.style.right = 0;
		container.style.zIndex = -1;
		container.style.overflow = 'hidden';
		
		container.style.cursor = 'pointer';
		
		body.appendChild(container);

		// Setup
		camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 10000);
		camera.position.z = 500;

		scene = new THREE.Scene();
		
		geometry = new THREE.Geometry();

		for(var quantity = 0, len = 3000; quantity < len; quantity++)
						
			geometry.vertices.push(new THREE.Vector3(3000 * Math.random() - 2000, 3000 * Math.random() - 2000, 3000 * Math.random() - 2000));
			
		
		skin = ~~(Math.random() * colors.length);
			
		particleColor1 = new THREE.ParticleSystem(geometry, new THREE.ParticleBasicMaterial({ size: 10, color: colors[skin].first }));
		particleColor2 = new THREE.ParticleSystem(geometry, new THREE.ParticleBasicMaterial({ size: 10, color: colors[skin].second }));

		scene.add(particleColor1);
		scene.add(particleColor2);

		renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
		renderer.autoClearColor = false;
		renderer.setSize(window.innerWidth, window.innerHeight);
		container.appendChild(renderer.domElement);

		//Stats
		stats = new Stats();
		
		stats.domElement.style.position = 'absolute';
		stats.domElement.style.top = '0px';
		
		container.appendChild(stats.domElement);
		
		// Hide stats
		settings.enableStats();
    
		// Listeners
		document.addEventListener('touchstart', onTouchStart, false);
		document.addEventListener('touchmove', onTouchMove, false);
		document.addEventListener('mousedown', onMouseDown, false);
		document.addEventListener('mousemove', onMouseMove, false);

		window.onresize = onResize;
		
		render();

	}
	
	/*
	 * On resize event.
	 */

	function onResize(event) {

		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
    
		renderer.setSize(window.innerWidth, window.innerHeight);

	}

	/*
	 * Mouse down event.
	 */

	function onMouseDown(event) {

		event.preventDefault();

		changeSkin();
		
	}
	
	/*
	 * Mouse move event.
	 */

	function onMouseMove(event) {

		event.preventDefault();

		mouse.x = event.pageX - (window.innerWidth * 0.5);
		mouse.y = event.pageY - (window.innerHeight * 0.5);
		 
	}
	
	/*
	 * On touch start event.
	 */
	
	function onTouchStart(event) {
	
		event.preventDefault();
		
		changeSkin();
	
	}

	/*
	 * Touch move event.
	 */
	
	function onTouchMove(event) {

		event.preventDefault();
		
		var touch = event.touches[0];
		
		if(event.touches.length === 1) {

			mouse.x = touch.pageX - (window.innerWidth * 0.5);
			mouse.y = touch.pageY - (window.innerHeight * 0.5);
			
		}

	}
	
	/*
	 * Change the current skin with the next one.
	 */
	
	function changeSkin() {
	
		skin += 1;
		
		scene.remove(particleColor1);
		scene.remove(particleColor2);
		
		particleColor1 = new THREE.ParticleSystem(geometry, new THREE.ParticleBasicMaterial({ size: 10, color: colors[skin % colors.length].first }));
		particleColor2 = new THREE.ParticleSystem(geometry, new THREE.ParticleBasicMaterial({ size: 10, color: colors[skin % colors.length].second }));
		
		scene.add(particleColor1);
		scene.add(particleColor2);
	
	}

	/*
	 * Render the animation.
	 */

	function render() {

		var time = Date.now() * 0.0003;
	
		requestAnimationFrame(render);

		camera.position.x += (mouse.x - camera.position.x) * 0.02;
	
		// Rotation x axis
		for(var elem = 0; elem < scene.children.length; elem++) {

			var object = scene.children[elem];

			if(object instanceof THREE.ParticleSystem) {
		
				object.rotation.x = time * ( - (elem + 1));

			}

		}
		
		camera.lookAt(scene.position);

		stats.update();
	
		renderer.render(scene, camera);

	}

})(self);
展开阅读全文
©️2020 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值