ShaderMaterial #0

HelloWorld

HTML

<div id="info">GLSL Exercises</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
    
</script>
<script id="myVertexShader" type="x-shader/x-vertex">
    varying vec4 eyepos;
    varying vec2 vUv;
    uniform float phase; 
    void main() {
    
        // input: position (vec3, object coordinate)
                uv (vec2, texture coordinate)
        // output: gl_Position (vec4) clip coordinatez
        vec3 newpos = position; 
        newpos.z = 1.5*sin(1.2*newpos.x+phase);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(newpos, 1.0);
        eyepos = modelViewMatrix * vec4(position, 1.0);
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
    varying vec4 eyepos;
    varying vec2 vUv;
    uniform sampler2D mytex;
    void main() {
    vec3 mycolor;
    gl_FragColor = texture2D(mytex,vUv);
    if(eyepos.x > 0.0)
        mycolor = vec3(1.0,0.0,0.0);
    else
        mycolor = vec3(0.0,1.0,0.0);
    
        // output: gl_FragColor (vec4, rgba)
        gl_FragColor = vec4(mycolor, 1.0);
    }
</script>

CSS

body {
    background-color: #fff;
    color: #111;
    margin: 0px;
    overflow: hidden;
    font-family: Monospace;
    font-size: 10px;
    position: absolute;
}
#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 5px;
    text-align: center;
    color: #ffff00
}

JavaScript

var clock = new THREE.Clock();
var scene, renderer, camera;
var mesh, mesh2;
var controls;

var meshMaterial;

init();
animate();

function init() {
    var width = window.innerWidth;
    var height = window.innerHeight;

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0x888888);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
    camera.position.y = 160;
    camera.position.z = 400;
    camera.lookAt(new THREE.Vector3(0, 0, 0));

    
    
    controls = new THREE.OrbitControls(camera, render.domElement);

    var gridXZ = new THREE.GridHelper(100, 10);
    gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
    scene.add(gridXZ);

    var pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(0, 300, 200);
    scene.add(pointLight);

    meshMaterial = new THREE.ShaderMaterial({
       uniforms: {
		   phase: { type: "f", value: 1.0 },
           mytex:{ type:'t',value:texture  }
	   },
       
        vertexShader: document.getElementById('myVertexShader').textContent,
        fragmentShader: document.getElementById('myFragmentShader').textContent
    });

    var geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16);
    var material = new THREE.MeshBasicMaterial({
        color: 0xffff00
    });
    mesh = new THREE.Mesh(geometry,
    new THREE.MeshLambertMaterial({
        color: 0x12ff32
    }));
    scene.add(mesh);

    mesh2 = mesh.clone();
    mesh2.material = meshMaterial;
    scene.add(mesh2);
    mesh.position.set(50, 0, 0);
  
    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);

    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
   ...