torusknot.js

// var shaders = {
//   Gouraud:new THREE.ShaderMaterial ({
//     vertexColors: THREE.VertexColors,
//     vertexShader: document.getElementById('gouraud.vert').text,
//     fragmentShader: document.getElementById('gouraud.frag').text,
//     uniforms: {
//       light_position: { type: 'v3', value: light.position }
//     }
//   }),
//   Phong:new THREE.ShaderMaterial ({
//     vertexColors: THREE.VertexColors,
//     vertexShader: document.getElementById('phong.vert').text,
//     fragmentShader: document.getElementById('phong.frag').text,
//     uniforms: {
//       light_position: { type: 'v3', value: light.position }
//     }
//   })
// };
function torusknot() {
  var width = window.innerWidth *7/15 ;
  var height = window.innerHeight  *7/15 ;
  // var width = 400;
  // var height =400;
  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
  camera.position.set( 0, 0, 5 );
  scene.add( camera );

  var light = new THREE.PointLight();
  light.position.set( 5, 5, 5 );
  scene.add( light );

  var renderer = new THREE.WebGLRenderer( );
  // renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( width, height );
  document.body.appendChild( renderer.domElement );


  var geometry = new THREE.TorusKnotGeometry( 1, 0.3, 100, 20 );
  var material = new THREE.ShaderMaterial ({
    vertexColors: THREE.VertexColors,
    vertexShader: document.getElementById('phong.vert').text,
    fragmentShader: document.getElementById('phong.frag').text,
    uniforms: {
      light_position: { type: 'v3', value: light.position }
    }
  });
  var torus_knot = new THREE.Mesh( geometry, material );
  scene.add( torus_knot );

  loop();

  function loop() {
    requestAnimationFrame( loop );

    torus_knot.rotation.x += 0.01;
    torus_knot.rotation.y += 0.01;

    renderer.render( scene, camera );
  }
}