agconti/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bonjourno World</title>
  </head>
  <body>
    <script id="vertex-shader" type="text/vertex-shader">
    /**
     * Multiply each vertex by the model-view matrix
     * and the projection matrix (both provided by
     * Three.js) to get a final vertex position
     */
    varying vec3 vNormal;
    varying float positionX;

    void main() {
      vNormal = normal;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
    </script>
    <script id="fragment-shader" type="text/fragment-shader">
    /**
     * Set the colour to a lovely pink.
     * Note that the color is a 4D Float
     * Vector, R,G,B and A and each part
     * runs from 0.0 to 1.0
     */
    uniform vec3 color;
    uniform vec3 lightSource;
    varying vec3 vNormal;
    varying float positionX;

    void main() {
      vec3 normalizedlightSource = normalize(lightSource);
      float exposure = max(0.0, dot(normalizedlightSource, vNormal));

      gl_FragColor = vec4(color * exposure, 1.0);
    }

    </script>
    <script src="../jspm_packages/system.js" charset="utf-8"></script>
    <script src="../config.js" charset="utf-8"></script>
    <script charset="utf-8">
    System.import("three").then(function(three){ THREE = three })
    System.import("./main")
    </script>
  </body>
  </html>

## main.ts
import * as THREE from 'three'

const scene = new THREE.Scene()
const renderer = new THREE.WebGLRenderer()
const cameraRatio = window.innerWidth / window.innerHeight
const camera = new THREE.PerspectiveCamera(75, cameraRatio, 1, 10000 )

let uniforms = {
  color: {
    type: 'v3'
  , value: new THREE.Vector3(1.0, 0.0, 1.0)
  }
, lightSource: {
    type: 'v3'
  , value: new THREE.Vector3(0.8, 0.5, 2.0)
  }
}
const geometry = new THREE.BoxGeometry(200, 200, 200)
const vertexShader = document.getElementById('vertex-shader').innerText
const fragmentShader = document.getElementById('fragment-shader').innerText
const shaderMaterial = new THREE.ShaderMaterial({uniforms, vertexShader, fragmentShader})
const mesh = new THREE.Mesh( geometry, shaderMaterial )

function animate() {

  requestAnimationFrame( animate );

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

  renderer.render( scene, camera );

}

scene.add(mesh)
renderer.setSize(window.innerWidth, window.innerHeight)
camera.position.z = 500
document.body.appendChild(renderer.domElement)
renderer.render( scene, camera );

// animate()
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Bonjourno World</title>
	</head>
	<body>
	<script id="vertex-shader" type="text/vertex-shader">
	/**
	* Multiply each vertex by the model-view matrix
	* and the projection matrix (both provided by
	* Three.js) to get a final vertex position
	*/
	varying vec3 vNormal;
	varying float positionX;

	void main() {
	vNormal = normal;
	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
	}
	</script>
	<script id="fragment-shader" type="text/fragment-shader">
	/**
	* Set the colour to a lovely pink.
	* Note that the color is a 4D Float
	* Vector, R,G,B and A and each part
	* runs from 0.0 to 1.0
	*/
	uniform vec3 color;
	uniform vec3 lightSource;
	varying vec3 vNormal;
	varying float positionX;

	void main() {
	vec3 normalizedlightSource = normalize(lightSource);
	float exposure = max(0.0, dot(normalizedlightSource, vNormal));

	gl_FragColor = vec4(color * exposure, 1.0);
	}

	</script>
	<script src="../jspm_packages/system.js" charset="utf-8"></script>
	<script src="../config.js" charset="utf-8"></script>
	<script charset="utf-8">
	System.import("three").then(function(three){ THREE = three })
	System.import("./main")
	</script>
	</body>
	</html>
	import * as THREE from 'three'

	const scene = new THREE.Scene()
	const renderer = new THREE.WebGLRenderer()
	const cameraRatio = window.innerWidth / window.innerHeight
	const camera = new THREE.PerspectiveCamera(75, cameraRatio, 1, 10000 )

	let uniforms = {
	color: {
	type: 'v3'
	, value: new THREE.Vector3(1.0, 0.0, 1.0)
	}
	, lightSource: {
	type: 'v3'
	, value: new THREE.Vector3(0.8, 0.5, 2.0)
	}
	}
	const geometry = new THREE.BoxGeometry(200, 200, 200)
	const vertexShader = document.getElementById('vertex-shader').innerText
	const fragmentShader = document.getElementById('fragment-shader').innerText
	const shaderMaterial = new THREE.ShaderMaterial({uniforms, vertexShader, fragmentShader})
	const mesh = new THREE.Mesh( geometry, shaderMaterial )

	function animate() {

	requestAnimationFrame( animate );

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

	renderer.render( scene, camera );

	}

	scene.add(mesh)
	renderer.setSize(window.innerWidth, window.innerHeight)
	camera.position.z = 500
	document.body.appendChild(renderer.domElement)
	renderer.render( scene, camera );

	// animate()