jameshih/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
  body {
    margin: 0;
    overflow: hidden;
  }
  canvas{
    width:100%;
    height: 100%;
  }
  </style>
</head>
<body>
  <script src="js/three.min.js"></script>
  <script src="js/ImprovedNoise.js"></script>
  <script>
  var mesh,material,
  noise = new ImprovedNoise(),
  viewAngle = 75,
  aspectRatio = window.innerWidth/window.innerHeight,
  near = 0.1,
  far =5000,
  camera = new THREE.PerspectiveCamera(viewAngle, aspectRatio, near, far),
  scene = new THREE.Scene(),
  renderer = new THREE.WebGLRenderer();
  //window.addEventListener('load',init);
  function updateBlob(geometry){
    var time = 0.001 *Date.now();
    var vertex , distance;
    for(var j =0; j < geometry.vertices.length; j++){
      vertex = geometry.vertices[j];
      distance = 30 + 3*noise.noise(
        0.1*vertex.x + 1.3 *time,
        0.1 *vertex.y +0.9 *time,
        0.1*vertex.z+10.1*time
      );
      vertex.normalize().multiplyScalar(distance);
    }
    geometry.computeVertexNormals();
    geometry.computeFaceNormals();
    geometry.verticesNeedUpdate = true;
    geometry.normalsNeedUpdate = true;
  }
  function init(){
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    window.addEventListener('resize',onWindowResize,false);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    material = new THREE.MeshNormalMaterial({
      shading: THREE.FlatShading,
      //map: new THREE.TextureLoader().load("./asset/00028.png")
      wireframe: true
    });
    var geometry = new THREE.CubeGeometry(10,10,10,30,30,30);
    mesh = new THREE.Mesh(geometry, material);
    camera.position.z = 100;
    scene.add(mesh);
    scene.add(camera);
    animatedRender();
  }
  function animatedRender(){
    requestAnimationFrame(animatedRender);
    updateBlob(mesh.geometry);
    //mesh.rotation.y += 0.02;
    renderer.render(scene,camera);
  }
  function onDocumentMouseMove(event){
    //mouseX = (event.clientX - window.innerWidth/2);
    mouseX = mesh.rotation.y += 0.009;
    //console.log(mouseX);
  }
  function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
  }
  init();
  //render();
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	body {
	margin: 0;
	overflow: hidden;
	}
	canvas{
	width:100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<script src="js/three.min.js"></script>
	<script src="js/ImprovedNoise.js"></script>
	<script>
	var mesh,material,
	noise = new ImprovedNoise(),
	viewAngle = 75,
	aspectRatio = window.innerWidth/window.innerHeight,
	near = 0.1,
	far =5000,
	camera = new THREE.PerspectiveCamera(viewAngle, aspectRatio, near, far),
	scene = new THREE.Scene(),
	renderer = new THREE.WebGLRenderer();
	//window.addEventListener('load',init);
	function updateBlob(geometry){
	var time = 0.001 *Date.now();
	var vertex , distance;
	for(var j =0; j < geometry.vertices.length; j++){
	vertex = geometry.vertices[j];
	distance = 30 + 3*noise.noise(
	0.1vertex.x + 1.3 time,
	0.1 vertex.y +0.9 time,
	0.1vertex.z+10.1time
	);
	vertex.normalize().multiplyScalar(distance);
	}
	geometry.computeVertexNormals();
	geometry.computeFaceNormals();
	geometry.verticesNeedUpdate = true;
	geometry.normalsNeedUpdate = true;
	}
	function init(){
	document.addEventListener('mousemove', onDocumentMouseMove, false);
	window.addEventListener('resize',onWindowResize,false);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	material = new THREE.MeshNormalMaterial({
	shading: THREE.FlatShading,
	//map: new THREE.TextureLoader().load("./asset/00028.png")
	wireframe: true
	});
	var geometry = new THREE.CubeGeometry(10,10,10,30,30,30);
	mesh = new THREE.Mesh(geometry, material);
	camera.position.z = 100;
	scene.add(mesh);
	scene.add(camera);
	animatedRender();
	}
	function animatedRender(){
	requestAnimationFrame(animatedRender);
	updateBlob(mesh.geometry);
	//mesh.rotation.y += 0.02;
	renderer.render(scene,camera);
	}
	function onDocumentMouseMove(event){
	//mouseX = (event.clientX - window.innerWidth/2);
	mouseX = mesh.rotation.y += 0.009;
	//console.log(mouseX);
	}
	function onWindowResize(){
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth,window.innerHeight);
	}
	init();
	//render();
	</script>
	</body>
	</html>