1
誰かが私にこのオブジェクトをアニメ化させてくれるのを助けてくれたらどうですか？three.jsで尻尾を動かす（アニメートする）ことはできませんか？
アップダウン・トゥ・ムーブ| 左 - 右回転| aを検索する| http://www.aacctrust.org/anim/anim.htm
JSON（アニメーション尾-WAG付き）モデルファイル：ファイルのorignalする
リンクを下に見て Z
http://wikisend.com/download/654748/wolf.json
を問題は、JSONのモデルファイルがで提供されているありますテールのアニメーションに関する必要な詳細。オオカミの尾が揺れ動くと思われる。 しかし、それはありません、私はすべてを試みたが、助けにはしませんでした。
コードに問題がありますか、適切にエクスポートできません。以下は
コードです：
<html>
<head>
<style>
body { margin: 0; }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
var canvas = document.getElementById("myCanvas");
renderer = new THREE.WebGLRenderer({ canvas: canvas });
var camera = new THREE.PerspectiveCamera(75, (canvas.width/canvas.height) , 1, 10000);
var clock = new THREE.Clock(),mixer;
var forest,wolf,animation;
var fwd,bck,lft,rgt,up,down = 0 ;
var action = {};
camera.fov *= 0.3;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor (0x22222222, 1);
camera.position.z = 28;
var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('wolf_uvcons.png') });
// Wolf Texture Above # Forest Uses Local Materials @Blender
var loader = new THREE.JSONLoader();
loader.load('forest.json', function(geometry, materials) {
forest = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
forest.scale.x = forest.scale.y = forest.scale.z = 0.25;
forest.rotateX(Math.PI/2);forest.rotateZ(Math.PI ); //load :env:
forest.translation = THREE.GeometryUtils.center(geometry);
scene.add(forest);
});
loader.load('wolf.json', function(geometry, materials) {
wolf = new THREE.SkinnedMesh(geometry,material);
wolf.scale.x = wolf.scale.y = wolf.scale.z = 0.25; //load wolf
wolf.translation = THREE.GeometryUtils.center(geometry);
scene.add(wolf);
wolf.add(camera);
wolf.translateY(-27); /// Bring it down
wolf.translateZ(100); /// Bring it down
action.idle = new THREE.AnimationAction(geometry.animations[ 0 ]);
action.idle.weight = 1;
// Create animation mixer and pass object to it
mixer = new THREE.AnimationMixer(wolf);
mixer.addAction(action.idle);
});
var light = new THREE.AmbientLight(0xFFFFFFFF,1);
scene.add(light);
var pointLight = new THREE.PointLight(0xffcccc,0.41);
pointLight.position.set(0, 100, 3);
scene.add(pointLight);
var pointLight1 = new THREE.PointLight(0xff0000,0.81);
pointLight1.position.set(100, 200, 3);
scene.add(pointLight1);
function moveWolf()
{
if (fwd==1)
{ wolf.translateZ(-1);}
if (bck==1)
{ wolf.translateZ(1);}
if (lft==1)
{ wolf.rotateY(Math.PI/200)}
if (rgt==1)
{ wolf.rotateY(-Math.PI/200);}
if (up==1)
{ camera.rotateX(Math.PI/200);}
if (down==1)
{ camera.rotateX(-Math.PI/200);}
}
function animate() {
requestAnimationFrame(animate);
moveWolf();
render();
var delta = clock.getDelta();
var theta = clock.getElapsedTime();
if (mixer) { mixer.update(delta); }
}
function render() {
renderer.render(scene, camera);
}
animate();
</script>
<script>
document.onkeydown = checkKey1;
document.onkeyup = checkKey2;
function checkKey1(e) {
e = e || window.event;
if (e.keyCode == '38') {
// up arrow
fwd=1;
}
else if (e.keyCode == '40') {
// down arrow
bck=1;
}
else if (e.keyCode == '37') {
// left arrow
lft=1;
}
else if (e.keyCode == '39') {
// right arrow
rgt=1;
}
else if (e.keyCode == '65') {
up=1;
}
else if (e.keyCode == '90') {
down=1;
}
}
function checkKey2(e) {
e = e || window.event;
if (e.keyCode == '38') {
// up arrow
fwd=0;
}
else if (e.keyCode == '40') {
// down arrow
bck=0;
}
else if (e.keyCode == '37') {
// left arrow
lft=0;
}
else if (e.keyCode == '39') {
// right arrow
rgt=0;
}
else if (e.keyCode == '65') {
// right arrow
up=0;
}
else if (e.keyCode == '90') {
// right arrow
down=0;
}
}
</script>
</body>
</html>