电子商务网站建设的建议h5网站制作

当前位置： 首页 > news >正文

电子商务网站建设的建议,h5网站制作,网站空间控制面板软件,闸北集团网站建设shader特效之能量盾前言效果噪点图主要代码index.htmldepth-fs.jsdepth-vs.jsshield-fs.jsshield-vs.js相关项目前言 效果噪点图 为了可以自定义能量球的效果#xff0c;这里使用外部加载来的噪点图做纹理#xff0c;省去用代码写特效的过程。
主要代码 index.html 这里使用外部加载来的噪点图做纹理省去用代码写特效的过程。
主要代码 index.html !DOCTYPE html html langenheadmeta charsetutf-8 /titleEnergy shield/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalableno /stylebody {margin: 0;padding: 0;}/style /headbodyscript typemoduleimport * as THREE from ../../build/three.module.jsimport * as TWEEN from ../../build/tween.esm.jsimport Stats from ../jsm/libs/stats.module.jsimport { OrbitControls } from ../jsm/controls/OrbitControls.jsimport { shader as depthVertexShader } from ./shaders/depth-vs.jsimport { shader as depthFragmentShader } from ./shaders/depth-fs.jsimport { shader as shieldVertexShader } from ./shaders/shield-vs.jsimport { shader as shieldFragmentShader } from ./shaders/shield-fs.js// rendererconst renderer new THREE.WebGLRenderer({ antialias: true })renderer.setPixelRatio(window.devicePixelRatio)renderer.shadowMap.enabled truerenderer.shadowMap.type THREE.PCFSoftShadowMaprenderer.outputEncoding THREE.sRGBEncodingrenderer.gammaFactor 2.2document.body.append(renderer.domElement)// statsconst stats new Stats()document.body.appendChild(stats.domElement)// sceneconst scene new THREE.Scene()const camera new THREE.PerspectiveCamera(60, 1, 0.1, 100)camera.position.set(0, 1, 2)// controlconst controls new OrbitControls(camera, renderer.domElement)controls.minDistance 0.5controls.maxDistance 10controls.enableDamping truecontrols.dampingFactor 0.05controls.screenSpacePanning truecontrols.autoRotate false// cubeconst cubeGeometry new THREE.BoxBufferGeometry(0.4, 0.4, 0.4)const cubeMaterial new THREE.MeshStandardMaterial({color: rgb(100, 70, 30),roughness: 0.4,metalness: 0.0,side: THREE.DoubleSide})const cube new THREE.Mesh(cubeGeometry, cubeMaterial)cube.castShadow cube.receiveShadow truecube.position.set(-0.6, 0.2, -0.6)cube.rotation.set(-Math.PI / 2, 0, 0)scene.add(cube)// groundconst groundGeometry new THREE.PlaneBufferGeometry(3, 3)const groundMaterial new THREE.MeshStandardMaterial({color: rgb(20, 20, 30),roughness: 0.4,metalness: 0.0,side: THREE.DoubleSide})const ground new THREE.Mesh(groundGeometry, groundMaterial)ground.castShadow ground.receiveShadow trueground.position.set(0, 0, 0)ground.rotation.set(-Math.PI / 2, 0, 0)scene.add(ground)// light1const light new THREE.DirectionalLight(0xffffff)light.position.set(-2, 2, 0.5)light.castShadow truelight.shadow.camera.top 2light.shadow.camera.bottom -2light.shadow.camera.right 2light.shadow.camera.left -2light.shadow.bias -0.00001light.shadow.mapSize.set(4096, 4096)scene.add(light)// light2const hemiLight new THREE.HemisphereLight(0xbbbbbb, 0x080808, 1)scene.add(hemiLight)// light1 helperscene.add(new THREE.DirectionalLightHelper(light, 2, 0xFFFF00))// axis helperscene.add(new THREE.AxesHelper(100))const depthMaterial new THREE.RawShaderMaterial({uniforms: {},vertexShader: depthVertexShader,fragmentShader: depthFragmentShader,})const depth new THREE.WebGLRenderTarget(1, 1, {wrapS: THREE.ClampToEdgeWrapping,wrapT: THREE.ClampToEdgeWrapping,minFilter: THREE.LinearFilter,magFilter: THREE.LinearFilter,format: THREE.RGBAFormat,type: THREE.UnsignedByteType,stencilBuffer: false,depthBuffer: true})const hdr new THREE.WebGLRenderTarget(1, 1, {wrapS: THREE.ClampToEdgeWrapping,wrapT: THREE.ClampToEdgeWrapping,minFilter: THREE.LinearFilter,magFilter: THREE.LinearFilter,format: THREE.RGBAFormat,type: THREE.UnsignedByteType,stencilBuffer: false,depthBuffer: true})// shieldconst textureLoader new THREE.TextureLoader()const texture textureLoader.load(./imgs/noise1.png)texture.wrapS texture.wrapT THREE.RepeatWrappingconst shieldGeometry new THREE.SphereBufferGeometry(0.5, 100, 100)const shieldMaterial new THREE.RawShaderMaterial({uniforms: {depthBuffer: { value: null },resolution: { value: new THREE.Vector2(1, 1) },bufColor: { value: null },u_tex: { value: null },time: { value: 0 }},vertexShader: shieldVertexShader,fragmentShader: shieldFragmentShader,transparent: true,depthWrite: false,side: THREE.DoubleSide})const shield new THREE.Mesh(shieldGeometry, shieldMaterial)shield.position.set(0, 0.3, 0)shield.material.uniforms.depthBuffer.value depth.textureshield.material.uniforms.bufColor.value depth.textureshield.material.uniforms.u_tex.value texturescene.add(shield)// tweenfunction moveCube() {const tween new TWEEN.Tween(cube.position)tween.to({x: 0.6,z: 0.6}, 5000)tween.yoyo(true)tween.repeat(Infinity)tween.start()}// resizefunction resize() {const width window.innerWidthconst height window.innerHeightconst dPR window.devicePixelRatiocamera.aspect width / heightcamera.updateProjectionMatrix()renderer.setSize(width, height)depth.setSize(width * dPR, height * dPR)hdr.setSize(width * dPR, height * dPR)shield.material.uniforms.resolution.value.set(width * dPR, height * dPR)}// renderfunction render() {shield.visible falsescene.overrideMaterial depthMaterialrenderer.setRenderTarget(depth)renderer.render(scene, camera)shield.visible truescene.overrideMaterial nullrenderer.setRenderTarget(null)renderer.render(scene, camera)renderer.setAnimationLoop(render)TWEEN.update()stats.update()controls.update()shield.material.uniforms.time.value performance.now()}window.addEventListener(resize, resize)moveCube()resize()render()/script /body/html depth-fs.js const shader #version 300 esprecision highp float;#include packingin vec2 vUv; in float vDepth;out vec4 color;void main() {float depth (vDepth - .1) / ( 10.0 -.1);color packDepthToRGBA(depth); } ;export { shader }; depth-vs.js const shader #version 300 esprecision highp float;in vec3 position; in vec2 uv;uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix;out vec2 vUv; out float vDepth;void main() {vUv uv;gl_Position projectionMatrix * modelViewMatrix * vec4(position, 1.0);vDepth gl_Position.z; } ;export { shader }; shield-fs.js const shader #version 300 esprecision highp float;#include packinguniform sampler2D depthBuffer; uniform vec2 resolution; uniform float time; uniform sampler2D u_tex;in float vRim; in vec2 vUv; in float vDepth;out vec4 color;const vec4 baseColor vec4(0.0,0.9,0.0,0.1);void main() {// 基础色color baseColor;// 动态纹理vec4 maskA texture(u_tex, vUv);maskA.a maskA.r;color maskA;// 边界高亮vec2 uv gl_FragCoord.xy / resolution;vec4 packedDepth texture(depthBuffer, uv);float sceneDepth unpackRGBAToDepth(packedDepth);float depth (vDepth - .1) / ( 10.0 -.1);float diff abs(depth - sceneDepth);float contact diff * 20.;contact 1. - contact;contact max(contact, 0.);contact pow(contact, 20.);contact * diff*1000.;float a max(contact, vRim);float fade 1. - pow(vRim, 10.);color a * fade; } ;export { shader }; shield-vs.js const shader #version 300 esprecision highp float;in vec3 position; in vec3 normal; in vec2 uv;uniform mat3 normalMatrix; uniform mat4 modelMatrix; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform float time;out vec2 vUv; out float vRim; out float vDepth;void main() {vUv uv;vUv.x time * 0.0001;vUv.y time * 0.0006;vec3 n normalMatrix * normal;vec4 viewPosition modelViewMatrix * vec4( position, 1. );vec3 eye normalize(-viewPosition.xyz);vRim 1.0 - abs(dot(eye,n));vRim pow(vRim, 5.);vec3 worldPosition (modelMatrix * vec4(position, 1.)).xyz; gl_Position projectionMatrix * viewPosition;vDepth gl_Position.z; } ;export { shader }; 相关项目 ——坦克大战 —— 立体库房 —— 圣诞树 ✅—— 程序员升职记 —— 投个篮吧 ——粒子爱心