在this fiddle中我试图根据threejs.org/docs/scenes/bones-browser上的基本骨骼示例创建一个程序蠕虫(或蛇或毛毛虫)角色,但还有四个骨头和眼睛的两个球体加上;这里显示的添加/更改的代码......
function eyeBall(){
[2]
function createBones(sizing){
function eyeBall( ) {
var faceIndices = [ 'a', 'b', 'c' ];
var color, f, i, j, p, vertexIndex, radius = 1;
var geometry = new THREE.SphereGeometry( radius, 18, 5 );
for ( i = 0; i < geometry.faces.length; i ++ ) {
f = geometry.faces[ i ];
for( j = 0; j < 3; j++ ) {
vertexIndex = f[ faceIndices[ j ] ];
p = geometry.vertices[ vertexIndex ];
f.color = new THREE.Color( 0xffffff );
if( p.y < -0.9 ) {
f.color = new THREE.Color( 0x000000 );
}
}
}
return geometry;
}
函数initBones(){
function createBones ( sizing ) {
bones = [];
var prevBone = new THREE.Bone();
bones.push( prevBone );
prevBone.position.z = - sizing.halfLength;
for ( var i = 0; i < sizing.segmentCount; i ++ ) {
var bone = new THREE.Bone();
bone.position.z = sizing.segmentLength;
bones.push( bone );
prevBone.add( bone );
prevBone = bone;
}
//add more bones
var lHdBone = new THREE.Bone();
lHdBone.position.set( 1.4, 0, 2.8 );
lHdBone.name = 'lHdBone';
bones.push( lHdBone );
prevBone.add( lHdBone );
var rHdBone = new THREE.Bone();
rHdBone.position.set( -1.4, 0, 2.8 );
rHdBone.name = 'rHdBone';
bones.push( rHdBone );
prevBone.add( rHdBone );
var lEyeBone = new THREE.Bone();
lEyeBone.position.set( 0, 0, 1 );
lEyeBone.name = 'lEyeBone';
bones.push( lEyeBone );
lHdBone.add( lEyeBone );
var rEyeBone = new THREE.Bone();
rEyeBone.position.set( 0, 0, 1 );
rEyeBone.name = 'rEyeBone';
bones.push( rEyeBone );
rHdBone.add( rEyeBone );
return bones;
}
小提琴中的动画将球体移动到相同的大致方向,但球体显然没有按照需要与骨骼相连。眼睛应该向前看。我没有找到任何类似的问题,因为大多数建模是在Blender中完成的,但我确信这应该只能在three.js中完成。 我觉得我错过了一些简单的东西!
带有合并几何的This is another fiddle。现在一只眼睛似乎行动正确,但另一只眼睛显然是儿童骨骼;即骨骼[6]是骨骼的孩子[5],而他们都应该是骨头的孩子[4]。