THREE.js 3d场景动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const glsl = x => x[0].trim();

const backgroundShader = {};
const landscapeShader = {};

backgroundShader.vert = glsl`
varying vec2 vUv;
void main()	{
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`;

backgroundShader.frag = glsl`
uniform float time;
uniform vec2 resolution;
varying vec2 vUv;

// cosine based palette, 4 vec3 params
vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d )
{
  return a + b * cos(6.28318 * (c * t + d));
}

vec3 pal1(in float t) {
  vec3 a = vec3(0.5, 0.5, 0.5);
  vec3 b = vec3(0.5, 0.5, 0.5);
  vec3 c = vec3(1.0, 1.0, 1.0);
  vec3 d = vec3(0.3, 0.2, 0.2);
  return palette(t, a, b, c, d);
}

void main() {
  vec2 p = (vUv * 1. - .5) * 8.; // * vec2(aspect, 1.);
  float l = length(p);
  float a = atan(p.y, p.x);
  vec2 p1 = vec2(cos(a) * l, sin(a) * l);
  float mt = time * .1;
  vec3 color = pal1(mod(mt * .1 + .5 * sin(p1.x * 1.5 - mt), 1.));
  float lightness = clamp(-.3 + gl_FragCoord.y / resolution.y, 0., 1.);
  gl_FragColor = vec4(color * lightness, 1.);
}
`;

landscapeShader.vert = glsl`
varying vec2 vUv;
varying vec3 vPos;
uniform float time;
void main()	{
  vUv = uv;
  vPos = position;
  float s = sin(position.x);
  float c = cos(position.y + time * .25);
  vec3 p = position + vec3(0, 0, s * (s - c) * sin(position.x) * .7);
  gl_Position = projectionMatrix * modelViewMatrix * vec4( p, 1.0 );
}
`;

landscapeShader.frag = glsl`
uniform float time;
varying vec2 vUv;
varying vec3 vPos;
void main() {
  float u = .7 * cos(vUv.y * 64. + time);
  float v = 1. - smoothstep(0., .06, u * u);
  float z = 1. - clamp(vPos.y * .1, 0., 1.);
  gl_FragColor = vec4(vec3(v) * z, 1.); 
}
`;

const container = document.querySelector('#container');

let camera, scene, renderer, uniforms, clock, frame;

const dispose = init();

function init() {
  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio(window.devicePixelRatio);
  container.appendChild(renderer.domElement);
  clock = new THREE.Clock();
  // camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
  camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
  camera.position.z = 5;
  scene = new THREE.Scene();

const geometry = new THREE.PlaneBufferGeometry(240, 240);

const landscapeGeometry = new THREE.PlaneBufferGeometry(64, 16, 640, 80);

uniforms = {
    time: { type: 'f', value: 1.0 },
    resolution: { type: 'v2', value: new THREE.Vector2() },
  };

function onResize() {
  renderer.setSize(window.innerWidth, window.innerHeight);
  const canvas = renderer.domElement;
  camera.aspect = canvas.clientWidth / canvas.clientHeight;
  camera.updateProjectionMatrix();
  uniforms.resolution.value.x = renderer.domElement.width;
  uniforms.resolution.value.y = renderer.domElement.height;
}

function animate(timestamp) {
  frame = requestAnimationFrame(animate);
  uniforms.time.value = clock.getElapsedTime();
  renderer.render(scene, camera);
}

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