examples/part3/webgl_shader.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    #container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
    <div id="container"></div>

    <script id="basic_shader_vertex" type="x-shader/x-vertex">
      void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    </script>

    <script id="basic_shader_fragment" type="x-shader/x-fragment">
      void main() {
        gl_FragColor = vec4(0.8, 0.4, 0.2, 1.0);
      }
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r74/three.min.js"></script>

    <script>
      (function () {
        var container = document.getElementById( 'container' );
        var renderer = new THREE.WebGLRenderer();
        var width = container.offsetWidth;
        var height = container.offsetHeight;
        var scene = new THREE.Scene();
        var geometry = new THREE.SphereGeometry( 1, 32, 32 );
        var vertexShader = document.getElementById('basic_shader_vertex').textContent;
        var fragmentShader = document.getElementById('basic_shader_fragment').textContent;
        var material = new THREE.ShaderMaterial({
          vertexShader: vertexShader,
          fragmentShader: fragmentShader
        });
        var object = new THREE.Mesh( geometry, material );
        scene.add( object );
        var camera = new THREE.PerspectiveCamera( 55, width / height, 1, 1000 );
        camera.position.z = 3;
        renderer.setSize( width, height );
        function draw () {
          window.requestAnimationFrame( draw );
          renderer.render( scene, camera );
        }
        draw();
        container.appendChild( renderer.domElement );
      }());
    </script>
</body>