Summary:
Skin Animation: 3D animation to simulate objects by simulating the movement of people, the game is also often used.
The main production of skin animation process and pay attention to the point:
1. Make skinned mesh:
var material = new THREE.MeshBasicMaterial({color: 0xfff000,wireframe:true,skinning : true});
mesh = new THREE.SkinnedMesh(geometry,material);
mesh.position.y = 15;
Note that the material of skinning: true must set to true, no bone or skin with skeletal movement.
2. Production bones:
var bones =[];
var arm = new THREE.Bone();
arm.position.y = - 15;
bones.push(arm);
for(var i = 0 ;i<3;i++){
var bone = new THREE.Bone();
bone.position.y = 10;
arm.add(bone);
arm = bone;
bones.push(bone);
}
Note: The idea here is to create a bone arm, and then create a cycle n bones, were added to the previous one bone. I.e. bone [0] is added to the arm, bone [1] was added to bone [0], the whole bones ultimately arm this connection a bone, behind used.
Note 2: arm bones added to the starting position in the center point of the mesh of the mesh, so there may be provided position.y = - half the height of the mesh, the relative positions of the other bone of the inferior race to add it to bone.
3. Make the skeleton:
var skeleton = new THREE.Skeleton(bones);
4.mesh add the bones and skeletons possessed:
mesh.add(bones[0]);
mesh.bind(skeleton);
5. The last step of the setup geometry for each vertex impact, and the impact which the bones of the subject:
for ( var i = 0; i < geometry.vertices.length; i ++ ) {
var vertex = geometry.vertices[ i ];
var y = ( vertex.y + 15 );
var skinIndex = Math.floor( y / 10 );
var skinWeight = ( y % 10 ) / 10;
geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );
}
Note: Here var y = (vertex.y + 15) ; because we displaced mesh, the value does not change geometry of vertices, each mesh value plus the offset value, the value of the vertices of the geometry does not change resolved The method may be provided geometry.verricesNeedUpdate = true;
Note: Each node layer is meant herein by the degree of influence of the layer corresponding to the bone:
Case are as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>蒙皮</title>
<style>
body{
margin:0;
}
</style>
</head>
<script src="../build/three.js"></script>
<script src="../js/controls/OrbitControls.js"></script>
<script>
function init() {
createScene();
buildAuxSystem();
addBox();
loop();
}
var scene,camera,renderer,width = window.innerWidth,height = window.innerHeight,controls;
var mesh;
function createScene() {
scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
camera.position.set(0,0,200);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x333333),1);
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize",handleWindowResize,false)
}
function loop() {
renderer.render(scene,camera);
requestAnimationFrame(loop);
var time = Date.now() * 0.001;
for ( var i = 0; i < mesh.skeleton.bones.length; i ++ ) {
mesh.skeleton.bones[ i ].rotation.z = Math.sin( time ) * 2 / mesh.skeleton.bones.length;
}
}
function handleWindowResize() {
width = window.innerWidth;
height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
}
// 建立辅助设备系统
function buildAuxSystem(){
var gridHelper = new THREE.GridHelper(320,32);
scene.add(gridHelper);
// var axesHelper = new THREE.AxesHelper(320);
// scene.add(axesHelper);
controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.3;
controls.rotateSpeed = 0.35;
controls.enableKeys = false;
controls.update();
}
function addBox() {
var geometry = new THREE.BoxGeometry(10,30,10,1,9,1);
for ( var i = 0; i < geometry.vertices.length; i ++ ) {
var vertex = geometry.vertices[ i ];
var y = ( vertex.y + 15 );
var skinIndex = Math.floor( y / 10 );
var skinWeight = ( y % 10 ) / 10;
geometry.skinIndices.push( new THREE.Vector4( skinIndex, skinIndex + 1, 0, 0 ) );
geometry.skinWeights.push( new THREE.Vector4( 1 - skinWeight, skinWeight, 0, 0 ) );
}
var material = new THREE.MeshBasicMaterial({color: 0xfff000,wireframe:true,skinning : true});
mesh = new THREE.SkinnedMesh(geometry,material);
mesh.position.y = 15;
var bones =[];
var arm = new THREE.Bone();
arm.position.y = - 15;
bones.push(arm);
for(var i = 0 ;i<3;i++){
var bone = new THREE.Bone();
bone.position.y = 10;
arm.add(bone);
arm = bone;
bones.push(bone);
}
mesh.add(bones[0]);
var skeleton = new THREE.Skeleton(bones);
mesh.bind(skeleton);
var skeletonHelper = new THREE.SkeletonHelper(mesh);
scene.add(skeletonHelper);
scene.add(mesh);
}
</script>
<body onload ="init()">
</body>
</html>
