Skip to content

Instantly share code, notes, and snippets.

@jameshih

jameshih/index.html

Created Oct 31, 2016
Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment