最小のthree.jsスケルトンアニメーション？

Question

three.jsが掘り下げたモデルをどのように輝かしい低レベルの詳細でアニメーション化するかを理解したい。ここに私の現在のコードです：

renderer = new THREE.WebGLRenderer(); 

renderer.setSize(window.innerWidth, window.innerHeight); 

document.body.appendChild(renderer.domElement); 

camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 500); 

camera.position.set(0, 0, 50); 
camera.lookAt(new THREE.Vector3(0, 0, 0)); 

scene = new THREE.Scene(); 

var geometry = new THREE.BoxGeometry(10, 1, 1); 

for (var i = 0; i < geometry.vertices.length; i++) { 
    geometry.skinIndices.push(new THREE.Vector4(0, 1, 0, 0)); 
    geometry.skinWeights.push(new THREE.Vector4(1, 1, 0, 0)); 
} 

var bones = []; 

var bone1 = new THREE.Bone(); 
bone1.position.x = 5; 
bones.push(bone1); 

var bone2 = new THREE.Bone(); 
bone2.position.x = -5; 
bones.push(bone2); 
bone1.add(bone2); 

var material = new THREE.MeshBasicMaterial({ color: 0x156289 }); 

var mesh = new THREE.SkinnedMesh(geometry, material); 
var skeleton = new THREE.Skeleton(bones); 

mesh.add(bone1); 
mesh.bind(skeleton); 
scene.add(mesh); 

skeletonHelper = new THREE.SkeletonHelper(mesh); 
skeletonHelper.material.linewidth = 2; 
scene.add(skeletonHelper); 



function animate() { 
    requestAnimationFrame(animate); 

    var time = Date.now() * 0.001; 

    mesh.skeleton.bones[0].rotation.z = Math.sin(time) * 2; 

    renderer.render(scene, camera); 
} 

animate(); 

SkeletonHelperが目に見えてアニメーション化されますがボックスではありません。ボックスをアニメーション化するためにコードを修正するにはどうすればよいですか？

ここで、上記のコードでCodePenのペンです：

• An Anonymous Pen on CodePen

Answer 1

はちょうど材料にskinning: trueプロパティを追加、修正するには。したがって、この行：

var material = new THREE.MeshBasicMaterial({ color: 0x156289 }); 

はこのようなものになるだろう：

var material = 
    new THREE.MeshBasicMaterial({ 
     color: 0x156289, 
     skinning: true 
    });