threeJS后处理-星空 - 好文

需要电子档书籍或者源码可以Q群：828202939
<https://blog.csdn.net/weixin_39452320/article/details/85107882?_wv=1027&k=58pY3nD>
希望可以和大家一起学习、一起进步！！

如有错别字或有理解不到位的地方，可以留言或者加微信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>

热门工具换一换