three立方体运动

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// using THREE.js, see cog icon on Codepen to see it added
// most of this code is taken from
// https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

// full screen scene
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )

// render to HTML
const renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )

// make a 1x1x1 with 32 parts per face
const geometry = new THREE.BoxGeometry(1, 1, 1, 32, 32, 32)

// make a clock to add animation
const clock = new THREE.Clock()

// pass info to the shader
const uniforms = {
  time: { value: clock.getElapsedTime() }
}

// this is the thing that changes the position of the shape
const vert = `
  // pass info about each edge to the frag shader
  varying vec2 v_uv;
  
  // get from uniforms
  uniform float time;
  
  // this is from https://github.com/dmnsgn/glsl-rotate/blob/master/rotation-3d-y.glsl
  mat3 rotation3dY(float angle) {
    float s = sin(angle);
    float c = cos(angle);

return mat3(
      c, 0.0, -s,
      0.0, 1.0, 0.0,
      s, 0.0, c
    );
  }
  
  void main () {
    // overwrite the box position
    vec3 new_position = position.xyz;
    
    // rotate with a sine wave
    new_position *= rotation3dY(
      3.141 / 2.0 * sin(position.y + time)
    );
    
    // from https://threejs.org/docs/index.html?q=webgl#api/en/renderers/webgl/WebGLProgram
    gl_Position = projectionMatrix * modelViewMatrix * vec4(new_position, 1.0);
    
    // pass face info to the frag shader, "uv" is given to use by Three.js
    v_uv = uv;
  }
`

// what color are the faces
const frag = `
  varying vec2 v_uv;
  uniform float time;
  
  void main () {
    vec2 uv = v_uv;
    
    // RGBA color, based on each face with blue channel having a sine wave
    gl_FragColor = vec4(uv.x, uv.y, 0.5 + 0.5 * sin(time), 1.0);
  }
`

// make a shader material!
const material = new THREE.ShaderMaterial({ 
  uniforms: uniforms,
  vertexShader: vert,
  fragmentShader: frag
})

const cube = new THREE.Mesh( geometry, material )
scene.add( cube )

camera.position.z = 2

function animate() {
  cube.rotation.x += 0.002
  cube.rotation.y += 0.002
  cube.rotation.z += 0.002
  
  uniforms.time.value = clock.getElapsedTime()
  
	requestAnimationFrame( animate )
	renderer.render( scene, camera )
}
animate()

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