Custom Shader

by LeroyRon

CSS

body {background-color:#CCC;}

JavaScript

var camera, scene, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {
    scene = new THREE.Scene();
var ambient = new THREE.AmbientLight(0x666666)
        scene.add(ambient)
        var directionalLight = new THREE.DirectionalLight(0xFFEEDD)
        directionalLight.position.set(0, 70, 100).normalize()
        scene.add(directionalLight)

        directionalLight = new THREE.DirectionalLight(0xBFA475)
        directionalLight.position.set(0, -70, -100).normalize()
        scene.add(directionalLight)
 	    camera = new THREE.PerspectiveCamera( 75, 500 / 500, 1, 10000 );
        camera.position.z = 1000;

        

        var phongShader = THREE.ShaderLib.phong;
        var uniforms = THREE.UniformsUtils.clone(phongShader.uniforms);

		material = new THREE.ShaderMaterial({
			uniforms: uniforms,
			vertexShader: phongShader.vertexShader,
			fragmentShader: phongShader.fragmentShader,
			lights:true,
			fog: false
		});

        //comment out the line below to see that i try to achive 
		//material = new THREE.MeshPhongMaterial( { wireframe: true } );

        geometry = new THREE.CubeGeometry( 200, 200, 200 );

        mesh = new THREE.Mesh( geometry, material );

        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( 500, 500 );

        document.body.appendChild( renderer.domElement );

    }

    function animate() {
        
        requestAnimationFrame( animate );

        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );


    }