用骨骼蒙皮創(chuàng)建動(dòng)畫.jpg
Three.js提供了帶有蒙皮的網(wǎng)格對(duì)象THREE.SkinnedMesh。需要注意的是將材質(zhì)的skinning屬性設(shè)置為true，否則骨頭不會(huì)運(yùn)動(dòng)的。
在練習(xí)書上的案例的時(shí)候遇到一些問題。
- tween.js問題，版本不對(duì)總是報(bào)錯(cuò)。網(wǎng)上下載的版本也搞錯(cuò)了一次。壓縮版的好像有版本號(hào)，正常版的沒有。
- SkinnedMesh由于習(xí)慣直接寫成了Mesh，模型可以正常加載，但是 mesh.skeleton屬性沒有，所以沒有動(dòng)畫，而且會(huì)報(bào)錯(cuò)。一直以為是加載順序的問題。
mesh = new THREE.SkinnedMesh(geometry,material);
skinnedmesh.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>骨骼蒙皮創(chuàng)建動(dòng)畫</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;
// 旋轉(zhuǎn)手指
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);
// 旋轉(zhuǎn)手腕
// mesh.skeleton.bones[1].rotation.set(pos, 0, 0);
});
}
//場(chǎng)景
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 );
}
//地面 和 輔助網(wǎng)格
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;
}
//相機(jī)軌道控制器
function orbitControls() {
controls = new THREE.OrbitControls(camera,renderer.domElement);
//自轉(zhuǎn)
controls.autoRotate = true;
controls.autoRotateSpeed = 0.02;
//阻尼 阻尼系數(shù)
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);
}
}
//渲染動(dòng)畫
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>
