threeJS后处理-星空

需要电子档书籍或者源码可以Q群:828202939   希望可以和大家一起学习、一起进步!!

如有错别字或有理解不到位的地方,可以留言或者加微信15250969798,博主会及时修改!!!!!

最近博主在学习shader,就随手记了下来!!

本博客主要用的three后期处理+PointCloud+tween!

代码比较乱,最近项目多,就没继续写下去了!

如果各位同学感兴趣的话,有拿到源码继续改写,如果可以的话记得分享到群里哦!

效果图示:

代码:

<!DOCTYPE html>
<html lang="en">

<head>
	<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 {
			font-family: Monospace;
			background-color: #000;
			margin: 0px;
			overflow: hidden;
		}

		a {
			color: #f80;
		}
	</style>
</head>

<body>

	<script src="../build/three.js"></script>
	<script src="../build/Tween.js"></script>
	<script src="../js/90/OrbitControls.js"></script>
	<script src="../js/shaders/CopyShader.js"></script>
	<script src="../js/shaders/ConvolutionShader.js"></script>
	<script src="../js/shaders/ThresholdShader.js"></script>
	<script src="../js/shaders/VignetteShader.js"></script>

	<script src="../js/postprocessing/EffectComposer.js"></script>
	<script src="../js/postprocessing/MaskPass.js"></script>
	<script src="../js/postprocessing/RenderPass.js"></script>
	<script src="../js/postprocessing/ShaderPass.js"></script>
	<script src="../js/postprocessing/BloomPass.js"></script>



	<script>
		var container;
		var camera, scene, renderer, controls;
		var depthMaterial, depthTarget, composer, ssao, fxaa, ico;
		var has_gl = false;

		var delta;
		var time;
		var oldTime;

		var effectThreshold;
		var materialDepth;
		var thresholdTarget;
		var depthScale = 1.0;

		var meshes = [];
		var target = new THREE.Vector3(0, 0, 0);
		init();
		animate();

		function init() {

			sceneBackground(); //scene背景	
			scene.fog = new THREE.Fog(scene.background, 500, 1200);
			camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
			camera.position.set(0, 400, -500);
			camera.lookAt(scene.position);
			scene.add(camera);

			renderScene()
			// addPlane(); //添加地面
			addIco(); //中间的20面体
			addPointCloud(); //添加小球
			addqiu(50); //小行星数量
			controls(); //orbit控制器
			postprocessing(); // 后期处理模块	

		}

		function sceneBackground() {//这里可以用普通背景或者天空盒子作为场景的背景
			scene = new THREE.Scene();
			var path = '../images/background/cosmos/'; //宇宙顺序有问题,
			format = '.jpg';
			new THREE.CubeTextureLoader().load([
				path + 'Dark-Nebula-Left-TEX' + format, path + 'Dark-Nebula-Right-TEX' + format,
				path + 'Dark-Nebula-Top-TEX' + format, path + 'Dark-Nebula-Bottom-TEX' + format,
				path + 'Dark-Nebula-Front-TEX' + format, path + 'Dark-Nebula-Back-TEX' + format
			], function (res) {
				scene.background = res;
			});
		}

		function renderScene() {
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);
			window.addEventListener('resize', onWindowResize, false);

		}

		function controls() {//orb控件
			controls = new THREE.OrbitControls(camera, renderer.domElement);
			controls.target = target;
			// controls.autoRotate=true;
			// controls.autoRotateSpeed=0.5;
		}

		function addPlane() {

			var plane = new THREE.PlaneGeometry(1000, 1000);
			var material = new THREE.MeshBasicMaterial({
				color: 0x000000
			});
			var floor = new THREE.Mesh(plane, material);
			floor.rotation.x = -Math.PI / 2;
			scene.add(floor);
		}


		function addIco() {

			ico = new THREE.SphereBufferGeometry(80, 60, 30);
			for (var i = 0; i < ico.length; i++) {

				if (ico[i].y < 0) {
					ico[i].y = 0;
					if (ico[i].length() < 78) {
						ico[i].y = -1;
					};
				}
			}

			// 球体
			var material = new THREE.MeshBasicMaterial({
				color: 0x0000ff
			});
			var mesh = new THREE.Mesh(ico, material);
			mesh.scale.set(0.98, 0.98, 0.98);
			scene.add(mesh);

			// 球上面线框显示的材质
			var material = new THREE.MeshBasicMaterial({
				color: 0xff44ff,
				wireframe: true
			});
			var mesh = new THREE.Mesh(ico, material);
			scene.add(mesh);

			// TorusGeometry( radius, tube, radialSegments, tubularSegments, arc )
			var material = new THREE.MeshBasicMaterial({
				color: 0xffffff,
				wireframe: false,
				side: THREE.DoubleSide
			});

			for (var i = 0; i < 50; i++) {
				var radius = 100 + i * 10;
				var length = 1 + Math.random() * 3;
				var segments = Math.floor(((radius * 0.1) * length));
				var segment = new THREE.TorusGeometry(radius, 1, 4, segments, length);
				segment.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(0, 0, -1)));

				var material = new THREE.MeshBasicMaterial({
					color: 0xffffff,
					wireframe: false,
					side: THREE.DoubleSide
				});
				material.color.setHSL(0.7 + Math.random() * 0.25, 1, 0.58);

				var mesh = new THREE.Mesh(segment, material);

				mesh.rotation.z = Math.random() * (Math.PI * 2);
				mesh.rotation.x = Math.PI * 0.5;
				mesh.position.y = 1;
				if (i > 40) {
					mesh.position.y = 1 + (i - 40) * 10;
				}
				scene.add(mesh);
				mesh.userData.extraRotation = 0;
				meshes.push({
					mesh: mesh,
					speed: Math.random() * 2 - 1
				});

			}


		}


		function addPointCloud() {

			var textureLoader = new THREE.TextureLoader();

			var map = textureLoader.load("../textures/ball.png");

			var pMaterial = new THREE.PointsMaterial({
				color: 0xff44ff,
				size: 5,
				//blending: THREE.AdditiveBlending,
				transparent: true,
				//sizeAttenuation: false
				map: map,
				alphaTest: 0.1

			});

			// create the particle system
			pointCloud = new THREE.Points(ico, pMaterial);
			scene.add(pointCloud);
		}

		function addqiu(num) {
			var geometry = new THREE.SphereBufferGeometry(7, 10, 10);
			var textureLoader = new THREE.TextureLoader();
			var map = textureLoader.load("../textures/ball.png");
			for (var i = 0; i < num; i++) {
				var object = new THREE.Mesh(geometry, new THREE.PointsMaterial({
					color: Math.random() * 0xffffff,
					size: 5,
					transparent: true,
					map: map,
					alphaTest: 0.1

				}));
				object.position.x = Math.random() * 800 - 400;
				object.position.y = Math.random() * 100 - 50;
				object.position.z = Math.random() * 800 - 400;
				// object.rotation.x = Math.random() * 2 * Math.PI;
				// object.rotation.y = Math.random() * 2 * Math.PI;
				// object.rotation.z = Math.random() * 2 * Math.PI;
				object.scale.x = Math.random() + 0.5;
				object.scale.y = Math.random() + 0.5;
				object.scale.z = Math.random() + 0.5;
				scene.add(object);
			}

		}

		function postprocessing() {

			renderer.autoClear = false;
			var parameters = {
				minFilter: THREE.LinearFilter,
				magFilter: THREE.LinearFilter,
				format: THREE.RGBFormat
			};
			thresholdTarget = new THREE.WebGLRenderTarget(window.innerWidth * depthScale, window.innerHeight * depthScale,
				parameters);

			// postprocessing
			//THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
			var renderModel = new THREE.RenderPass(scene, camera);
			effectThreshold = new THREE.ShaderPass(THREE.ThresholdShader);
			effectThreshold.uniforms["tMap"].value = thresholdTarget.texture;
			effectThreshold.uniforms["threshold"].value = 0.2;
			effectThreshold.uniforms["expo"].value = 7.0;

			//var effectBarrelBlur = new THREE.ShaderPass( THREE.BarrelBlurShader );
			var effectBloom = new THREE.BloomPass(0.6);

			var effectVignette = new THREE.ShaderPass(THREE.VignetteShader);
			effectVignette.uniforms["offset"].value = 1.2;
			effectVignette.uniforms["darkness"].value = 1.4;
			effectVignette.renderToScreen = true;

			//var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
			//effectCopy.renderToScreen = true;

			composer = new THREE.EffectComposer(renderer);

			composer.addPass(renderModel);
			composer.addPass(effectThreshold);
			composer.addPass(effectBloom);
			composer.addPass(effectVignette);
			//composer.addPass( effectCopy );
		}

		function jump() {

			var mesh = meshes[Math.floor(Math.random() * meshes.length)].mesh;

			if (mesh.userData.isTweeing) {
				return;
			}

			mesh.userData.isTweeing = true;

			var value = Math.random();

			var inTween = new TWEEN.Tween(mesh.scale)
				.to({
					z: value * 1
				}, 300)
				.easing(TWEEN.Easing.Cubic.Out)

			var outTween = new TWEEN.Tween(mesh.scale)
				.to({
					// x:0.1,
					z: 1
				}, 1000)
				.easing(TWEEN.Easing.Cubic.In)
				.onComplete(function () {
					mesh.userData.isTweeing = false;
				});
			inTween.chain(outTween);
			inTween.start();

			var inTween = new TWEEN.Tween(mesh.userData)
				.to({
					extraRotation: value * 0.025
				}, 300)
				.easing(TWEEN.Easing.Cubic.Out)

			var outTween = new TWEEN.Tween(mesh.userData)
				.to({
					extraRotation: 0
				}, 1000)
				.easing(TWEEN.Easing.Cubic.In)
			inTween.chain(outTween);
			inTween.start();


		}

		function onWindowResize(event) {

			var width = window.innerWidth;
			var height = window.innerHeight;

			camera.aspect = width / height;
			camera.updateProjectionMatrix();
			renderer.setSize(width, height);

			//fxaa.uniforms[ 'resolution' ].value.set( 1 / width, 1 / height );
			//ssao.uniforms[ 'size' ].value.set( width, height );

			//var pixelRatio = renderer.getPixelRatio();
			//var newWidth  = Math.floor( width / pixelRatio ) || 1;
			//var newHeight = Math.floor( height / pixelRatio ) || 1;
			//depthTarget.setSize( newWidth, newHeight );
			composer.setSize(width, height);

		}


		function animate() {

			requestAnimationFrame(animate);

			time = Date.now();
			delta = time - oldTime;
			oldTime = time;

			if (isNaN(delta) || delta > 1000 || delta == 0) {
				delta = 1000 / 60;
			}

			TWEEN.update();
			var dist = 400 + Math.sin(time * 0.0002) * 10;
			camera.position.x = Math.sin(time * 0.0007) * dist;
			camera.position.z = Math.cos(time * 0.0007) * dist;
			camera.position.y = 250 + Math.cos(time * 0.0012) * 100;

			camera.lookAt(scene.position);

			camera.up.x = Math.sin(time * 0.0001) * 0.06;
			// camera.up.z = Math.cos(time * 0.00015) * 0.4;
			if (controls) {
				controls.update();
			}


			for (var i = 0; i < meshes.length; i++) {
				meshes[i].mesh.rotation.z += (meshes[i].speed * 0.001 + meshes[i].mesh.userData.extraRotation * 0.03) * delta;
			}

			if (Math.random() < 0.2) {
				jump(); //吐温动画
			}
			

			//renderer.render( scene, camera );

			renderer.clear();
			renderer.render(scene, camera, thresholdTarget, true);
			composer.render();


		}
	</script>

</body>

</html>

 

 

已标记关键词 清除标记
对整threeJS体系进行全面剖析。整理出全面的教学大纲,涵盖内容面非常广。 此教学版本为threeJS107版本。 关于版本不建议大家使用低于90的版本学习。 以下是课程目录 1-ThreeJS概览(基本图形简介,什么是点线面如何绘制点线面,什么是材质,什么是几何体,什么是相机,什么是渲染器,什么是场景) 2-相机和渲染器(详解相机类型,渲染器如何使用,针对不同场景怎么用,怎么调效果,怎么渲染,怎么输出画布,如何解决透明问题等等) 3-创建平面几何(常见的几何体如何使用,如何使用简单的几何体绘制出自定义自己想要的几何体,关于几何体的性能剖析,如何解决性能,几何体的渲染原理) 4-高级图形算法常见库(求直线的斜率  计算线段与圆的交点 计算线段的长度 判断折线是否在多边形内 等等) 5-sprite精灵(怎么让一个图标永远朝向屏幕,精灵的属性,精灵材质原理等,广告提示框必用) 6-骨骼游戏动画(什么是模型动画,常见游戏案例,如何让人头进行各种攻击动作) 7-3d模型加载(常见模型格式,如何渲染不同格式,不同格式的特点,什么格式性能优越,模型渲染异常,贴图不显示等问题详解) 8-高阶动态纹理(你所不知道的纹理用法,我说你不知道,你肯定不知道) 9-漫游轨迹以及其动画路径(怎么绘制贝塞尔曲线,如何使用曲线上的路径,跟随路径移动的原理,相机如何运动,物体如何运动) 10-着色器(什么是着色器。初识着色器基础,着色器材质怎么用,怎么使用着色器库) 11-常见渲染以及透明度问题 12-对象拾取以及拖拽(3d世界里面如何拖拽物体,拖拽的原理,mousemove mouseon等的事件效果) 13-世界坐标以及组的问题(什么是相对坐标,什么是世界坐标,什么是当前坐标,怎么转化父子坐标系,组的优化,为什么用组,组的优势) 14-指定对象旋转中心(什么是物体的几何体中心,如何改变中心,如何绕轴转动) 15-层级对象渲染(多个场景一键切换,切换的优势,针对大项目的用法) 16-拓展了解系列(不定期不断更新案例,各种酷炫效果bloom,halo等,以及各种3d图表,粒子案例等,不断构建你的3d实践能力)
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页