threeJS后处理-星空

最新推荐文章于 2023-09-23 11:29:51 发布
最新推荐文章于 2023-09-23 11:29:51 发布
阅读量7.6k 收藏 26
点赞数 10
分类专栏： three threeJS 文章标签： three后期处理 PointCloud tween three星球 shader特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39452320/article/details/85107882
版权

需要电子档书籍或者源码可以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>

 

 

webgl_谷子
关注
  • 10
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
20个基于Three.js的代码示例
weixin_43298747的博客
04-27 276
这些是一些简单的示例，涵盖了Three.js的基本功能和一些高级功能。- 使用WebRTC或WebSocket等技术建立网络连接。- 使用Cannon.js或其他物理引擎创建物理模拟。- 创建一个简单的三维场景，包括相机、场景和渲染器。- 使用Tween.js或GSAP等库创建动画效果。- 添加后期处理效果，如模糊、色调映射等。- 在模型上应用骨骼动画或关键帧动画。- 使用立方体贴图创建环境映射。- 创建基于文本的3D几何体。- 创建一个简单的粒子系统。- 创建一个简单的立方体。- 在模型上添加贴花效果。
高德地图中加载three.js（vue中）（封装
不上班老板怎么买房买车
03-17 4840
高德地图中加载three.js
threejs-postprocess:Three.js的后期处理模块集合
05-09
threejs-postprocess Three.js的后期处理模块集合 演示版 入门 安装 npm install https://github.com/MasatoMakino/threejs-postprocess.git --save-dev 进口 threejs-postprocess由ES6模块和TypeScript d.ts文件组成。 首先，导入类 import { PostProcessRenderer , ChromaticAberrationShaderPass , } from "threejs-postprocess" ; 创建PostProcessRenderer实例 const postProcessRender = new PostProcessRenderer ( scene , camera , renderer ) ; 创建Pass实例 c
three.js 后处理 理解
A873054267的博客
06-29 867
后处理的效果也实现了几种了，但仅限于cv，都还未做理解，借着对自定义shader的实现，谈谈对后处理接口的使用理解。 要实现后处理效果，应有3个步骤 1:初始化后处理的入口，即 new THREE.EffectComposer(renderer); 后处理的基础包，使用它来渲染场景、应用通道和输出结果。 2var renderPass = new THREE.RenderPass(scene, camera);该通道会在当前场景和摄像机的基础上渲染出一个新场景，可以理解为保存当前的场景 3...
Three.js后期处理简明教程
最新发布
新缸中之脑
09-23 588
后期处理（Post Processing）通常是指对 2D 图像应用某种效果或滤镜。在 THREE.js 中我们有一个包含一堆网格物体的场景。我们将该场景渲染为 2D 图像。通常，该图像会直接渲染到画布中并显示在浏览器中，但我们可以将其渲染到渲染目标，然后在将结果绘制到画布之前对结果应用一些后处理效果。之所以称为后处理，是因为它发生在主场景处理之后（后）。后期处理的例子有 Instagram 滤镜、Photoshop 滤镜等……推荐：用快速搭建可编程3D场景。
three.js根据高德地图的经纬度信息打造3D地图
liuhao9999的博客
05-17 1406
代码效果： 依据的数据： 高德地图 根据地图的经纬度，利用three.js框架打造3D地图，同时可以把飞机、高铁、汽车等元素加入其中，给他们指定的路线，让他们动起来。 源代码地址：three.js打造3D地图-Javascript文档类资源-CSDN下载这个资源是我自己的源代码版权所有，盗版或者拷贝在互联网上传播者，会通过法律途径起诉购买源代码者，更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/liuh...
【ThreeJS】场景后处理增加圆形暗角效果
Ning+
09-29 1280
1.Shader脚本 var DarkMaskShader = { uniforms: { "tDiffuse": { value: null }, "maskColor": { value: new THREE.Color(0x000000) }, "maskAlpha": { value: 1.0 }, "markRadius": { ...
使用3D引擎threeJS实现星空粒子移动效果
10-19
主要为大家详细介绍了使用3D引擎threeJS实现星空粒子移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS特效教程-星空动画.html
12-07
适合刚入门小白的特效之旅
threeJS 天空盒 30+
08-06
基于threeJS的天空盒子，内含三十余种的天空盒子图片，童叟无欺，你值得拥有。
three-nebula:用于Three.js的基于WebGL的粒子系统引擎
04-29
三星云 基于WebGL的3D粒子系统引擎 Three Nebula是基于WebGL的3D粒子引擎，旨在与一起 。 有关更多，请查看，，和。 特征 与three@0.122.0完美兼容性 从JSON对象实例化three-nebula粒子系统的能力 从精灵和3D网格创建粒子系统的能力 多种粒子行为和初始值设定项 安装 npm npm i --save three-nebula 脚本 [removed][removed] 用法 模块 import System , { Emitter , Rate , Span , Position , Mass , Radius , Life , Velocity ,
星空天空盒子-六张图-three.js-普清图·
10-15
星空天空盒 为一个 提供测试使用 在THREEJS中使用。。不是太高清，要求高请勿下载
高德地图嵌入到threejs全景中的踩坑指南
weixin_33810302的博客
01-24 4152
项目中用到了THREE.OrbitControls, 还要内嵌HTML结构(高德地图), 我这边采用的是THREE.CSS3DObject. 这导致了一个问题--由于OrbitControls必须将事件绑定到container及以上的DOM中, 这样就将CSS3DObject中的DOM的触摸事件被阻止了. 经过思考及测试, 只需将OrbitControls中onTouchMove的event.pr...
用three.js构建自己的后处理渲染器第二篇---性能好要解决的问题
zhgu1992的博客
11-30 3392
上一篇我们讲了抗锯齿的选择，这一篇我们讲一下常用的后处理功能的实现思路，如果想了解抗锯齿https://blog.csdn.net/zhgu1992/article/details/103322528 首先看一下three.js自己实现的EffectComposer,它主要是创建了两个renderTarget，一个readBuffer一个writeBuffer，而three.js默认的后期则用的有...
用three.js构建自己的后处理渲染器第三篇---架构设计
zhgu1992的博客
11-30 1620
上一篇主要讨论性能问题，这一篇我们开始设计后处理渲染器架构 effectComposer ---（默认生成 sourceTarget（原场景）， readBuffer（后续每一个pass的最终结果），writeBuffer（负责与readBuffer进行交换）） ---renderPass (负责渲染一遍原场景，最终渲染到sourceTarget) ---pass1 (针对物体的后处理...
three.js后处理之 聚焦效果focus
A873054267的博客
06-17 1377
类似于舞台聚光灯的效果 引入的js <script src="../../plugins/threeLibrary/three.min.js"></script> <script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script> <script src="../../plugins/CopyShader.js"></script&gt.
项目部分展示-3D在线试衣系统解决方案
热门推荐
谷子的博客
08-15 1万+
郑重声明：发布此博客纯属技术展示和交流！未得本人同意，禁止转载！禁止商业目的！ 需要电子档书籍可以Q群：828202939 案例分享网站：www.3js.top希望可以和大家一起学习、一起进步！！ 部分项目展示： 因为转化和压缩的原因，视频已经失真了而且只支持5M以内 研究：毛发效果，双击看大图 一、3D在线高级定制： 主要实现功能：加载一次秒更换...
threeJS-Helper01-arrowHelper （箭头）
谷子的博客
10-17 4358
郑重声明：发布此博客纯属技术展示和交流！未得本人同意，禁止转载！禁止商业目的！ 需要电子档书籍可以Q群：828202939   希望可以和大家一起学习、一起进步！！ 如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！ three里面Helper助手模块。相当于是debug助手了！ 今天我们来看看怎么添加一个箭头的助手-arrowHelper ...
threejs实现星空效果
07-27
要实现星空效果，可以使用three.js的功能来生成星星并渲染它们。 首先，需要创建一个场景(Scene)对象来容纳所有的3D元素。然后，创建一个摄像机(Camera)对象来决定观察者的视角。可以选择透视摄像机...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

webgl_谷子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值