层景

下载代码

html

css

分享到微信朋友圈

html

vec3 mod289(vec3 x)
  {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
  }

vec4 mod289(vec4 x)
  {
    return x - floor(x * (1.0 / 289.0)) * 289.0;
  }

vec4 permute(vec4 x)
  {
    return mod289(((x*34.0)+1.0)*x);
  }

vec4 taylorInvSqrt(vec4 r)
  {
    return 1.79284291400159 - 0.85373472095314 * r;
  }

vec3 fade(vec3 t) {
    return t*t*t*(t*(t*6.0-15.0)+10.0);
  }

// Classic Perlin noise
  float cnoise(vec3 P)
  {
    vec3 Pi0 = floor(P); // Integer part for indexing
    vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
    Pi0 = mod289(Pi0);
    Pi1 = mod289(Pi1);
    vec3 Pf0 = fract(P); // Fractional part for interpolation
    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
    vec4 iy = vec4(Pi0.yy, Pi1.yy);
    vec4 iz0 = Pi0.zzzz;
    vec4 iz1 = Pi1.zzzz;

vec4 ixy = permute(permute(ix) + iy);
    vec4 ixy0 = permute(ixy + iz0);
    vec4 ixy1 = permute(ixy + iz1);

vec4 gx0 = ixy0 * (1.0 / 7.0);
    vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;
    gx0 = fract(gx0);
    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
    vec4 sz0 = step(gz0, vec4(0.0));
    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
    gy0 -= sz0 * (step(0.0, gy0) - 0.5);

vec4 gx1 = ixy1 * (1.0 / 7.0);
    vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;
    gx1 = fract(gx1);
    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
    vec4 sz1 = step(gz1, vec4(0.0));
    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
    gy1 -= sz1 * (step(0.0, gy1) - 0.5);

vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);

vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
    g000 *= norm0.x;
    g010 *= norm0.y;
    g100 *= norm0.z;
    g110 *= norm0.w;
    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
    g001 *= norm1.x;
    g011 *= norm1.y;
    g101 *= norm1.z;
    g111 *= norm1.w;

float n000 = dot(g000, Pf0);
    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
    float n111 = dot(g111, Pf1);

vec3 fade_xyz = fade(Pf0);
    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
    return 2.2 * n_xyz;
  }

// Classic Perlin noise, periodic variant
  float pnoise(vec3 P, vec3 rep)
  {
    vec3 Pi0 = mod(floor(P), rep); // Integer part, modulo period
    vec3 Pi1 = mod(Pi0 + vec3(1.0), rep); // Integer part + 1, mod period
    Pi0 = mod289(Pi0);
    Pi1 = mod289(Pi1);
    vec3 Pf0 = fract(P); // Fractional part for interpolation
    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
    vec4 iy = vec4(Pi0.yy, Pi1.yy);
    vec4 iz0 = Pi0.zzzz;
    vec4 iz1 = Pi1.zzzz;

vec4 ixy = permute(permute(ix) + iy);
    vec4 ixy0 = permute(ixy + iz0);
    vec4 ixy1 = permute(ixy + iz1);

#define PHYSICAL
  varying vec3 vViewPosition;
  #ifndef FLAT_SHADED
    varying vec3 vNormal;
  #endif
  #include <common>
  #include <uv_pars_vertex>
  #include <uv2_pars_vertex>
  #include <displacementmap_pars_vertex>
  #include <color_pars_vertex>
  #include <fog_pars_vertex>
  #include <morphtarget_pars_vertex>
  #include <skinning_pars_vertex>
  #include <shadowmap_pars_vertex>
  #include <logdepthbuf_pars_vertex>
  #include <clipping_planes_pars_vertex>
  
  uniform float time;
  uniform float maxHeight;
  uniform float speed;
  uniform float distortCenter;
  uniform float ticknessOffset;
  varying float vDisplace;
  varying vec4 color;
  
  
  void main() {
    
    
    
    float t = time * speed;
    float wRoad = distortCenter;
    float wRoad2 = wRoad * 0.5;
    
    float angleCenter = uv.y * PI*4.0;
    angleCenter += t * 0.9;
    
    float centerOff = (
      sin(angleCenter) + 
      sin(angleCenter*0.5) 
    ) * wRoad;

vec3 noiseIn = vec3(uv, 1.0)*20.0;
    float noise = cnoise(vec3(noiseIn.x, noiseIn.y + t, noiseIn.z));
    noise += 1.0;
    float h = noise;
    float angle = (uv.x - centerOff) * PI;
    float f = abs(cos(angle));
    h *= pow(f, 1.5 + ticknessOffset);
    
    // water
    /*if(h < 0.02){
      float am = 8.0;
      h += cnoise(vec3(noiseIn.x*am, noiseIn.y*am + t*4.0, noiseIn.z*am)) * 0.01;
    }*/

vDisplace = h;

h*=maxHeight;
    
    #include <uv_vertex>
    #include <uv2_vertex>
    #include <color_vertex>
    // #include <beginnormal_vertex>
    vec3 objectNormal = vec3( normal.x, normal.y, normal.z );
    
    #include <morphnormal_vertex>
    #include <skinbase_vertex>
    #include <skinnormal_vertex>
    #include <defaultnormal_vertex>
    
  #ifndef FLAT_SHADED
    vNormal = normalize( transformedNormal );
  #endif
  
    //#include <begin_vertex>
    vec3 transformed = vec3( position.x, position.y, position.z + h );
    
    #include <morphtarget_vertex>
    #include <skinning_vertex>
    #include <displacementmap_vertex>
    #include <project_vertex>
    #include <logdepthbuf_vertex>
    #include <clipping_planes_vertex>
    
    vViewPosition = - mvPosition.xyz;
    
    #include <worldpos_vertex>
    #include <shadowmap_vertex>
    #include <fog_vertex>
    
  }
</script>

css

JavaScript

var isInteractive = true;
var width, height;

var scene, camera, renderer, light;
var controls;
var terrain;
var cubemapRT, cubeRenderTarget;
var composer;
var message = document.querySelector(".message");
var hammer;

var mouse = { x: 0, y: 0 };
var isMobile = typeof window.orientation !== 'undefined';

var palleteBlack = {
  colors: [
  { c: "#111111", l: 5 },
  { c: "#ed254e", l: 1 },
  { c: "#f9dc5c", l: 1 },
  { c: "#c2eabd", l: 1 },
  { c: "#011936", l: 1 },
  { c: "#465362", l: 1 }],

topColor: null,
  repeat: 10,
  shuffle: true,
  texture: null };

var palleteObj = palleteBlack;

function init() {

textureLoader = new THREE.TextureLoader();

palleteObj.texture = textureLoader.load(createPalleteImg(palleteObj));

build();
}
var bl = true;
function build() {

setup();
  elements();

if (isInteractive) {
    hammer = new Hammer(document.body);
    hammer.get('pinch').set({ enable: true });
    hammer.on('pinch', function (ev) {
      c.yd = ev.scale;
    });

message.innerHTML = isMobile ? "DRAG AND PINCH!" : "MOVE!";
    message.style.display = "block";
    window.addEventListener(isMobile ? "touchstart" : "mousemove", function () {
      message.style.display = "none";

});
  }

render();

if (isMobile)
  window.addEventListener("touchmove", mousemove, { passive: false });else

window.addEventListener("mousemove", mousemove);

window.addEventListener("resize", resize);
  resize();

}

function setup() {
  scene = new THREE.Scene();
  var fogColor = new THREE.Color(0xffffff);
  scene.background = fogColor;
  scene.fog = new THREE.Fog(fogColor, 10, 400);

sky();

camera = new THREE.PerspectiveCamera(60, width / height, .1, 10000);
  camera.position.y = 8;
  camera.position.z = 4;

ambientLight = new THREE.AmbientLight(0xffffff, 1);
  scene.add(ambientLight);

renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio = devicePixelRatio;
  renderer.setSize(width, height);

document.body.appendChild(renderer.domElement);

}

function sky() {
  sky = new THREE.Sky();
  sky.scale.setScalar(450000);
  sky.material.uniforms.turbidity.value = 20;
  sky.material.uniforms.rayleigh.value = 0;
  sky.material.uniforms.luminance.value = 1;
  sky.material.uniforms.mieCoefficient.value = 0.01;
  sky.material.uniforms.mieDirectionalG.value = 0.8;

scene.add(sky);

sunSphere = new THREE.Mesh(
  new THREE.SphereBufferGeometry(20000, 16, 8),
  new THREE.MeshBasicMaterial({ color: 0xffffff }));

sunSphere.visible = false;
  scene.add(sunSphere);

var theta = Math.PI * -0.02;
  var phi = 2 * Math.PI * -.25;

sunSphere.position.x = 400000 * Math.cos(phi);
  sunSphere.position.y = 400000 * Math.sin(phi) * Math.sin(theta);
  sunSphere.position.z = 400000 * Math.sin(phi) * Math.cos(theta);

sky.material.uniforms.sunPosition.value.copy(sunSphere.position);
}

function elements() {
  var w = 100;
  var h = 400;
  var geometry = new THREE.PlaneBufferGeometry(w, h, 400, 400);

var colorsBuffer = new Float32Array(geometry.attributes.position.count * 3);
  for (var i = 0; i < colorsBuffer.length; i++) {
    colorsBuffer[i] = Math.random();
  }
  geometry.addAttribute('vColor', new THREE.BufferAttribute(colorsBuffer, 3));

var displaceBuffer = new Float32Array(geometry.attributes.position.count);
  for (var i = 0; i < displaceBuffer.length; i++) {
    displaceBuffer[i] = Math.random();
  }
  geometry.addAttribute('vDisplace', new THREE.BufferAttribute(displaceBuffer, 1));
  var material = new MeshCustomMaterial(
  {
    roughness: .7,
    metalness: 0.1 },

{
    time: { type: "f", value: 0.0 },
    distortCenter: { type: "f", value: 0.1 },
    ticknessOffset: { type: "f", value: 0.0 },
    pallete: { type: "t", value: null },
    speed: { type: "f", value: 2.0 },
    maxHeight: { type: "f", value: 10.0 } },

document.getElementById("custom-vertex").textContent,
  document.getElementById("custom-fragment").textContent);

terrain = new THREE.Mesh(geometry, material);
  terrain.position.y = h / 2;

container = new THREE.Object3D();
  container.add(terrain);
  container.position.y = 0;
  container.position.z = 4;
  container.rotation.x = -Math.PI / 2;

scene.add(container);
}

function createPalleteImg(palleteObj) {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext("2d");

var pallete = expandPallete(palleteObj);

var texH = 1024;
  var colorH = texH / pallete.length;

canvas.width = 2;
  canvas.height = texH;

for (var i = 0; i < pallete.length; i++) {
    ctx.fillStyle = pallete[i];
    ctx.fillRect(0, colorH * i, canvas.width, colorH);

}

return canvas.toDataURL();

}

function shuffle(o) {
  for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x) {}
  return o;
};

var c = { x: 0, y: 0, xd: 0, yd: 0 };
function render() {
  requestAnimationFrame(render);

var time = performance.now() * 0.001;

terrain.material.uniforms.pallete.value = palleteObj.texture;
  terrain.material.uniforms.time.value = time;

if (isInteractive) {
    c.xd = mouse.x * 0.2;
    if (!isMobile)
    c.yd = mouse.y * 5;

if (c.yd < -.5) c.yd = -.5;
    c.x += (c.xd - c.x) * 0.08;
    c.y += (c.yd - c.y) * 0.08;

terrain.material.uniforms.distortCenter.value = c.x;
    terrain.material.uniforms.ticknessOffset.value = c.y;
  }

if (Math.sin(time + Math.PI) > 0.99) {
    palleteObj.texture = textureLoader.load(createPalleteImg(palleteObj));
  }

renderer.render(scene, camera);

}

function mousemove(e) {
  e.preventDefault();

var x, y;
  if (e.type == "mousemove") {
    x = e.clientX;
    y = e.clientY;
  } else {
    x = e.changedTouches[0].clientX;
    y = e.changedTouches[0].clientY;
  }

mouse.x = x / width - 0.5;
  mouse.y = y / height - 0.5;

}

function resize() {
  width = window.innerWidth;
  height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();

renderer.setSize(width, height);

}

function MeshCustomMaterial(parameters, uniforms, vertexShader, fragmentShader) {
  THREE.MeshStandardMaterial.call(this);
  this.uniforms = THREE.UniformsUtils.merge([
  THREE.ShaderLib.standard.uniforms,
  uniforms]);

this.vertexShader = vertexShader;
  this.fragmentShader = fragmentShader;
  this.type = 'MeshCustomMaterial';
  this.setValues(parameters);
}

MeshCustomMaterial.prototype = Object.create(THREE.MeshStandardMaterial.prototype);
MeshCustomMaterial.prototype.constructor = MeshCustomMaterial;
MeshCustomMaterial.prototype.isMeshStandardMaterial = true;

window.onload = init;

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg