vertex displacement
pure javascript
with intention of bulging cylinder
HTML
<div id="info">Bulged Cylinder
<br/>Press Z to gain weight
<br/>Press Y to lose weight
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
<script src="http://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
CSS
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
text-align: center;
color: #ffff00
}
body {
overflow: hidden;
}
JavaScript
var camera, scene, renderer, geometry, material, mesh, controls;
var keyboard = new KeyboardState();
var height = 100;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
scene.add(camera);
geometry = new THREE.CylinderGeometry (50,50,height, 12, 20);
// geometry = new THREE.IcosahedronGeometry (height,2);
material = new THREE.MeshBasicMaterial({wireframe:true});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x888888);
controls = new THREE.OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function bulgeAmount (vertex) {
var b;
b = vertex.y > 0 ? height/2 : -height/2;
return Math.sin (Math.abs(vertex.y-b)/(height/2) * Math.PI/2);
}
function meshDeform(mode) {
console.log ('deforming ...');
var tmp = new THREE.Vector3();
var scale;
var va,vb,vc;
var i;
mesh.geometry.verticesNeedUpdate = true;
for (i = 0; i < mesh.geometry.faces.length; i++) {
// move three vertices of this face along its (vertex) normal direction,
var face = mesh.geometry.faces[ i ];
var vertexNormals = face.vertexNormals;
va = mesh.geometry.vertices[face.a];
scale = bulgeAmount (va);
tmp.copy (vertexNormals[0]).normalize();
tmp.multiplyScalar (mode*scale);
va.add (tmp);
vb = mesh.geometry.vertices[face.b];
scale = bulgeAmount (vb);
tmp.copy...