扭曲的光盘

更多有趣示例 尽在 知屋安砖社区

示例

HTML

<!--
Given to vertex shaders by Three.js:
"uniform mat4 modelMatrix;"
"uniform mat4 modelViewMatrix;"
"uniform mat4 projectionMatrix;"
"uniform mat4 viewMatrix;"
"uniform mat3 normalMatrix;"
"uniform vec3 cameraPosition;"
see: http://stackoverflow.com/questions/15663859/threejs-predefined-shader-attributes-uniforms
-->
<script type="text/x-glsl-es-vert" id="vertex">
      varying float vZ;
      uniform float time;
      void main() {
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        mvPosition.y += 20.0*sin(time*0.5+mvPosition.x/25.0);
        mvPosition.x += 30.0*cos(time*0.5+mvPosition.y/25.0);
        vec4 p = projectionMatrix * mvPosition;
        vZ = p.z;
        gl_Position = p;
      }
</script>

<!--
Given to fragment shaders by Three.js:
"uniform mat4 viewMatrix;"
"uniform vec3 cameraPosition;"
see: http://stackoverflow.com/questions/15663859/threejs-predefined-shader-attributes-uniforms
-->
<script type="text/x-glsl-es-vert" id="fragment">
      varying float vZ;
      uniform float time;
      uniform vec2 size;
      void main() {
        vec2 d = gl_FragCoord.xy - (0.5+0.01*sin(time))*size;
        float a = sin(time*0.3) * (2.0*3.14159);
        d += vec2(d.x*cos(a) + d.y*sin(a),
                 -d.x*sin(a) + d.y*cos(a));
        vec2 rg = vec2(1.0)-abs(d)/(0.5*size.yy);
        float b = abs(vZ) / 160.0;
        gl_FragColor = vec4(rg,b,1.0);
      }
</script>

JS

// Learning about shaders.
// Modified from http://fhtr.org/BasicsOfThreeJS/#27
  
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var fov = 45; // camera field-of-view in degrees
var width = renderer.domElement.width;
var height = renderer.domElement.height;
var aspect = width / height; // view aspect ratio
var near = 1; // near clip plane
var far = 10000; // far clip plane
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
camera.position.z = 160;
camera.position.y = 40;
camera.position.x = 40;
var scene = new THREE.Scene();

var uniforms = {
  time : { type: "f", value: 1.0 },
  size : { type: "v2", value: new THREE.Vector2(width,height) }
};
var cube = new THREE.Mesh(
  new THREE.SphereGeometry(50, 64, 64),
  //new THREE.MeshNormalMaterial();
  new THREE.ShaderMaterial({
    uniforms : uniforms,
    vertexShader : $('#vertex').text(),
    fragmentShader : $('#fragment').text()
  }));
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  render();
}
function render() {
  uniforms.time.value += 0.03;
  cube.rotation.y += 0.005;
  cube.rotation.z += 0.008;
  renderer.clear();
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}  

// KICK IT OFF
animate();