用骨骼蒙皮创建动画.jpg
Three.js提供了带有蒙皮的网格对象THREE.SkinnedMesh。需要注意的是将材质的skinning属性设置为true，否则骨头不会运动的。
在练习书上的案例的时候遇到一些问题。
- tween.js问题，版本不对总是报错。网上下载的版本也搞错了一次。压缩版的好像有版本号，正常版的没有。
- SkinnedMesh由于习惯直接写成了Mesh，模型可以正常加载，但是 mesh.skeleton属性没有，所以没有动画，而且会报错。一直以为是加载顺序的问题。
mesh = new THREE.SkinnedMesh(geometry,material);
skinnedmesh.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>骨骼蒙皮创建动画</title>
<script type="text/javascript" src="../js/three.js"></script>
<script type="text/javascript" src="../js/Detector.js"></script>
<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" src="../js/controls/OrbitControls.js"></script>
<style type="text/css">
body{margin: 0;overflow: hidden}
</style>
</head>
<body>
<div id="webgl-output"></div>
<script type="text/javascript">
//if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var scene,camera,renderer,light,controls;
var clock = new THREE.Clock();
var mesh,tween,skeletonHelper;
// 加载模型
function iniLoad() {
var loader = new THREE.JSONLoader();
loader.load('models/hand-1.js',function (geometry) {
var material = new THREE.MeshLambertMaterial({color:'#e3db5a',skinning:true});
mesh = new THREE.SkinnedMesh(geometry,material);
mesh.scale.set(5,5,5);
skeletonHelper = new THREE.SkeletonHelper( mesh );
skeletonHelper.visible = true;
scene.add( skeletonHelper );
mesh.position.y = 5;
mesh.castShadow =true;
scene.add(mesh);
tween.start();
});
}
function initween() {
tween = new TWEEN.Tween({pos: -1});
tween.to({pos: 0}, 3000);
tween.easing(TWEEN.Easing.Cubic.InOut).yoyo(true).repeat(Infinity);
tween.onUpdate(function () {
var pos = this.pos;
// 旋转手指
mesh.skeleton.bones[5].rotation.set(0, 0, pos);
mesh.skeleton.bones[6].rotation.set(0, 0, pos);
mesh.skeleton.bones[10].rotation.set(0, 0, pos);
mesh.skeleton.bones[11].rotation.set(0, 0, pos);
mesh.skeleton.bones[15].rotation.set(0, 0, pos);
mesh.skeleton.bones[16].rotation.set(0, 0, pos);
mesh.skeleton.bones[20].rotation.set(0, 0, pos);
mesh.skeleton.bones[21].rotation.set(0, 0, pos);
// 旋转手腕
// mesh.skeleton.bones[1].rotation.set(pos, 0, 0);
});
}
//场景
function iniScene() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
renderer = new THREE.WebGLRenderer({antialias: true});
camera.position.set(-10,20,20);
camera.lookAt(scene.position);
renderer.setClearColor(0x333333);
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth,window.innerHeight);
scene.add(new THREE.AxesHelper(4));
document.getElementById('webgl-output').appendChild(renderer.domElement);
}
//灯光
function iniLight() {
light = new THREE.AmbientLight(0x333333);
scene.add(light);
light = new THREE.SpotLight(0x888888);
light.position.set(0,40,30);
light.castShadow = true;
light.shadow.mapSize.height = 4096;
light.shadow.mapSize.width = 4096;
scene.add(light);
light = new THREE.HemisphereLight( 0xffffff,0x444444,0.6 );
light.position.set( 0, 200, 0 );
scene.add( light );
}
//地面 和 辅助网格
function iniPlane() {
var planeGeo = new THREE.PlaneGeometry(40,40);
var planeMat = new THREE.MeshPhongMaterial( { color: 0x999999} );
var plane = new THREE.Mesh(planeGeo,planeMat);
plane.receiveShadow = true;
plane.position.y = -0.01;
plane.rotation.x = -0.5*Math.PI;
scene.add(plane);
var grid = new THREE.GridHelper( 40, 20, 0x000000, 0x000000 );
grid.material.transparent = true;
grid.material.opacity = 0.3;
scene.add( grid );
}
//立方体
function cubeDr(a,x,y,z) {
var cubeGeo = new THREE.BoxGeometry(a,a,a);
var cubeMat = new THREE.MeshPhongMaterial({
color:0xfff000*Math.random()
});
var cube = new THREE.Mesh(cubeGeo,cubeMat);
cube.position.set(x,y,z);
cube.castShadow = true;
scene.add(cube);
return cube;
}
//相机轨道控制器
function orbitControls() {
controls = new THREE.OrbitControls(camera,renderer.domElement);
//自转
controls.autoRotate = true;
controls.autoRotateSpeed = 0.02;
//阻尼 阻尼系数
controls.enableDamping = true;
controls.dampingFactor = 0.4;
//缩放
controls.enableZoom = true;
controls.minDistance = 5;
controls.maxDistance = 100;
//右键拖拽
controls.enablePan = true;
}
//改变窗口大小
function windowResize() {
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
}
//渲染动画
function render() {
requestAnimationFrame(render);
TWEEN.update();
renderer.render(scene,camera);
controls.update(clock.getDelta());
}
function drawScene() {
iniScene();
iniLight();
orbitControls();
windowResize();
iniPlane();
cubeDr(2,1,1,1);
initween();
iniLoad();
render();
}
drawScene();
</script>
</body>
</html>
